@tsparticles/interaction-external-bubble 4.0.5 → 4.1.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.
Files changed (14) hide show
  1. package/browser/Bubbler.js +31 -31
  2. package/browser/index.js +1 -1
  3. package/browser/index.lazy.js +1 -1
  4. package/cjs/Bubbler.js +31 -31
  5. package/cjs/index.js +1 -1
  6. package/cjs/index.lazy.js +1 -1
  7. package/esm/Bubbler.js +31 -31
  8. package/esm/index.js +1 -1
  9. package/esm/index.lazy.js +1 -1
  10. package/package.json +3 -3
  11. package/report.html +1 -1
  12. package/tsparticles.interaction.external.bubble.js +32 -32
  13. package/tsparticles.interaction.external.bubble.min.js +1 -1
  14. package/types/Bubbler.d.ts +1 -9
package/browser/Bubbler.js CHANGED
@@ -1,4 +1,4 @@
1
- import { Circle, Rectangle, colorMix, double, getDistance, getRangeMax, half, isInArray, itemFromSingleOrMultiple, millisecondsToSeconds, rangeColorToHsl, rgbToHsl, safeDocument, } from "@tsparticles/engine";
1
+ import { Circle, Rectangle, colorMix, double, getDistance, half, isInArray, itemFromSingleOrMultiple, millisecondsToSeconds, rangeColorToHsl, rgbToHsl, safeDocument, } from "@tsparticles/engine";
2
2
  import { DivType, ExternalInteractorBase, divMode, divModeExecute, isDivModeEnabled, mouseLeaveEvent, mouseMoveEvent, } from "@tsparticles/plugin-interactivity";
3
3
  import { Bubble } from "./Options/Classes/Bubble.js";
4
4
  import { ProcessBubbleType } from "./Enums.js";
@@ -6,12 +6,12 @@ import { calculateBubbleValue } from "./Utils.js";
6
6
  const bubbleMode = "bubble", minDistance = 0, defaultClickTime = 0, defaultOpacity = 1, ratioOffset = 1, defaultBubbleValue = 0, minRatio = 0, defaultRatio = 1;
7
7
  export class Bubbler extends ExternalInteractorBase {
8
8
  handleClickMode;
9
- _maxDistance;
10
- _pluginManager;
9
+ #maxDistance;
10
+ #pluginManager;
11
11
  constructor(pluginManager, container) {
12
12
  super(container);
13
- this._pluginManager = pluginManager;
14
- this._maxDistance = 0;
13
+ this.#pluginManager = pluginManager;
14
+ this.#maxDistance = 0;
15
15
  container.bubble ??= {};
16
16
  this.handleClickMode = (mode) => {
17
17
  if (mode !== bubbleMode) {
@@ -22,7 +22,7 @@ export class Bubbler extends ExternalInteractorBase {
22
22
  };
23
23
  }
24
24
  get maxDistance() {
25
- return this._maxDistance;
25
+ return this.#maxDistance;
26
26
  }
27
27
  clear(particle, _delta, force) {
28
28
  if (particle.bubble.inRange && !force) {
@@ -38,7 +38,7 @@ export class Bubbler extends ExternalInteractorBase {
38
38
  if (!bubble) {
39
39
  return;
40
40
  }
41
- this._maxDistance = bubble.distance;
41
+ this.#maxDistance = bubble.distance;
42
42
  container.retina.bubbleModeDistance = bubble.distance * container.retina.pixelRatio;
43
43
  if (bubble.size !== undefined) {
44
44
  container.retina.bubbleModeSize = bubble.size * container.retina.pixelRatio;
@@ -51,14 +51,14 @@ export class Bubbler extends ExternalInteractorBase {
51
51
  }
52
52
  const onHover = events.onHover, onClick = events.onClick, hoverEnabled = onHover.enable, hoverMode = onHover.mode, clickEnabled = onClick.enable, clickMode = onClick.mode, divs = events.onDiv;
53
53
  if (hoverEnabled && isInArray(bubbleMode, hoverMode)) {
54
- this._hoverBubble(interactivityData);
54
+ this.#hoverBubble(interactivityData);
55
55
  }
56
56
  else if (clickEnabled && isInArray(bubbleMode, clickMode)) {
57
- this._clickBubble(interactivityData);
57
+ this.#clickBubble(interactivityData);
58
58
  }
59
59
  else {
60
60
  divModeExecute(bubbleMode, divs, (selector, div) => {
61
- this._singleSelectorHover(interactivityData, delta, selector, div);
61
+ this.#singleSelectorHover(interactivityData, delta, selector, div);
62
62
  });
63
63
  }
64
64
  }
@@ -82,7 +82,7 @@ export class Bubbler extends ExternalInteractorBase {
82
82
  reset(_interactivityData, particle) {
83
83
  particle.bubble.inRange = false;
84
84
  }
85
- _clickBubble = interactivityData => {
85
+ #clickBubble = interactivityData => {
86
86
  const container = this.container, options = container.actualOptions, mouseClickPos = interactivityData.mouse.clickPosition, bubbleOptions = options.interactivity?.modes.bubble;
87
87
  if (!bubbleOptions || !mouseClickPos) {
88
88
  return;
@@ -112,33 +112,33 @@ export class Bubbler extends ExternalInteractorBase {
112
112
  value: particle.bubble.radius,
113
113
  },
114
114
  particlesObj: {
115
- optValue: getRangeMax(particle.options.size.value) * container.retina.pixelRatio,
115
+ optValue: particle.size.max,
116
116
  value: particle.size.value,
117
117
  },
118
118
  type: ProcessBubbleType.size,
119
119
  };
120
- this._process(particle, distMouse, timeSpent, sizeData);
120
+ this.#process(particle, distMouse, timeSpent, sizeData);
121
121
  const opacityData = {
122
122
  bubbleObj: {
123
123
  optValue: bubbleOptions.opacity,
124
124
  value: particle.bubble.opacity,
125
125
  },
126
126
  particlesObj: {
127
- optValue: getRangeMax(particle.options.opacity.value),
127
+ optValue: particle.opacity?.max ?? defaultOpacity,
128
128
  value: particle.opacity?.value ?? defaultOpacity,
129
129
  },
130
130
  type: ProcessBubbleType.opacity,
131
131
  };
132
- this._process(particle, distMouse, timeSpent, opacityData);
132
+ this.#process(particle, distMouse, timeSpent, opacityData);
133
133
  if (!bubble.durationEnd && distMouse <= distance) {
134
- this._hoverBubbleColor(particle, distMouse);
134
+ this.#hoverBubbleColor(particle, distMouse);
135
135
  }
136
136
  else {
137
137
  delete particle.bubble.color;
138
138
  }
139
139
  }
140
140
  };
141
- _hoverBubble = interactivityData => {
141
+ #hoverBubble = interactivityData => {
142
142
  const container = this.container, mousePos = interactivityData.mouse.position, distance = container.retina.bubbleModeDistance;
143
143
  if (!distance || distance < minDistance || !mousePos) {
144
144
  return;
@@ -149,9 +149,9 @@ export class Bubbler extends ExternalInteractorBase {
149
149
  const pos = particle.getPosition(), pointDistance = getDistance(pos, mousePos), ratio = ratioOffset - pointDistance / distance;
150
150
  if (pointDistance <= distance) {
151
151
  if (ratio >= minRatio && interactivityData.status === mouseMoveEvent) {
152
- this._hoverBubbleSize(particle, ratio);
153
- this._hoverBubbleOpacity(particle, ratio);
154
- this._hoverBubbleColor(particle, ratio);
152
+ this.#hoverBubbleSize(particle, ratio);
153
+ this.#hoverBubbleOpacity(particle, ratio);
154
+ this.#hoverBubbleColor(particle, ratio);
155
155
  }
156
156
  }
157
157
  else {
@@ -162,7 +162,7 @@ export class Bubbler extends ExternalInteractorBase {
162
162
  }
163
163
  }
164
164
  };
165
- _hoverBubbleColor = (particle, ratio, divBubble) => {
165
+ #hoverBubbleColor = (particle, ratio, divBubble) => {
166
166
  const options = this.container.actualOptions, bubbleOptions = divBubble ?? options.interactivity?.modes.bubble;
167
167
  if (!bubbleOptions) {
168
168
  return;
@@ -173,7 +173,7 @@ export class Bubbler extends ExternalInteractorBase {
173
173
  return;
174
174
  }
175
175
  const bubbleColor = itemFromSingleOrMultiple(modeColor);
176
- particle.bubble.finalColor = rangeColorToHsl(this._pluginManager, bubbleColor);
176
+ particle.bubble.finalColor = rangeColorToHsl(this.#pluginManager, bubbleColor);
177
177
  }
178
178
  if (!particle.bubble.finalColor) {
179
179
  return;
@@ -189,27 +189,27 @@ export class Bubbler extends ExternalInteractorBase {
189
189
  particle.bubble.color = particle.bubble.finalColor;
190
190
  }
191
191
  };
192
- _hoverBubbleOpacity = (particle, ratio, divBubble) => {
192
+ #hoverBubbleOpacity = (particle, ratio, divBubble) => {
193
193
  const container = this.container, options = container.actualOptions, modeOpacity = divBubble?.opacity ?? options.interactivity?.modes.bubble?.opacity;
194
194
  if (!modeOpacity) {
195
195
  return;
196
196
  }
197
- const optOpacity = particle.options.opacity.value, pOpacity = particle.opacity?.value ?? defaultOpacity, opacity = calculateBubbleValue(pOpacity, modeOpacity, getRangeMax(optOpacity), ratio);
197
+ const pOpacity = particle.opacity?.value ?? defaultOpacity, opacity = calculateBubbleValue(pOpacity, modeOpacity, particle.opacity?.max ?? defaultOpacity, ratio);
198
198
  if (opacity !== undefined) {
199
199
  particle.bubble.opacity = opacity;
200
200
  }
201
201
  };
202
- _hoverBubbleSize = (particle, ratio, divBubble) => {
202
+ #hoverBubbleSize = (particle, ratio, divBubble) => {
203
203
  const container = this.container, modeSize = divBubble?.size ? divBubble.size * container.retina.pixelRatio : container.retina.bubbleModeSize;
204
204
  if (modeSize === undefined) {
205
205
  return;
206
206
  }
207
- const optSize = getRangeMax(particle.options.size.value) * container.retina.pixelRatio, pSize = particle.size.value, size = calculateBubbleValue(pSize, modeSize, optSize, ratio);
207
+ const pSize = particle.size.value, size = calculateBubbleValue(pSize, modeSize, particle.size.max, ratio);
208
208
  if (size !== undefined) {
209
209
  particle.bubble.radius = size;
210
210
  }
211
211
  };
212
- _process = (particle, distMouse, timeSpent, data) => {
212
+ #process = (particle, distMouse, timeSpent, data) => {
213
213
  const container = this.container, bubbleParam = data.bubbleObj.optValue, options = container.actualOptions, bubbleOptions = options.interactivity?.modes.bubble;
214
214
  if (!bubbleOptions || bubbleParam === undefined) {
215
215
  return;
@@ -252,7 +252,7 @@ export class Bubbler extends ExternalInteractorBase {
252
252
  }
253
253
  }
254
254
  };
255
- _singleSelectorHover = (interactivityData, delta, selector, div) => {
255
+ #singleSelectorHover = (interactivityData, delta, selector, div) => {
256
256
  const container = this.container, selectors = safeDocument().querySelectorAll(selector), bubble = container.actualOptions.interactivity?.modes.bubble;
257
257
  if (!bubble || !selectors.length) {
258
258
  return;
@@ -274,9 +274,9 @@ export class Bubbler extends ExternalInteractorBase {
274
274
  this.clear(particle, delta, true);
275
275
  particle.bubble.div = elem;
276
276
  }
277
- this._hoverBubbleSize(particle, defaultRatio, divBubble);
278
- this._hoverBubbleOpacity(particle, defaultRatio, divBubble);
279
- this._hoverBubbleColor(particle, defaultRatio, divBubble);
277
+ this.#hoverBubbleSize(particle, defaultRatio, divBubble);
278
+ this.#hoverBubbleOpacity(particle, defaultRatio, divBubble);
279
+ this.#hoverBubbleColor(particle, defaultRatio, divBubble);
280
280
  }
281
281
  });
282
282
  };
package/browser/index.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { ensureInteractivityPluginLoaded } from "@tsparticles/plugin-interactivity";
2
2
  import { Bubbler } from "./Bubbler.js";
3
3
  export async function loadExternalBubbleInteraction(engine) {
4
- engine.checkVersion("4.0.5");
4
+ engine.checkVersion("4.1.0");
5
5
  await engine.pluginManager.register((e) => {
6
6
  ensureInteractivityPluginLoaded(e);
7
7
  e.pluginManager.addInteractor?.("externalBubble", container => {
package/browser/index.lazy.js CHANGED
@@ -1,5 +1,5 @@
1
1
  export async function loadExternalBubbleInteraction(engine) {
2
- engine.checkVersion("4.0.5");
2
+ engine.checkVersion("4.1.0");
3
3
  await engine.pluginManager.register(async (e) => {
4
4
  const { ensureInteractivityPluginLoaded } = await import("@tsparticles/plugin-interactivity/lazy");
5
5
  ensureInteractivityPluginLoaded(e);
package/cjs/Bubbler.js CHANGED
@@ -1,4 +1,4 @@
1
- import { Circle, Rectangle, colorMix, double, getDistance, getRangeMax, half, isInArray, itemFromSingleOrMultiple, millisecondsToSeconds, rangeColorToHsl, rgbToHsl, safeDocument, } from "@tsparticles/engine";
1
+ import { Circle, Rectangle, colorMix, double, getDistance, half, isInArray, itemFromSingleOrMultiple, millisecondsToSeconds, rangeColorToHsl, rgbToHsl, safeDocument, } from "@tsparticles/engine";
2
2
  import { DivType, ExternalInteractorBase, divMode, divModeExecute, isDivModeEnabled, mouseLeaveEvent, mouseMoveEvent, } from "@tsparticles/plugin-interactivity";
3
3
  import { Bubble } from "./Options/Classes/Bubble.js";
4
4
  import { ProcessBubbleType } from "./Enums.js";
@@ -6,12 +6,12 @@ import { calculateBubbleValue } from "./Utils.js";
6
6
  const bubbleMode = "bubble", minDistance = 0, defaultClickTime = 0, defaultOpacity = 1, ratioOffset = 1, defaultBubbleValue = 0, minRatio = 0, defaultRatio = 1;
7
7
  export class Bubbler extends ExternalInteractorBase {
8
8
  handleClickMode;
9
- _maxDistance;
10
- _pluginManager;
9
+ #maxDistance;
10
+ #pluginManager;
11
11
  constructor(pluginManager, container) {
12
12
  super(container);
13
- this._pluginManager = pluginManager;
14
- this._maxDistance = 0;
13
+ this.#pluginManager = pluginManager;
14
+ this.#maxDistance = 0;
15
15
  container.bubble ??= {};
16
16
  this.handleClickMode = (mode) => {
17
17
  if (mode !== bubbleMode) {
@@ -22,7 +22,7 @@ export class Bubbler extends ExternalInteractorBase {
22
22
  };
23
23
  }
24
24
  get maxDistance() {
25
- return this._maxDistance;
25
+ return this.#maxDistance;
26
26
  }
27
27
  clear(particle, _delta, force) {
28
28
  if (particle.bubble.inRange && !force) {
@@ -38,7 +38,7 @@ export class Bubbler extends ExternalInteractorBase {
38
38
  if (!bubble) {
39
39
  return;
40
40
  }
41
- this._maxDistance = bubble.distance;
41
+ this.#maxDistance = bubble.distance;
42
42
  container.retina.bubbleModeDistance = bubble.distance * container.retina.pixelRatio;
43
43
  if (bubble.size !== undefined) {
44
44
  container.retina.bubbleModeSize = bubble.size * container.retina.pixelRatio;
@@ -51,14 +51,14 @@ export class Bubbler extends ExternalInteractorBase {
51
51
  }
52
52
  const onHover = events.onHover, onClick = events.onClick, hoverEnabled = onHover.enable, hoverMode = onHover.mode, clickEnabled = onClick.enable, clickMode = onClick.mode, divs = events.onDiv;
53
53
  if (hoverEnabled && isInArray(bubbleMode, hoverMode)) {
54
- this._hoverBubble(interactivityData);
54
+ this.#hoverBubble(interactivityData);
55
55
  }
56
56
  else if (clickEnabled && isInArray(bubbleMode, clickMode)) {
57
- this._clickBubble(interactivityData);
57
+ this.#clickBubble(interactivityData);
58
58
  }
59
59
  else {
60
60
  divModeExecute(bubbleMode, divs, (selector, div) => {
61
- this._singleSelectorHover(interactivityData, delta, selector, div);
61
+ this.#singleSelectorHover(interactivityData, delta, selector, div);
62
62
  });
63
63
  }
64
64
  }
@@ -82,7 +82,7 @@ export class Bubbler extends ExternalInteractorBase {
82
82
  reset(_interactivityData, particle) {
83
83
  particle.bubble.inRange = false;
84
84
  }
85
- _clickBubble = interactivityData => {
85
+ #clickBubble = interactivityData => {
86
86
  const container = this.container, options = container.actualOptions, mouseClickPos = interactivityData.mouse.clickPosition, bubbleOptions = options.interactivity?.modes.bubble;
87
87
  if (!bubbleOptions || !mouseClickPos) {
88
88
  return;
@@ -112,33 +112,33 @@ export class Bubbler extends ExternalInteractorBase {
112
112
  value: particle.bubble.radius,
113
113
  },
114
114
  particlesObj: {
115
- optValue: getRangeMax(particle.options.size.value) * container.retina.pixelRatio,
115
+ optValue: particle.size.max,
116
116
  value: particle.size.value,
117
117
  },
118
118
  type: ProcessBubbleType.size,
119
119
  };
120
- this._process(particle, distMouse, timeSpent, sizeData);
120
+ this.#process(particle, distMouse, timeSpent, sizeData);
121
121
  const opacityData = {
122
122
  bubbleObj: {
123
123
  optValue: bubbleOptions.opacity,
124
124
  value: particle.bubble.opacity,
125
125
  },
126
126
  particlesObj: {
127
- optValue: getRangeMax(particle.options.opacity.value),
127
+ optValue: particle.opacity?.max ?? defaultOpacity,
128
128
  value: particle.opacity?.value ?? defaultOpacity,
129
129
  },
130
130
  type: ProcessBubbleType.opacity,
131
131
  };
132
- this._process(particle, distMouse, timeSpent, opacityData);
132
+ this.#process(particle, distMouse, timeSpent, opacityData);
133
133
  if (!bubble.durationEnd && distMouse <= distance) {
134
- this._hoverBubbleColor(particle, distMouse);
134
+ this.#hoverBubbleColor(particle, distMouse);
135
135
  }
136
136
  else {
137
137
  delete particle.bubble.color;
138
138
  }
139
139
  }
140
140
  };
141
- _hoverBubble = interactivityData => {
141
+ #hoverBubble = interactivityData => {
142
142
  const container = this.container, mousePos = interactivityData.mouse.position, distance = container.retina.bubbleModeDistance;
143
143
  if (!distance || distance < minDistance || !mousePos) {
144
144
  return;
@@ -149,9 +149,9 @@ export class Bubbler extends ExternalInteractorBase {
149
149
  const pos = particle.getPosition(), pointDistance = getDistance(pos, mousePos), ratio = ratioOffset - pointDistance / distance;
150
150
  if (pointDistance <= distance) {
151
151
  if (ratio >= minRatio && interactivityData.status === mouseMoveEvent) {
152
- this._hoverBubbleSize(particle, ratio);
153
- this._hoverBubbleOpacity(particle, ratio);
154
- this._hoverBubbleColor(particle, ratio);
152
+ this.#hoverBubbleSize(particle, ratio);
153
+ this.#hoverBubbleOpacity(particle, ratio);
154
+ this.#hoverBubbleColor(particle, ratio);
155
155
  }
156
156
  }
157
157
  else {
@@ -162,7 +162,7 @@ export class Bubbler extends ExternalInteractorBase {
162
162
  }
163
163
  }
164
164
  };
165
- _hoverBubbleColor = (particle, ratio, divBubble) => {
165
+ #hoverBubbleColor = (particle, ratio, divBubble) => {
166
166
  const options = this.container.actualOptions, bubbleOptions = divBubble ?? options.interactivity?.modes.bubble;
167
167
  if (!bubbleOptions) {
168
168
  return;
@@ -173,7 +173,7 @@ export class Bubbler extends ExternalInteractorBase {
173
173
  return;
174
174
  }
175
175
  const bubbleColor = itemFromSingleOrMultiple(modeColor);
176
- particle.bubble.finalColor = rangeColorToHsl(this._pluginManager, bubbleColor);
176
+ particle.bubble.finalColor = rangeColorToHsl(this.#pluginManager, bubbleColor);
177
177
  }
178
178
  if (!particle.bubble.finalColor) {
179
179
  return;
@@ -189,27 +189,27 @@ export class Bubbler extends ExternalInteractorBase {
189
189
  particle.bubble.color = particle.bubble.finalColor;
190
190
  }
191
191
  };
192
- _hoverBubbleOpacity = (particle, ratio, divBubble) => {
192
+ #hoverBubbleOpacity = (particle, ratio, divBubble) => {
193
193
  const container = this.container, options = container.actualOptions, modeOpacity = divBubble?.opacity ?? options.interactivity?.modes.bubble?.opacity;
194
194
  if (!modeOpacity) {
195
195
  return;
196
196
  }
197
- const optOpacity = particle.options.opacity.value, pOpacity = particle.opacity?.value ?? defaultOpacity, opacity = calculateBubbleValue(pOpacity, modeOpacity, getRangeMax(optOpacity), ratio);
197
+ const pOpacity = particle.opacity?.value ?? defaultOpacity, opacity = calculateBubbleValue(pOpacity, modeOpacity, particle.opacity?.max ?? defaultOpacity, ratio);
198
198
  if (opacity !== undefined) {
199
199
  particle.bubble.opacity = opacity;
200
200
  }
201
201
  };
202
- _hoverBubbleSize = (particle, ratio, divBubble) => {
202
+ #hoverBubbleSize = (particle, ratio, divBubble) => {
203
203
  const container = this.container, modeSize = divBubble?.size ? divBubble.size * container.retina.pixelRatio : container.retina.bubbleModeSize;
204
204
  if (modeSize === undefined) {
205
205
  return;
206
206
  }
207
- const optSize = getRangeMax(particle.options.size.value) * container.retina.pixelRatio, pSize = particle.size.value, size = calculateBubbleValue(pSize, modeSize, optSize, ratio);
207
+ const pSize = particle.size.value, size = calculateBubbleValue(pSize, modeSize, particle.size.max, ratio);
208
208
  if (size !== undefined) {
209
209
  particle.bubble.radius = size;
210
210
  }
211
211
  };
212
- _process = (particle, distMouse, timeSpent, data) => {
212
+ #process = (particle, distMouse, timeSpent, data) => {
213
213
  const container = this.container, bubbleParam = data.bubbleObj.optValue, options = container.actualOptions, bubbleOptions = options.interactivity?.modes.bubble;
214
214
  if (!bubbleOptions || bubbleParam === undefined) {
215
215
  return;
@@ -252,7 +252,7 @@ export class Bubbler extends ExternalInteractorBase {
252
252
  }
253
253
  }
254
254
  };
255
- _singleSelectorHover = (interactivityData, delta, selector, div) => {
255
+ #singleSelectorHover = (interactivityData, delta, selector, div) => {
256
256
  const container = this.container, selectors = safeDocument().querySelectorAll(selector), bubble = container.actualOptions.interactivity?.modes.bubble;
257
257
  if (!bubble || !selectors.length) {
258
258
  return;
@@ -274,9 +274,9 @@ export class Bubbler extends ExternalInteractorBase {
274
274
  this.clear(particle, delta, true);
275
275
  particle.bubble.div = elem;
276
276
  }
277
- this._hoverBubbleSize(particle, defaultRatio, divBubble);
278
- this._hoverBubbleOpacity(particle, defaultRatio, divBubble);
279
- this._hoverBubbleColor(particle, defaultRatio, divBubble);
277
+ this.#hoverBubbleSize(particle, defaultRatio, divBubble);
278
+ this.#hoverBubbleOpacity(particle, defaultRatio, divBubble);
279
+ this.#hoverBubbleColor(particle, defaultRatio, divBubble);
280
280
  }
281
281
  });
282
282
  };
package/cjs/index.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { ensureInteractivityPluginLoaded } from "@tsparticles/plugin-interactivity";
2
2
  import { Bubbler } from "./Bubbler.js";
3
3
  export async function loadExternalBubbleInteraction(engine) {
4
- engine.checkVersion("4.0.5");
4
+ engine.checkVersion("4.1.0");
5
5
  await engine.pluginManager.register((e) => {
6
6
  ensureInteractivityPluginLoaded(e);
7
7
  e.pluginManager.addInteractor?.("externalBubble", container => {
package/cjs/index.lazy.js CHANGED
@@ -1,5 +1,5 @@
1
1
  export async function loadExternalBubbleInteraction(engine) {
2
- engine.checkVersion("4.0.5");
2
+ engine.checkVersion("4.1.0");
3
3
  await engine.pluginManager.register(async (e) => {
4
4
  const { ensureInteractivityPluginLoaded } = await import("@tsparticles/plugin-interactivity/lazy");
5
5
  ensureInteractivityPluginLoaded(e);
package/esm/Bubbler.js CHANGED
@@ -1,4 +1,4 @@
1
- import { Circle, Rectangle, colorMix, double, getDistance, getRangeMax, half, isInArray, itemFromSingleOrMultiple, millisecondsToSeconds, rangeColorToHsl, rgbToHsl, safeDocument, } from "@tsparticles/engine";
1
+ import { Circle, Rectangle, colorMix, double, getDistance, half, isInArray, itemFromSingleOrMultiple, millisecondsToSeconds, rangeColorToHsl, rgbToHsl, safeDocument, } from "@tsparticles/engine";
2
2
  import { DivType, ExternalInteractorBase, divMode, divModeExecute, isDivModeEnabled, mouseLeaveEvent, mouseMoveEvent, } from "@tsparticles/plugin-interactivity";
3
3
  import { Bubble } from "./Options/Classes/Bubble.js";
4
4
  import { ProcessBubbleType } from "./Enums.js";
@@ -6,12 +6,12 @@ import { calculateBubbleValue } from "./Utils.js";
6
6
  const bubbleMode = "bubble", minDistance = 0, defaultClickTime = 0, defaultOpacity = 1, ratioOffset = 1, defaultBubbleValue = 0, minRatio = 0, defaultRatio = 1;
7
7
  export class Bubbler extends ExternalInteractorBase {
8
8
  handleClickMode;
9
- _maxDistance;
10
- _pluginManager;
9
+ #maxDistance;
10
+ #pluginManager;
11
11
  constructor(pluginManager, container) {
12
12
  super(container);
13
- this._pluginManager = pluginManager;
14
- this._maxDistance = 0;
13
+ this.#pluginManager = pluginManager;
14
+ this.#maxDistance = 0;
15
15
  container.bubble ??= {};
16
16
  this.handleClickMode = (mode) => {
17
17
  if (mode !== bubbleMode) {
@@ -22,7 +22,7 @@ export class Bubbler extends ExternalInteractorBase {
22
22
  };
23
23
  }
24
24
  get maxDistance() {
25
- return this._maxDistance;
25
+ return this.#maxDistance;
26
26
  }
27
27
  clear(particle, _delta, force) {
28
28
  if (particle.bubble.inRange && !force) {
@@ -38,7 +38,7 @@ export class Bubbler extends ExternalInteractorBase {
38
38
  if (!bubble) {
39
39
  return;
40
40
  }
41
- this._maxDistance = bubble.distance;
41
+ this.#maxDistance = bubble.distance;
42
42
  container.retina.bubbleModeDistance = bubble.distance * container.retina.pixelRatio;
43
43
  if (bubble.size !== undefined) {
44
44
  container.retina.bubbleModeSize = bubble.size * container.retina.pixelRatio;
@@ -51,14 +51,14 @@ export class Bubbler extends ExternalInteractorBase {
51
51
  }
52
52
  const onHover = events.onHover, onClick = events.onClick, hoverEnabled = onHover.enable, hoverMode = onHover.mode, clickEnabled = onClick.enable, clickMode = onClick.mode, divs = events.onDiv;
53
53
  if (hoverEnabled && isInArray(bubbleMode, hoverMode)) {
54
- this._hoverBubble(interactivityData);
54
+ this.#hoverBubble(interactivityData);
55
55
  }
56
56
  else if (clickEnabled && isInArray(bubbleMode, clickMode)) {
57
- this._clickBubble(interactivityData);
57
+ this.#clickBubble(interactivityData);
58
58
  }
59
59
  else {
60
60
  divModeExecute(bubbleMode, divs, (selector, div) => {
61
- this._singleSelectorHover(interactivityData, delta, selector, div);
61
+ this.#singleSelectorHover(interactivityData, delta, selector, div);
62
62
  });
63
63
  }
64
64
  }
@@ -82,7 +82,7 @@ export class Bubbler extends ExternalInteractorBase {
82
82
  reset(_interactivityData, particle) {
83
83
  particle.bubble.inRange = false;
84
84
  }
85
- _clickBubble = interactivityData => {
85
+ #clickBubble = interactivityData => {
86
86
  const container = this.container, options = container.actualOptions, mouseClickPos = interactivityData.mouse.clickPosition, bubbleOptions = options.interactivity?.modes.bubble;
87
87
  if (!bubbleOptions || !mouseClickPos) {
88
88
  return;
@@ -112,33 +112,33 @@ export class Bubbler extends ExternalInteractorBase {
112
112
  value: particle.bubble.radius,
113
113
  },
114
114
  particlesObj: {
115
- optValue: getRangeMax(particle.options.size.value) * container.retina.pixelRatio,
115
+ optValue: particle.size.max,
116
116
  value: particle.size.value,
117
117
  },
118
118
  type: ProcessBubbleType.size,
119
119
  };
120
- this._process(particle, distMouse, timeSpent, sizeData);
120
+ this.#process(particle, distMouse, timeSpent, sizeData);
121
121
  const opacityData = {
122
122
  bubbleObj: {
123
123
  optValue: bubbleOptions.opacity,
124
124
  value: particle.bubble.opacity,
125
125
  },
126
126
  particlesObj: {
127
- optValue: getRangeMax(particle.options.opacity.value),
127
+ optValue: particle.opacity?.max ?? defaultOpacity,
128
128
  value: particle.opacity?.value ?? defaultOpacity,
129
129
  },
130
130
  type: ProcessBubbleType.opacity,
131
131
  };
132
- this._process(particle, distMouse, timeSpent, opacityData);
132
+ this.#process(particle, distMouse, timeSpent, opacityData);
133
133
  if (!bubble.durationEnd && distMouse <= distance) {
134
- this._hoverBubbleColor(particle, distMouse);
134
+ this.#hoverBubbleColor(particle, distMouse);
135
135
  }
136
136
  else {
137
137
  delete particle.bubble.color;
138
138
  }
139
139
  }
140
140
  };
141
- _hoverBubble = interactivityData => {
141
+ #hoverBubble = interactivityData => {
142
142
  const container = this.container, mousePos = interactivityData.mouse.position, distance = container.retina.bubbleModeDistance;
143
143
  if (!distance || distance < minDistance || !mousePos) {
144
144
  return;
@@ -149,9 +149,9 @@ export class Bubbler extends ExternalInteractorBase {
149
149
  const pos = particle.getPosition(), pointDistance = getDistance(pos, mousePos), ratio = ratioOffset - pointDistance / distance;
150
150
  if (pointDistance <= distance) {
151
151
  if (ratio >= minRatio && interactivityData.status === mouseMoveEvent) {
152
- this._hoverBubbleSize(particle, ratio);
153
- this._hoverBubbleOpacity(particle, ratio);
154
- this._hoverBubbleColor(particle, ratio);
152
+ this.#hoverBubbleSize(particle, ratio);
153
+ this.#hoverBubbleOpacity(particle, ratio);
154
+ this.#hoverBubbleColor(particle, ratio);
155
155
  }
156
156
  }
157
157
  else {
@@ -162,7 +162,7 @@ export class Bubbler extends ExternalInteractorBase {
162
162
  }
163
163
  }
164
164
  };
165
- _hoverBubbleColor = (particle, ratio, divBubble) => {
165
+ #hoverBubbleColor = (particle, ratio, divBubble) => {
166
166
  const options = this.container.actualOptions, bubbleOptions = divBubble ?? options.interactivity?.modes.bubble;
167
167
  if (!bubbleOptions) {
168
168
  return;
@@ -173,7 +173,7 @@ export class Bubbler extends ExternalInteractorBase {
173
173
  return;
174
174
  }
175
175
  const bubbleColor = itemFromSingleOrMultiple(modeColor);
176
- particle.bubble.finalColor = rangeColorToHsl(this._pluginManager, bubbleColor);
176
+ particle.bubble.finalColor = rangeColorToHsl(this.#pluginManager, bubbleColor);
177
177
  }
178
178
  if (!particle.bubble.finalColor) {
179
179
  return;
@@ -189,27 +189,27 @@ export class Bubbler extends ExternalInteractorBase {
189
189
  particle.bubble.color = particle.bubble.finalColor;
190
190
  }
191
191
  };
192
- _hoverBubbleOpacity = (particle, ratio, divBubble) => {
192
+ #hoverBubbleOpacity = (particle, ratio, divBubble) => {
193
193
  const container = this.container, options = container.actualOptions, modeOpacity = divBubble?.opacity ?? options.interactivity?.modes.bubble?.opacity;
194
194
  if (!modeOpacity) {
195
195
  return;
196
196
  }
197
- const optOpacity = particle.options.opacity.value, pOpacity = particle.opacity?.value ?? defaultOpacity, opacity = calculateBubbleValue(pOpacity, modeOpacity, getRangeMax(optOpacity), ratio);
197
+ const pOpacity = particle.opacity?.value ?? defaultOpacity, opacity = calculateBubbleValue(pOpacity, modeOpacity, particle.opacity?.max ?? defaultOpacity, ratio);
198
198
  if (opacity !== undefined) {
199
199
  particle.bubble.opacity = opacity;
200
200
  }
201
201
  };
202
- _hoverBubbleSize = (particle, ratio, divBubble) => {
202
+ #hoverBubbleSize = (particle, ratio, divBubble) => {
203
203
  const container = this.container, modeSize = divBubble?.size ? divBubble.size * container.retina.pixelRatio : container.retina.bubbleModeSize;
204
204
  if (modeSize === undefined) {
205
205
  return;
206
206
  }
207
- const optSize = getRangeMax(particle.options.size.value) * container.retina.pixelRatio, pSize = particle.size.value, size = calculateBubbleValue(pSize, modeSize, optSize, ratio);
207
+ const pSize = particle.size.value, size = calculateBubbleValue(pSize, modeSize, particle.size.max, ratio);
208
208
  if (size !== undefined) {
209
209
  particle.bubble.radius = size;
210
210
  }
211
211
  };
212
- _process = (particle, distMouse, timeSpent, data) => {
212
+ #process = (particle, distMouse, timeSpent, data) => {
213
213
  const container = this.container, bubbleParam = data.bubbleObj.optValue, options = container.actualOptions, bubbleOptions = options.interactivity?.modes.bubble;
214
214
  if (!bubbleOptions || bubbleParam === undefined) {
215
215
  return;
@@ -252,7 +252,7 @@ export class Bubbler extends ExternalInteractorBase {
252
252
  }
253
253
  }
254
254
  };
255
- _singleSelectorHover = (interactivityData, delta, selector, div) => {
255
+ #singleSelectorHover = (interactivityData, delta, selector, div) => {
256
256
  const container = this.container, selectors = safeDocument().querySelectorAll(selector), bubble = container.actualOptions.interactivity?.modes.bubble;
257
257
  if (!bubble || !selectors.length) {
258
258
  return;
@@ -274,9 +274,9 @@ export class Bubbler extends ExternalInteractorBase {
274
274
  this.clear(particle, delta, true);
275
275
  particle.bubble.div = elem;
276
276
  }
277
- this._hoverBubbleSize(particle, defaultRatio, divBubble);
278
- this._hoverBubbleOpacity(particle, defaultRatio, divBubble);
279
- this._hoverBubbleColor(particle, defaultRatio, divBubble);
277
+ this.#hoverBubbleSize(particle, defaultRatio, divBubble);
278
+ this.#hoverBubbleOpacity(particle, defaultRatio, divBubble);
279
+ this.#hoverBubbleColor(particle, defaultRatio, divBubble);
280
280
  }
281
281
  });
282
282
  };
package/esm/index.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { ensureInteractivityPluginLoaded } from "@tsparticles/plugin-interactivity";
2
2
  import { Bubbler } from "./Bubbler.js";
3
3
  export async function loadExternalBubbleInteraction(engine) {
4
- engine.checkVersion("4.0.5");
4
+ engine.checkVersion("4.1.0");
5
5
  await engine.pluginManager.register((e) => {
6
6
  ensureInteractivityPluginLoaded(e);
7
7
  e.pluginManager.addInteractor?.("externalBubble", container => {
package/esm/index.lazy.js CHANGED
@@ -1,5 +1,5 @@
1
1
  export async function loadExternalBubbleInteraction(engine) {
2
- engine.checkVersion("4.0.5");
2
+ engine.checkVersion("4.1.0");
3
3
  await engine.pluginManager.register(async (e) => {
4
4
  const { ensureInteractivityPluginLoaded } = await import("@tsparticles/plugin-interactivity/lazy");
5
5
  ensureInteractivityPluginLoaded(e);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tsparticles/interaction-external-bubble",
3
- "version": "4.0.5",
3
+ "version": "4.1.0",
4
4
  "description": "tsParticles bubble external interaction",
5
5
  "homepage": "https://particles.js.org",
6
6
  "repository": {
@@ -97,7 +97,7 @@
97
97
  },
98
98
  "type": "module",
99
99
  "peerDependencies": {
100
- "@tsparticles/engine": "4.0.5",
101
- "@tsparticles/plugin-interactivity": "4.0.5"
100
+ "@tsparticles/engine": "4.1.0",
101
+ "@tsparticles/plugin-interactivity": "4.1.0"
102
102
  }
103
103
  }
package/report.html CHANGED
@@ -4930,7 +4930,7 @@ var drawChart = (function (exports) {
4930
4930
  </script>
4931
4931
  <script>
4932
4932
  /*<!--*/
4933
- const data = {"version":2,"tree":{"name":"root","children":[{"name":"tsparticles.interaction.external.bubble.js","children":[{"name":"dist/browser","children":[{"name":"Options/Classes","children":[{"uid":"b3619836-1","name":"BubbleBase.js"},{"uid":"b3619836-3","name":"BubbleDiv.js"},{"uid":"b3619836-5","name":"Bubble.js"}]},{"uid":"b3619836-7","name":"Enums.js"},{"uid":"b3619836-9","name":"Utils.js"},{"uid":"b3619836-11","name":"Bubbler.js"},{"uid":"b3619836-13","name":"index.js"},{"uid":"b3619836-15","name":"browser.js"}]}]}],"isRoot":true},"nodeParts":{"b3619836-1":{"renderedLength":1198,"gzipLength":0,"brotliLength":0,"metaUid":"b3619836-0"},"b3619836-3":{"renderedLength":402,"gzipLength":0,"brotliLength":0,"metaUid":"b3619836-2"},"b3619836-5":{"renderedLength":392,"gzipLength":0,"brotliLength":0,"metaUid":"b3619836-4"},"b3619836-7":{"renderedLength":257,"gzipLength":0,"brotliLength":0,"metaUid":"b3619836-6"},"b3619836-9":{"renderedLength":508,"gzipLength":0,"brotliLength":0,"metaUid":"b3619836-8"},"b3619836-11":{"renderedLength":14247,"gzipLength":0,"brotliLength":0,"metaUid":"b3619836-10"},"b3619836-13":{"renderedLength":409,"gzipLength":0,"brotliLength":0,"metaUid":"b3619836-12"},"b3619836-15":{"renderedLength":201,"gzipLength":0,"brotliLength":0,"metaUid":"b3619836-14"}},"nodeMetas":{"b3619836-0":{"id":"/dist/browser/Options/Classes/BubbleBase.js","moduleParts":{"tsparticles.interaction.external.bubble.js":"b3619836-1"},"imported":[{"uid":"b3619836-17"}],"importedBy":[{"uid":"b3619836-12"},{"uid":"b3619836-2"},{"uid":"b3619836-4"}]},"b3619836-2":{"id":"/dist/browser/Options/Classes/BubbleDiv.js","moduleParts":{"tsparticles.interaction.external.bubble.js":"b3619836-3"},"imported":[{"uid":"b3619836-17"},{"uid":"b3619836-0"}],"importedBy":[{"uid":"b3619836-12"},{"uid":"b3619836-4"}]},"b3619836-4":{"id":"/dist/browser/Options/Classes/Bubble.js","moduleParts":{"tsparticles.interaction.external.bubble.js":"b3619836-5"},"imported":[{"uid":"b3619836-17"},{"uid":"b3619836-0"},{"uid":"b3619836-2"}],"importedBy":[{"uid":"b3619836-12"},{"uid":"b3619836-10"}]},"b3619836-6":{"id":"/dist/browser/Enums.js","moduleParts":{"tsparticles.interaction.external.bubble.js":"b3619836-7"},"imported":[],"importedBy":[{"uid":"b3619836-10"}]},"b3619836-8":{"id":"/dist/browser/Utils.js","moduleParts":{"tsparticles.interaction.external.bubble.js":"b3619836-9"},"imported":[{"uid":"b3619836-17"}],"importedBy":[{"uid":"b3619836-10"}]},"b3619836-10":{"id":"/dist/browser/Bubbler.js","moduleParts":{"tsparticles.interaction.external.bubble.js":"b3619836-11"},"imported":[{"uid":"b3619836-17"},{"uid":"b3619836-16"},{"uid":"b3619836-4"},{"uid":"b3619836-6"},{"uid":"b3619836-8"}],"importedBy":[{"uid":"b3619836-12"}]},"b3619836-12":{"id":"/dist/browser/index.js","moduleParts":{"tsparticles.interaction.external.bubble.js":"b3619836-13"},"imported":[{"uid":"b3619836-16"},{"uid":"b3619836-10"},{"uid":"b3619836-0"},{"uid":"b3619836-2"},{"uid":"b3619836-4"}],"importedBy":[{"uid":"b3619836-14"}]},"b3619836-14":{"id":"/dist/browser/browser.js","moduleParts":{"tsparticles.interaction.external.bubble.js":"b3619836-15"},"imported":[{"uid":"b3619836-12"}],"importedBy":[],"isEntry":true},"b3619836-16":{"id":"@tsparticles/plugin-interactivity","moduleParts":{},"imported":[],"importedBy":[{"uid":"b3619836-12"},{"uid":"b3619836-10"}],"isExternal":true},"b3619836-17":{"id":"@tsparticles/engine","moduleParts":{},"imported":[],"importedBy":[{"uid":"b3619836-10"},{"uid":"b3619836-0"},{"uid":"b3619836-2"},{"uid":"b3619836-4"},{"uid":"b3619836-8"}],"isExternal":true}},"env":{"rollup":"4.60.4"},"options":{"gzip":false,"brotli":false,"sourcemap":false}};
4933
+ const data = {"version":2,"tree":{"name":"root","children":[{"name":"tsparticles.interaction.external.bubble.js","children":[{"name":"dist/browser","children":[{"name":"Options/Classes","children":[{"uid":"8046929f-1","name":"BubbleBase.js"},{"uid":"8046929f-3","name":"BubbleDiv.js"},{"uid":"8046929f-5","name":"Bubble.js"}]},{"uid":"8046929f-7","name":"Enums.js"},{"uid":"8046929f-9","name":"Utils.js"},{"uid":"8046929f-11","name":"Bubbler.js"},{"uid":"8046929f-13","name":"index.js"},{"uid":"8046929f-15","name":"browser.js"}]}]}],"isRoot":true},"nodeParts":{"8046929f-1":{"renderedLength":1198,"gzipLength":0,"brotliLength":0,"metaUid":"8046929f-0"},"8046929f-3":{"renderedLength":402,"gzipLength":0,"brotliLength":0,"metaUid":"8046929f-2"},"8046929f-5":{"renderedLength":392,"gzipLength":0,"brotliLength":0,"metaUid":"8046929f-4"},"8046929f-7":{"renderedLength":257,"gzipLength":0,"brotliLength":0,"metaUid":"8046929f-6"},"8046929f-9":{"renderedLength":508,"gzipLength":0,"brotliLength":0,"metaUid":"8046929f-8"},"8046929f-11":{"renderedLength":14061,"gzipLength":0,"brotliLength":0,"metaUid":"8046929f-10"},"8046929f-13":{"renderedLength":409,"gzipLength":0,"brotliLength":0,"metaUid":"8046929f-12"},"8046929f-15":{"renderedLength":201,"gzipLength":0,"brotliLength":0,"metaUid":"8046929f-14"}},"nodeMetas":{"8046929f-0":{"id":"/dist/browser/Options/Classes/BubbleBase.js","moduleParts":{"tsparticles.interaction.external.bubble.js":"8046929f-1"},"imported":[{"uid":"8046929f-17"}],"importedBy":[{"uid":"8046929f-12"},{"uid":"8046929f-2"},{"uid":"8046929f-4"}]},"8046929f-2":{"id":"/dist/browser/Options/Classes/BubbleDiv.js","moduleParts":{"tsparticles.interaction.external.bubble.js":"8046929f-3"},"imported":[{"uid":"8046929f-17"},{"uid":"8046929f-0"}],"importedBy":[{"uid":"8046929f-12"},{"uid":"8046929f-4"}]},"8046929f-4":{"id":"/dist/browser/Options/Classes/Bubble.js","moduleParts":{"tsparticles.interaction.external.bubble.js":"8046929f-5"},"imported":[{"uid":"8046929f-17"},{"uid":"8046929f-0"},{"uid":"8046929f-2"}],"importedBy":[{"uid":"8046929f-12"},{"uid":"8046929f-10"}]},"8046929f-6":{"id":"/dist/browser/Enums.js","moduleParts":{"tsparticles.interaction.external.bubble.js":"8046929f-7"},"imported":[],"importedBy":[{"uid":"8046929f-10"}]},"8046929f-8":{"id":"/dist/browser/Utils.js","moduleParts":{"tsparticles.interaction.external.bubble.js":"8046929f-9"},"imported":[{"uid":"8046929f-17"}],"importedBy":[{"uid":"8046929f-10"}]},"8046929f-10":{"id":"/dist/browser/Bubbler.js","moduleParts":{"tsparticles.interaction.external.bubble.js":"8046929f-11"},"imported":[{"uid":"8046929f-17"},{"uid":"8046929f-16"},{"uid":"8046929f-4"},{"uid":"8046929f-6"},{"uid":"8046929f-8"}],"importedBy":[{"uid":"8046929f-12"}]},"8046929f-12":{"id":"/dist/browser/index.js","moduleParts":{"tsparticles.interaction.external.bubble.js":"8046929f-13"},"imported":[{"uid":"8046929f-16"},{"uid":"8046929f-10"},{"uid":"8046929f-0"},{"uid":"8046929f-2"},{"uid":"8046929f-4"}],"importedBy":[{"uid":"8046929f-14"}]},"8046929f-14":{"id":"/dist/browser/browser.js","moduleParts":{"tsparticles.interaction.external.bubble.js":"8046929f-15"},"imported":[{"uid":"8046929f-12"}],"importedBy":[],"isEntry":true},"8046929f-16":{"id":"@tsparticles/plugin-interactivity","moduleParts":{},"imported":[],"importedBy":[{"uid":"8046929f-12"},{"uid":"8046929f-10"}],"isExternal":true},"8046929f-17":{"id":"@tsparticles/engine","moduleParts":{},"imported":[],"importedBy":[{"uid":"8046929f-10"},{"uid":"8046929f-0"},{"uid":"8046929f-2"},{"uid":"8046929f-4"},{"uid":"8046929f-8"}],"isExternal":true}},"env":{"rollup":"4.60.4"},"options":{"gzip":false,"brotli":false,"sourcemap":false}};
4934
4934
 
4935
4935
  const run = () => {
4936
4936
  const width = window.innerWidth;
package/tsparticles.interaction.external.bubble.js CHANGED
@@ -1,5 +1,5 @@
1
1
  (function(g){g.__tsParticlesInternals=g.__tsParticlesInternals||{};g.__tsParticlesInternals.bundles=g.__tsParticlesInternals.bundles||{};g.__tsParticlesInternals.effects=g.__tsParticlesInternals.effects||{};g.__tsParticlesInternals.engine=g.__tsParticlesInternals.engine||{};g.__tsParticlesInternals.interactions=g.__tsParticlesInternals.interactions||{};g.__tsParticlesInternals.palettes=g.__tsParticlesInternals.palettes||{};g.__tsParticlesInternals.paths=g.__tsParticlesInternals.paths||{};g.__tsParticlesInternals.plugins=g.__tsParticlesInternals.plugins||{};g.__tsParticlesInternals.plugins=g.__tsParticlesInternals.plugins||{};g.__tsParticlesInternals.plugins.emittersShapes=g.__tsParticlesInternals.plugins.emittersShapes||{};g.__tsParticlesInternals.presets=g.__tsParticlesInternals.presets||{};g.__tsParticlesInternals.shapes=g.__tsParticlesInternals.shapes||{};g.__tsParticlesInternals.updaters=g.__tsParticlesInternals.updaters||{};g.__tsParticlesInternals.utils=g.__tsParticlesInternals.utils||{};g.__tsParticlesInternals.canvas=g.__tsParticlesInternals.canvas||{};g.__tsParticlesInternals.canvas=g.__tsParticlesInternals.canvas||{};g.__tsParticlesInternals.canvas.utils=g.__tsParticlesInternals.canvas.utils||{};g.__tsParticlesInternals.path=g.__tsParticlesInternals.path||{};g.__tsParticlesInternals.path=g.__tsParticlesInternals.path||{};g.__tsParticlesInternals.path.utils=g.__tsParticlesInternals.path.utils||{};var __tsProxyFactory=typeof Proxy!=="undefined"?function(obj){return new Proxy(obj,{get:function(target,key){if(!(key in target)){target[key]={};}return target[key];}});}:function(obj){return obj;};g.__tsParticlesInternals.bundles=__tsProxyFactory(g.__tsParticlesInternals.bundles);g.__tsParticlesInternals.effects=__tsProxyFactory(g.__tsParticlesInternals.effects);g.__tsParticlesInternals.interactions=__tsProxyFactory(g.__tsParticlesInternals.interactions);g.__tsParticlesInternals.palettes=__tsProxyFactory(g.__tsParticlesInternals.palettes);g.__tsParticlesInternals.paths=__tsProxyFactory(g.__tsParticlesInternals.paths);g.__tsParticlesInternals.plugins=__tsProxyFactory(g.__tsParticlesInternals.plugins);g.__tsParticlesInternals.plugins.emittersShapes=__tsProxyFactory(g.__tsParticlesInternals.plugins.emittersShapes);g.__tsParticlesInternals.presets=__tsProxyFactory(g.__tsParticlesInternals.presets);g.__tsParticlesInternals.shapes=__tsProxyFactory(g.__tsParticlesInternals.shapes);g.__tsParticlesInternals.updaters=__tsProxyFactory(g.__tsParticlesInternals.updaters);g.__tsParticlesInternals.utils=__tsProxyFactory(g.__tsParticlesInternals.utils);g.__tsParticlesInternals.canvas=__tsProxyFactory(g.__tsParticlesInternals.canvas);g.__tsParticlesInternals.path=__tsProxyFactory(g.__tsParticlesInternals.path);g.tsparticlesInternalExports=g.tsparticlesInternalExports||{};})(typeof globalThis!=="undefined"?globalThis:typeof window!=="undefined"?window:this);
2
- /* External Interaction v4.0.5 */
2
+ /* External Interaction v4.1.0 */
3
3
  (function (global, factory) {
4
4
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@tsparticles/plugin-interactivity'), require('@tsparticles/engine')) :
5
5
  typeof define === 'function' && define.amd ? define(['exports', '@tsparticles/plugin-interactivity', '@tsparticles/engine'], factory) :
@@ -100,12 +100,12 @@
100
100
  const bubbleMode = "bubble", minDistance = 0, defaultClickTime = 0, defaultOpacity = 1, ratioOffset = 1, defaultBubbleValue = 0, minRatio = 0, defaultRatio = 1;
101
101
  class Bubbler extends pluginInteractivity.ExternalInteractorBase {
102
102
  handleClickMode;
103
- _maxDistance;
104
- _pluginManager;
103
+ #maxDistance;
104
+ #pluginManager;
105
105
  constructor(pluginManager, container) {
106
106
  super(container);
107
- this._pluginManager = pluginManager;
108
- this._maxDistance = 0;
107
+ this.#pluginManager = pluginManager;
108
+ this.#maxDistance = 0;
109
109
  container.bubble ??= {};
110
110
  this.handleClickMode = (mode) => {
111
111
  if (mode !== bubbleMode) {
@@ -116,7 +116,7 @@
116
116
  };
117
117
  }
118
118
  get maxDistance() {
119
- return this._maxDistance;
119
+ return this.#maxDistance;
120
120
  }
121
121
  clear(particle, _delta, force) {
122
122
  if (particle.bubble.inRange && !force) {
@@ -132,7 +132,7 @@
132
132
  if (!bubble) {
133
133
  return;
134
134
  }
135
- this._maxDistance = bubble.distance;
135
+ this.#maxDistance = bubble.distance;
136
136
  container.retina.bubbleModeDistance = bubble.distance * container.retina.pixelRatio;
137
137
  if (bubble.size !== undefined) {
138
138
  container.retina.bubbleModeSize = bubble.size * container.retina.pixelRatio;
@@ -145,14 +145,14 @@
145
145
  }
146
146
  const onHover = events.onHover, onClick = events.onClick, hoverEnabled = onHover.enable, hoverMode = onHover.mode, clickEnabled = onClick.enable, clickMode = onClick.mode, divs = events.onDiv;
147
147
  if (hoverEnabled && engine.isInArray(bubbleMode, hoverMode)) {
148
- this._hoverBubble(interactivityData);
148
+ this.#hoverBubble(interactivityData);
149
149
  }
150
150
  else if (clickEnabled && engine.isInArray(bubbleMode, clickMode)) {
151
- this._clickBubble(interactivityData);
151
+ this.#clickBubble(interactivityData);
152
152
  }
153
153
  else {
154
154
  pluginInteractivity.divModeExecute(bubbleMode, divs, (selector, div) => {
155
- this._singleSelectorHover(interactivityData, delta, selector, div);
155
+ this.#singleSelectorHover(interactivityData, delta, selector, div);
156
156
  });
157
157
  }
158
158
  }
@@ -176,7 +176,7 @@
176
176
  reset(_interactivityData, particle) {
177
177
  particle.bubble.inRange = false;
178
178
  }
179
- _clickBubble = interactivityData => {
179
+ #clickBubble = interactivityData => {
180
180
  const container = this.container, options = container.actualOptions, mouseClickPos = interactivityData.mouse.clickPosition, bubbleOptions = options.interactivity?.modes.bubble;
181
181
  if (!bubbleOptions || !mouseClickPos) {
182
182
  return;
@@ -206,33 +206,33 @@
206
206
  value: particle.bubble.radius,
207
207
  },
208
208
  particlesObj: {
209
- optValue: engine.getRangeMax(particle.options.size.value) * container.retina.pixelRatio,
209
+ optValue: particle.size.max,
210
210
  value: particle.size.value,
211
211
  },
212
212
  type: ProcessBubbleType.size,
213
213
  };
214
- this._process(particle, distMouse, timeSpent, sizeData);
214
+ this.#process(particle, distMouse, timeSpent, sizeData);
215
215
  const opacityData = {
216
216
  bubbleObj: {
217
217
  optValue: bubbleOptions.opacity,
218
218
  value: particle.bubble.opacity,
219
219
  },
220
220
  particlesObj: {
221
- optValue: engine.getRangeMax(particle.options.opacity.value),
221
+ optValue: particle.opacity?.max ?? defaultOpacity,
222
222
  value: particle.opacity?.value ?? defaultOpacity,
223
223
  },
224
224
  type: ProcessBubbleType.opacity,
225
225
  };
226
- this._process(particle, distMouse, timeSpent, opacityData);
226
+ this.#process(particle, distMouse, timeSpent, opacityData);
227
227
  if (!bubble.durationEnd && distMouse <= distance) {
228
- this._hoverBubbleColor(particle, distMouse);
228
+ this.#hoverBubbleColor(particle, distMouse);
229
229
  }
230
230
  else {
231
231
  delete particle.bubble.color;
232
232
  }
233
233
  }
234
234
  };
235
- _hoverBubble = interactivityData => {
235
+ #hoverBubble = interactivityData => {
236
236
  const container = this.container, mousePos = interactivityData.mouse.position, distance = container.retina.bubbleModeDistance;
237
237
  if (!distance || distance < minDistance || !mousePos) {
238
238
  return;
@@ -243,9 +243,9 @@
243
243
  const pos = particle.getPosition(), pointDistance = engine.getDistance(pos, mousePos), ratio = ratioOffset - pointDistance / distance;
244
244
  if (pointDistance <= distance) {
245
245
  if (ratio >= minRatio && interactivityData.status === pluginInteractivity.mouseMoveEvent) {
246
- this._hoverBubbleSize(particle, ratio);
247
- this._hoverBubbleOpacity(particle, ratio);
248
- this._hoverBubbleColor(particle, ratio);
246
+ this.#hoverBubbleSize(particle, ratio);
247
+ this.#hoverBubbleOpacity(particle, ratio);
248
+ this.#hoverBubbleColor(particle, ratio);
249
249
  }
250
250
  }
251
251
  else {
@@ -256,7 +256,7 @@
256
256
  }
257
257
  }
258
258
  };
259
- _hoverBubbleColor = (particle, ratio, divBubble) => {
259
+ #hoverBubbleColor = (particle, ratio, divBubble) => {
260
260
  const options = this.container.actualOptions, bubbleOptions = divBubble ?? options.interactivity?.modes.bubble;
261
261
  if (!bubbleOptions) {
262
262
  return;
@@ -267,7 +267,7 @@
267
267
  return;
268
268
  }
269
269
  const bubbleColor = engine.itemFromSingleOrMultiple(modeColor);
270
- particle.bubble.finalColor = engine.rangeColorToHsl(this._pluginManager, bubbleColor);
270
+ particle.bubble.finalColor = engine.rangeColorToHsl(this.#pluginManager, bubbleColor);
271
271
  }
272
272
  if (!particle.bubble.finalColor) {
273
273
  return;
@@ -283,27 +283,27 @@
283
283
  particle.bubble.color = particle.bubble.finalColor;
284
284
  }
285
285
  };
286
- _hoverBubbleOpacity = (particle, ratio, divBubble) => {
286
+ #hoverBubbleOpacity = (particle, ratio, divBubble) => {
287
287
  const container = this.container, options = container.actualOptions, modeOpacity = divBubble?.opacity ?? options.interactivity?.modes.bubble?.opacity;
288
288
  if (!modeOpacity) {
289
289
  return;
290
290
  }
291
- const optOpacity = particle.options.opacity.value, pOpacity = particle.opacity?.value ?? defaultOpacity, opacity = calculateBubbleValue(pOpacity, modeOpacity, engine.getRangeMax(optOpacity), ratio);
291
+ const pOpacity = particle.opacity?.value ?? defaultOpacity, opacity = calculateBubbleValue(pOpacity, modeOpacity, particle.opacity?.max ?? defaultOpacity, ratio);
292
292
  if (opacity !== undefined) {
293
293
  particle.bubble.opacity = opacity;
294
294
  }
295
295
  };
296
- _hoverBubbleSize = (particle, ratio, divBubble) => {
296
+ #hoverBubbleSize = (particle, ratio, divBubble) => {
297
297
  const container = this.container, modeSize = divBubble?.size ? divBubble.size * container.retina.pixelRatio : container.retina.bubbleModeSize;
298
298
  if (modeSize === undefined) {
299
299
  return;
300
300
  }
301
- const optSize = engine.getRangeMax(particle.options.size.value) * container.retina.pixelRatio, pSize = particle.size.value, size = calculateBubbleValue(pSize, modeSize, optSize, ratio);
301
+ const pSize = particle.size.value, size = calculateBubbleValue(pSize, modeSize, particle.size.max, ratio);
302
302
  if (size !== undefined) {
303
303
  particle.bubble.radius = size;
304
304
  }
305
305
  };
306
- _process = (particle, distMouse, timeSpent, data) => {
306
+ #process = (particle, distMouse, timeSpent, data) => {
307
307
  const container = this.container, bubbleParam = data.bubbleObj.optValue, options = container.actualOptions, bubbleOptions = options.interactivity?.modes.bubble;
308
308
  if (!bubbleOptions || bubbleParam === undefined) {
309
309
  return;
@@ -346,7 +346,7 @@
346
346
  }
347
347
  }
348
348
  };
349
- _singleSelectorHover = (interactivityData, delta, selector, div) => {
349
+ #singleSelectorHover = (interactivityData, delta, selector, div) => {
350
350
  const container = this.container, selectors = engine.safeDocument().querySelectorAll(selector), bubble = container.actualOptions.interactivity?.modes.bubble;
351
351
  if (!bubble || !selectors.length) {
352
352
  return;
@@ -368,16 +368,16 @@
368
368
  this.clear(particle, delta, true);
369
369
  particle.bubble.div = elem;
370
370
  }
371
- this._hoverBubbleSize(particle, defaultRatio, divBubble);
372
- this._hoverBubbleOpacity(particle, defaultRatio, divBubble);
373
- this._hoverBubbleColor(particle, defaultRatio, divBubble);
371
+ this.#hoverBubbleSize(particle, defaultRatio, divBubble);
372
+ this.#hoverBubbleOpacity(particle, defaultRatio, divBubble);
373
+ this.#hoverBubbleColor(particle, defaultRatio, divBubble);
374
374
  }
375
375
  });
376
376
  };
377
377
  }
378
378
 
379
379
  async function loadExternalBubbleInteraction(engine) {
380
- engine.checkVersion("4.0.5");
380
+ engine.checkVersion("4.1.0");
381
381
  await engine.pluginManager.register((e) => {
382
382
  pluginInteractivity.ensureInteractivityPluginLoaded(e);
383
383
  e.pluginManager.addInteractor?.("externalBubble", container => {
package/tsparticles.interaction.external.bubble.min.js CHANGED
@@ -1 +1 @@
1
- !function(e){e.__tsParticlesInternals=e.__tsParticlesInternals||{},e.__tsParticlesInternals.bundles=e.__tsParticlesInternals.bundles||{},e.__tsParticlesInternals.effects=e.__tsParticlesInternals.effects||{},e.__tsParticlesInternals.engine=e.__tsParticlesInternals.engine||{},e.__tsParticlesInternals.interactions=e.__tsParticlesInternals.interactions||{},e.__tsParticlesInternals.palettes=e.__tsParticlesInternals.palettes||{},e.__tsParticlesInternals.paths=e.__tsParticlesInternals.paths||{},e.__tsParticlesInternals.plugins=e.__tsParticlesInternals.plugins||{},e.__tsParticlesInternals.plugins=e.__tsParticlesInternals.plugins||{},e.__tsParticlesInternals.plugins.emittersShapes=e.__tsParticlesInternals.plugins.emittersShapes||{},e.__tsParticlesInternals.presets=e.__tsParticlesInternals.presets||{},e.__tsParticlesInternals.shapes=e.__tsParticlesInternals.shapes||{},e.__tsParticlesInternals.updaters=e.__tsParticlesInternals.updaters||{},e.__tsParticlesInternals.utils=e.__tsParticlesInternals.utils||{},e.__tsParticlesInternals.canvas=e.__tsParticlesInternals.canvas||{},e.__tsParticlesInternals.canvas=e.__tsParticlesInternals.canvas||{},e.__tsParticlesInternals.canvas.utils=e.__tsParticlesInternals.canvas.utils||{},e.__tsParticlesInternals.path=e.__tsParticlesInternals.path||{},e.__tsParticlesInternals.path=e.__tsParticlesInternals.path||{},e.__tsParticlesInternals.path.utils=e.__tsParticlesInternals.path.utils||{};var t="undefined"!=typeof Proxy?function(e){return new Proxy(e,{get:function(e,t){return t in e||(e[t]={}),e[t]}})}:function(e){return e};e.__tsParticlesInternals.bundles=t(e.__tsParticlesInternals.bundles),e.__tsParticlesInternals.effects=t(e.__tsParticlesInternals.effects),e.__tsParticlesInternals.interactions=t(e.__tsParticlesInternals.interactions),e.__tsParticlesInternals.palettes=t(e.__tsParticlesInternals.palettes),e.__tsParticlesInternals.paths=t(e.__tsParticlesInternals.paths),e.__tsParticlesInternals.plugins=t(e.__tsParticlesInternals.plugins),e.__tsParticlesInternals.plugins.emittersShapes=t(e.__tsParticlesInternals.plugins.emittersShapes),e.__tsParticlesInternals.presets=t(e.__tsParticlesInternals.presets),e.__tsParticlesInternals.shapes=t(e.__tsParticlesInternals.shapes),e.__tsParticlesInternals.updaters=t(e.__tsParticlesInternals.updaters),e.__tsParticlesInternals.utils=t(e.__tsParticlesInternals.utils),e.__tsParticlesInternals.canvas=t(e.__tsParticlesInternals.canvas),e.__tsParticlesInternals.path=t(e.__tsParticlesInternals.path),e.tsparticlesInternalExports=e.tsparticlesInternalExports||{}}("undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:this),function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@tsparticles/plugin-interactivity"),require("@tsparticles/engine")):"function"==typeof define&&define.amd?define(["exports","@tsparticles/plugin-interactivity","@tsparticles/engine"],t):t(((e="undefined"!=typeof globalThis?globalThis:e||self).__tsParticlesInternals=e.__tsParticlesInternals||{},e.__tsParticlesInternals.interactions=e.__tsParticlesInternals.interactions||{},e.__tsParticlesInternals.interactions.externalBubble=e.__tsParticlesInternals.interactions.externalBubble||{}),e.__tsParticlesInternals.plugins.interactivity,e.__tsParticlesInternals.engine)}(this,function(e,t,s){"use strict";class i{color;distance;duration;mix;opacity;size;constructor(){this.distance=200,this.duration=.4,this.mix=!1}load(e){if(!s.isNull(e)){if(void 0!==e.distance&&(this.distance=e.distance),void 0!==e.duration&&(this.duration=e.duration),void 0!==e.mix&&(this.mix=e.mix),void 0!==e.opacity&&(this.opacity=e.opacity),void 0!==e.color){const t=s.isArray(this.color)?void 0:this.color;this.color=s.executeOnSingleOrMultiple(e.color,e=>s.OptionsColor.create(t,e))}void 0!==e.size&&(this.size=e.size)}}}class n extends i{selectors;constructor(){super(),this.selectors=[]}load(e){super.load(e),s.isNull(e)||void 0!==e.selectors&&(this.selectors=e.selectors)}}class l extends i{divs;load(e){super.load(e),s.isNull(e)||(this.divs=s.executeOnSingleOrMultiple(e.divs,e=>{const t=new n;return t.load(e),t}))}}var a;function r(e,t,i,n){if(t>=i){const l=e+(t-i)*n;return s.clamp(l,e,t)}if(t<i){const l=e-(i-t)*n;return s.clamp(l,t,e)}}!function(e){e.color="color",e.opacity="opacity",e.size="size"}(a||(a={}));const o="bubble";class c extends t.ExternalInteractorBase{handleClickMode;_maxDistance;_pluginManager;constructor(e,t){super(t),this._pluginManager=e,this._maxDistance=0,t.bubble??={},this.handleClickMode=e=>{e===o&&(t.bubble??={},t.bubble.clicking=!0)}}get maxDistance(){return this._maxDistance}clear(e,t,s){e.bubble.inRange&&!s||(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&&(this._maxDistance=t.distance,e.retina.bubbleModeDistance=t.distance*e.retina.pixelRatio,void 0!==t.size&&(e.retina.bubbleModeSize=t.size*e.retina.pixelRatio))}interact(e,i){const n=this.container.actualOptions,l=n.interactivity?.events;if(!l)return;const a=l.onHover,r=l.onClick,c=a.enable,b=a.mode,u=r.enable,_=r.mode,p=l.onDiv;c&&s.isInArray(o,b)?this._hoverBubble(e):u&&s.isInArray(o,_)?this._clickBubble(e):t.divModeExecute(o,p,(t,s)=>{this._singleSelectorHover(e,i,t,s)})}isEnabled(e,i){const n=this.container.actualOptions,l=e.mouse,a=(i?.interactivity??n.interactivity)?.events;if(!a)return!1;const{onClick:r,onDiv:c,onHover:b}=a,u=t.isDivModeEnabled(o,c);return!!(u||b.enable&&l.position||r.enable&&l.clickPosition)&&(s.isInArray(o,b.mode)||s.isInArray(o,r.mode)||u)}loadModeOptions(e,...t){e.bubble??=new l;for(const s of t)e.bubble.load(s?.bubble)}reset(e,t){t.bubble.inRange=!1}_clickBubble=e=>{const t=this.container,i=t.actualOptions,n=e.mouse.clickPosition,l=i.interactivity?.modes.bubble;if(!l||!n)return;t.bubble??={};const r=t.retina.bubbleModeDistance;if(!r||r<0)return;const o=t.particles.grid.queryCircle(n,r,t=>this.isEnabled(e,t)),{bubble:c}=t;for(const i of o){if(!c.clicking)continue;i.bubble.inRange=!c.durationEnd;const o=i.getPosition(),b=s.getDistance(o,n),u=(performance.now()-(e.mouse.clickTime??0))/s.millisecondsToSeconds;u>l.duration&&(c.durationEnd=!0),u>l.duration*s.double&&(c.clicking=!1,c.durationEnd=!1);const _={bubbleObj:{optValue:t.retina.bubbleModeSize,value:i.bubble.radius},particlesObj:{optValue:s.getRangeMax(i.options.size.value)*t.retina.pixelRatio,value:i.size.value},type:a.size};this._process(i,b,u,_);const p={bubbleObj:{optValue:l.opacity,value:i.bubble.opacity},particlesObj:{optValue:s.getRangeMax(i.options.opacity.value),value:i.opacity?.value??1},type:a.opacity};this._process(i,b,u,p),!c.durationEnd&&b<=r?this._hoverBubbleColor(i,b):delete i.bubble.color}};_hoverBubble=e=>{const i=this.container,n=e.mouse.position,l=i.retina.bubbleModeDistance;if(!l||l<0||!n)return;const a=i.particles.grid.queryCircle(n,l,t=>this.isEnabled(e,t));for(const i of a){i.bubble.inRange=!0;const a=i.getPosition(),r=s.getDistance(a,n),o=1-r/l;r<=l?o>=0&&e.status===t.mouseMoveEvent&&(this._hoverBubbleSize(i,o),this._hoverBubbleOpacity(i,o),this._hoverBubbleColor(i,o)):this.reset(e,i),e.status===t.mouseLeaveEvent&&this.reset(e,i)}};_hoverBubbleColor=(e,t,i)=>{const n=this.container.actualOptions,l=i??n.interactivity?.modes.bubble;if(l){if(!e.bubble.finalColor){const t=l.color;if(!t)return;const i=s.itemFromSingleOrMultiple(t);e.bubble.finalColor=s.rangeColorToHsl(this._pluginManager,i)}if(e.bubble.finalColor)if(l.mix){e.bubble.color=void 0;const i=e.getFillColor();e.bubble.color=i?s.rgbToHsl(s.colorMix(i,e.bubble.finalColor,1-t,t)):e.bubble.finalColor}else e.bubble.color=e.bubble.finalColor}};_hoverBubbleOpacity=(e,t,i)=>{const n=this.container.actualOptions,l=i?.opacity??n.interactivity?.modes.bubble?.opacity;if(!l)return;const a=e.options.opacity.value,o=r(e.opacity?.value??1,l,s.getRangeMax(a),t);void 0!==o&&(e.bubble.opacity=o)};_hoverBubbleSize=(e,t,i)=>{const n=this.container,l=i?.size?i.size*n.retina.pixelRatio:n.retina.bubbleModeSize;if(void 0===l)return;const a=s.getRangeMax(e.options.size.value)*n.retina.pixelRatio,o=r(e.size.value,l,a,t);void 0!==o&&(e.bubble.radius=o)};_process=(e,t,s,i)=>{const n=this.container,l=i.bubbleObj.optValue,r=n.actualOptions,o=r.interactivity?.modes.bubble;if(!o||void 0===l)return;const c=o.duration,b=n.retina.bubbleModeDistance,u=i.particlesObj.optValue,_=i.bubbleObj.value,p=i.particlesObj.value??0,d=i.type;if(b&&!(b<0)&&l!==u)if(n.bubble??={},n.bubble.durationEnd)_&&(d===a.size&&delete e.bubble.radius,d===a.opacity&&delete e.bubble.opacity);else if(t<=b){if((_??p)!==l){const t=p-s*(p-l)/c;d===a.size&&(e.bubble.radius=t),d===a.opacity&&(e.bubble.opacity=t)}}else d===a.size&&delete e.bubble.radius,d===a.opacity&&delete e.bubble.opacity};_singleSelectorHover=(e,i,n,l)=>{const a=this.container,r=s.safeDocument().querySelectorAll(n),o=a.actualOptions.interactivity?.modes.bubble;o&&r.length&&r.forEach(n=>{const r=n,c=a.retina.pixelRatio,b={x:(r.offsetLeft+r.offsetWidth*s.half)*c,y:(r.offsetTop+r.offsetHeight*s.half)*c},u=r.offsetWidth*s.half*c,_=l.type===t.DivType.circle?new s.Circle(b.x,b.y,u):new s.Rectangle(r.offsetLeft*c,r.offsetTop*c,r.offsetWidth*c,r.offsetHeight*c),p=a.particles.grid.query(_,t=>this.isEnabled(e,t));for(const e of p){if(!_.contains(e.getPosition()))continue;e.bubble.inRange=!0;const s=o.divs,n=t.divMode(s,r);e.bubble.div&&e.bubble.div===r||(this.clear(e,i,!0),e.bubble.div=r),this._hoverBubbleSize(e,1,n),this._hoverBubbleOpacity(e,1,n),this._hoverBubbleColor(e,1,n)}})}}async function b(e){e.checkVersion("4.0.5"),await e.pluginManager.register(e=>{t.ensureInteractivityPluginLoaded(e),e.pluginManager.addInteractor?.("externalBubble",t=>Promise.resolve(new c(e.pluginManager,t)))})}const u=globalThis;u.__tsParticlesInternals=u.__tsParticlesInternals??{},u.loadExternalBubbleInteraction=b,e.Bubble=l,e.BubbleBase=i,e.BubbleDiv=n,e.loadExternalBubbleInteraction=b}),Object.assign(globalThis.window||globalThis,{loadExternalBubbleInteraction:(globalThis.__tsParticlesInternals.interactions.externalBubble||{}).loadExternalBubbleInteraction}),delete(globalThis.window||globalThis).tsparticlesInternalExports;
1
+ !function(e){e.__tsParticlesInternals=e.__tsParticlesInternals||{},e.__tsParticlesInternals.bundles=e.__tsParticlesInternals.bundles||{},e.__tsParticlesInternals.effects=e.__tsParticlesInternals.effects||{},e.__tsParticlesInternals.engine=e.__tsParticlesInternals.engine||{},e.__tsParticlesInternals.interactions=e.__tsParticlesInternals.interactions||{},e.__tsParticlesInternals.palettes=e.__tsParticlesInternals.palettes||{},e.__tsParticlesInternals.paths=e.__tsParticlesInternals.paths||{},e.__tsParticlesInternals.plugins=e.__tsParticlesInternals.plugins||{},e.__tsParticlesInternals.plugins=e.__tsParticlesInternals.plugins||{},e.__tsParticlesInternals.plugins.emittersShapes=e.__tsParticlesInternals.plugins.emittersShapes||{},e.__tsParticlesInternals.presets=e.__tsParticlesInternals.presets||{},e.__tsParticlesInternals.shapes=e.__tsParticlesInternals.shapes||{},e.__tsParticlesInternals.updaters=e.__tsParticlesInternals.updaters||{},e.__tsParticlesInternals.utils=e.__tsParticlesInternals.utils||{},e.__tsParticlesInternals.canvas=e.__tsParticlesInternals.canvas||{},e.__tsParticlesInternals.canvas=e.__tsParticlesInternals.canvas||{},e.__tsParticlesInternals.canvas.utils=e.__tsParticlesInternals.canvas.utils||{},e.__tsParticlesInternals.path=e.__tsParticlesInternals.path||{},e.__tsParticlesInternals.path=e.__tsParticlesInternals.path||{},e.__tsParticlesInternals.path.utils=e.__tsParticlesInternals.path.utils||{};var t="undefined"!=typeof Proxy?function(e){return new Proxy(e,{get:function(e,t){return t in e||(e[t]={}),e[t]}})}:function(e){return e};e.__tsParticlesInternals.bundles=t(e.__tsParticlesInternals.bundles),e.__tsParticlesInternals.effects=t(e.__tsParticlesInternals.effects),e.__tsParticlesInternals.interactions=t(e.__tsParticlesInternals.interactions),e.__tsParticlesInternals.palettes=t(e.__tsParticlesInternals.palettes),e.__tsParticlesInternals.paths=t(e.__tsParticlesInternals.paths),e.__tsParticlesInternals.plugins=t(e.__tsParticlesInternals.plugins),e.__tsParticlesInternals.plugins.emittersShapes=t(e.__tsParticlesInternals.plugins.emittersShapes),e.__tsParticlesInternals.presets=t(e.__tsParticlesInternals.presets),e.__tsParticlesInternals.shapes=t(e.__tsParticlesInternals.shapes),e.__tsParticlesInternals.updaters=t(e.__tsParticlesInternals.updaters),e.__tsParticlesInternals.utils=t(e.__tsParticlesInternals.utils),e.__tsParticlesInternals.canvas=t(e.__tsParticlesInternals.canvas),e.__tsParticlesInternals.path=t(e.__tsParticlesInternals.path),e.tsparticlesInternalExports=e.tsparticlesInternalExports||{}}("undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:this),function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@tsparticles/plugin-interactivity"),require("@tsparticles/engine")):"function"==typeof define&&define.amd?define(["exports","@tsparticles/plugin-interactivity","@tsparticles/engine"],t):t(((e="undefined"!=typeof globalThis?globalThis:e||self).__tsParticlesInternals=e.__tsParticlesInternals||{},e.__tsParticlesInternals.interactions=e.__tsParticlesInternals.interactions||{},e.__tsParticlesInternals.interactions.externalBubble=e.__tsParticlesInternals.interactions.externalBubble||{}),e.__tsParticlesInternals.plugins.interactivity,e.__tsParticlesInternals.engine)}(this,function(e,t,s){"use strict";class i{color;distance;duration;mix;opacity;size;constructor(){this.distance=200,this.duration=.4,this.mix=!1}load(e){if(!s.isNull(e)){if(void 0!==e.distance&&(this.distance=e.distance),void 0!==e.duration&&(this.duration=e.duration),void 0!==e.mix&&(this.mix=e.mix),void 0!==e.opacity&&(this.opacity=e.opacity),void 0!==e.color){const t=s.isArray(this.color)?void 0:this.color;this.color=s.executeOnSingleOrMultiple(e.color,e=>s.OptionsColor.create(t,e))}void 0!==e.size&&(this.size=e.size)}}}class n extends i{selectors;constructor(){super(),this.selectors=[]}load(e){super.load(e),s.isNull(e)||void 0!==e.selectors&&(this.selectors=e.selectors)}}class l extends i{divs;load(e){super.load(e),s.isNull(e)||(this.divs=s.executeOnSingleOrMultiple(e.divs,e=>{const t=new n;return t.load(e),t}))}}var a;function r(e,t,i,n){if(t>=i){const l=e+(t-i)*n;return s.clamp(l,e,t)}if(t<i){const l=e-(i-t)*n;return s.clamp(l,t,e)}}!function(e){e.color="color",e.opacity="opacity",e.size="size"}(a||(a={}));const o="bubble";class c extends t.ExternalInteractorBase{handleClickMode;#e;#t;constructor(e,t){super(t),this.#t=e,this.#e=0,t.bubble??={},this.handleClickMode=e=>{e===o&&(t.bubble??={},t.bubble.clicking=!0)}}get maxDistance(){return this.#e}clear(e,t,s){e.bubble.inRange&&!s||(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&&(this.#e=t.distance,e.retina.bubbleModeDistance=t.distance*e.retina.pixelRatio,void 0!==t.size&&(e.retina.bubbleModeSize=t.size*e.retina.pixelRatio))}interact(e,i){const n=this.container.actualOptions,l=n.interactivity?.events;if(!l)return;const a=l.onHover,r=l.onClick,c=a.enable,b=a.mode,u=r.enable,_=r.mode,d=l.onDiv;c&&s.isInArray(o,b)?this.#s(e):u&&s.isInArray(o,_)?this.#i(e):t.divModeExecute(o,d,(t,s)=>{this.#n(e,i,t,s)})}isEnabled(e,i){const n=this.container.actualOptions,l=e.mouse,a=(i?.interactivity??n.interactivity)?.events;if(!a)return!1;const{onClick:r,onDiv:c,onHover:b}=a,u=t.isDivModeEnabled(o,c);return!!(u||b.enable&&l.position||r.enable&&l.clickPosition)&&(s.isInArray(o,b.mode)||s.isInArray(o,r.mode)||u)}loadModeOptions(e,...t){e.bubble??=new l;for(const s of t)e.bubble.load(s?.bubble)}reset(e,t){t.bubble.inRange=!1}#i=e=>{const t=this.container,i=t.actualOptions,n=e.mouse.clickPosition,l=i.interactivity?.modes.bubble;if(!l||!n)return;t.bubble??={};const r=t.retina.bubbleModeDistance;if(!r||r<0)return;const o=t.particles.grid.queryCircle(n,r,t=>this.isEnabled(e,t)),{bubble:c}=t;for(const i of o){if(!c.clicking)continue;i.bubble.inRange=!c.durationEnd;const o=i.getPosition(),b=s.getDistance(o,n),u=(performance.now()-(e.mouse.clickTime??0))/s.millisecondsToSeconds;u>l.duration&&(c.durationEnd=!0),u>l.duration*s.double&&(c.clicking=!1,c.durationEnd=!1);const _={bubbleObj:{optValue:t.retina.bubbleModeSize,value:i.bubble.radius},particlesObj:{optValue:i.size.max,value:i.size.value},type:a.size};this.#l(i,b,u,_);const d={bubbleObj:{optValue:l.opacity,value:i.bubble.opacity},particlesObj:{optValue:i.opacity?.max??1,value:i.opacity?.value??1},type:a.opacity};this.#l(i,b,u,d),!c.durationEnd&&b<=r?this.#a(i,b):delete i.bubble.color}};#s=e=>{const i=this.container,n=e.mouse.position,l=i.retina.bubbleModeDistance;if(!l||l<0||!n)return;const a=i.particles.grid.queryCircle(n,l,t=>this.isEnabled(e,t));for(const i of a){i.bubble.inRange=!0;const a=i.getPosition(),r=s.getDistance(a,n),o=1-r/l;r<=l?o>=0&&e.status===t.mouseMoveEvent&&(this.#r(i,o),this.#o(i,o),this.#a(i,o)):this.reset(e,i),e.status===t.mouseLeaveEvent&&this.reset(e,i)}};#a=(e,t,i)=>{const n=this.container.actualOptions,l=i??n.interactivity?.modes.bubble;if(l){if(!e.bubble.finalColor){const t=l.color;if(!t)return;const i=s.itemFromSingleOrMultiple(t);e.bubble.finalColor=s.rangeColorToHsl(this.#t,i)}if(e.bubble.finalColor)if(l.mix){e.bubble.color=void 0;const i=e.getFillColor();e.bubble.color=i?s.rgbToHsl(s.colorMix(i,e.bubble.finalColor,1-t,t)):e.bubble.finalColor}else e.bubble.color=e.bubble.finalColor}};#o=(e,t,s)=>{const i=this.container.actualOptions,n=s?.opacity??i.interactivity?.modes.bubble?.opacity;if(!n)return;const l=r(e.opacity?.value??1,n,e.opacity?.max??1,t);void 0!==l&&(e.bubble.opacity=l)};#r=(e,t,s)=>{const i=this.container,n=s?.size?s.size*i.retina.pixelRatio:i.retina.bubbleModeSize;if(void 0===n)return;const l=r(e.size.value,n,e.size.max,t);void 0!==l&&(e.bubble.radius=l)};#l=(e,t,s,i)=>{const n=this.container,l=i.bubbleObj.optValue,r=n.actualOptions,o=r.interactivity?.modes.bubble;if(!o||void 0===l)return;const c=o.duration,b=n.retina.bubbleModeDistance,u=i.particlesObj.optValue,_=i.bubbleObj.value,d=i.particlesObj.value??0,p=i.type;if(b&&!(b<0)&&l!==u)if(n.bubble??={},n.bubble.durationEnd)_&&(p===a.size&&delete e.bubble.radius,p===a.opacity&&delete e.bubble.opacity);else if(t<=b){if((_??d)!==l){const t=d-s*(d-l)/c;p===a.size&&(e.bubble.radius=t),p===a.opacity&&(e.bubble.opacity=t)}}else p===a.size&&delete e.bubble.radius,p===a.opacity&&delete e.bubble.opacity};#n=(e,i,n,l)=>{const a=this.container,r=s.safeDocument().querySelectorAll(n),o=a.actualOptions.interactivity?.modes.bubble;o&&r.length&&r.forEach(n=>{const r=n,c=a.retina.pixelRatio,b={x:(r.offsetLeft+r.offsetWidth*s.half)*c,y:(r.offsetTop+r.offsetHeight*s.half)*c},u=r.offsetWidth*s.half*c,_=l.type===t.DivType.circle?new s.Circle(b.x,b.y,u):new s.Rectangle(r.offsetLeft*c,r.offsetTop*c,r.offsetWidth*c,r.offsetHeight*c),d=a.particles.grid.query(_,t=>this.isEnabled(e,t));for(const e of d){if(!_.contains(e.getPosition()))continue;e.bubble.inRange=!0;const s=o.divs,n=t.divMode(s,r);e.bubble.div&&e.bubble.div===r||(this.clear(e,i,!0),e.bubble.div=r),this.#r(e,1,n),this.#o(e,1,n),this.#a(e,1,n)}})}}async function b(e){e.checkVersion("4.1.0"),await e.pluginManager.register(e=>{t.ensureInteractivityPluginLoaded(e),e.pluginManager.addInteractor?.("externalBubble",t=>Promise.resolve(new c(e.pluginManager,t)))})}const u=globalThis;u.__tsParticlesInternals=u.__tsParticlesInternals??{},u.loadExternalBubbleInteraction=b,e.Bubble=l,e.BubbleBase=i,e.BubbleDiv=n,e.loadExternalBubbleInteraction=b}),Object.assign(globalThis.window||globalThis,{loadExternalBubbleInteraction:(globalThis.__tsParticlesInternals.interactions.externalBubble||{}).loadExternalBubbleInteraction}),delete(globalThis.window||globalThis).tsparticlesInternalExports;
package/types/Bubbler.d.ts CHANGED
@@ -2,9 +2,8 @@ import type { BubbleContainer, BubbleMode, IBubbleMode } from "./Types.js";
2
2
  import { type IDelta, type Particle, type PluginManager, type RecursivePartial } from "@tsparticles/engine";
3
3
  import { ExternalInteractorBase, type IInteractivityData, type IModes, type InteractivityParticle, type Modes } from "@tsparticles/plugin-interactivity";
4
4
  export declare class Bubbler extends ExternalInteractorBase<BubbleContainer> {
5
+ #private;
5
6
  handleClickMode: (mode: string, interactivityData: IInteractivityData) => void;
6
- private _maxDistance;
7
- private readonly _pluginManager;
8
7
  constructor(pluginManager: PluginManager, container: BubbleContainer);
9
8
  get maxDistance(): number;
10
9
  clear(particle: Particle, _delta: IDelta, force?: boolean): void;
@@ -13,11 +12,4 @@ export declare class Bubbler extends ExternalInteractorBase<BubbleContainer> {
13
12
  isEnabled(interactivityData: IInteractivityData, particle?: InteractivityParticle): boolean;
14
13
  loadModeOptions(options: Modes & BubbleMode, ...sources: RecursivePartial<(IModes & IBubbleMode) | undefined>[]): void;
15
14
  reset(_interactivityData: IInteractivityData, particle: Particle): void;
16
- private readonly _clickBubble;
17
- private readonly _hoverBubble;
18
- private readonly _hoverBubbleColor;
19
- private readonly _hoverBubbleOpacity;
20
- private readonly _hoverBubbleSize;
21
- private readonly _process;
22
- private readonly _singleSelectorHover;
23
15
  }