@tsparticles/interaction-external-bubble 3.0.3 → 3.2.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/582.min.js +2 -0
- package/582.min.js.LICENSE.txt +1 -0
- package/browser/Bubbler.js +22 -20
- package/browser/index.js +4 -2
- package/cjs/Bubbler.js +21 -19
- package/cjs/index.js +16 -2
- package/dist_browser_Bubbler_js.js +40 -0
- package/esm/Bubbler.js +22 -20
- package/esm/index.js +4 -2
- package/package.json +2 -2
- package/report.html +3 -3
- package/tsparticles.interaction.external.bubble.js +271 -429
- package/tsparticles.interaction.external.bubble.min.js +1 -1
- package/tsparticles.interaction.external.bubble.min.js.LICENSE.txt +1 -1
- package/types/Types.d.ts +4 -4
- package/umd/Bubbler.js +21 -19
- package/umd/index.js +18 -3
|
@@ -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
|
|
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 r="object"==typeof exports?t(require("@tsparticles/engine")):t(e.window);for(var o in r)("object"==typeof exports?exports:e)[o]=r[o]}}(this,(e=>(()=>{var t,r,o={585:(e,t,r)=>{r.d(t,{x:()=>a});var o=r(533),i=r(543),n=r(450);class a extends i.N{load(e){super.load(e),e&&(this.divs=(0,o.executeOnSingleOrMultiple)(e.divs,(e=>{const t=new n.y;return t.load(e),t})))}}},543:(e,t,r)=>{r.d(t,{N:()=>i});var o=r(533);class i{constructor(){this.distance=200,this.duration=.4,this.mix=!1}load(e){if(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=(0,o.isArray)(this.color)?void 0:this.color;this.color=(0,o.executeOnSingleOrMultiple)(e.color,(e=>o.OptionsColor.create(t,e)))}void 0!==e.size&&(this.size=e.size)}}}},450:(e,t,r)=>{r.d(t,{y:()=>i});var o=r(543);class i extends o.N{constructor(){super(),this.selectors=[]}load(e){super.load(e),e&&void 0!==e.selectors&&(this.selectors=e.selectors)}}},533:t=>{t.exports=e}},i={};function n(e){var t=i[e];if(void 0!==t)return t.exports;var r=i[e]={exports:{}};return o[e](r,r.exports,n),r.exports}n.m=o,n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.f={},n.e=e=>Promise.all(Object.keys(n.f).reduce(((t,r)=>(n.f[r](e,t),t)),[])),n.u=e=>e+".min.js",n.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),t={},r="@tsparticles/interaction-external-bubble:",n.l=(e,o,i,a)=>{if(t[e])t[e].push(o);else{var s,l;if(void 0!==i)for(var c=document.getElementsByTagName("script"),u=0;u<c.length;u++){var d=c[u];if(d.getAttribute("src")==e||d.getAttribute("data-webpack")==r+i){s=d;break}}s||(l=!0,(s=document.createElement("script")).charset="utf-8",s.timeout=120,n.nc&&s.setAttribute("nonce",n.nc),s.setAttribute("data-webpack",r+i),s.src=e),t[e]=[o];var p=(r,o)=>{s.onerror=s.onload=null,clearTimeout(b);var i=t[e];if(delete t[e],s.parentNode&&s.parentNode.removeChild(s),i&&i.forEach((e=>e(o))),r)return r(o)},b=setTimeout(p.bind(null,void 0,{type:"timeout",target:s}),12e4);s.onerror=p.bind(null,s.onerror),s.onload=p.bind(null,s.onload),l&&document.head.appendChild(s)}},n.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},(()=>{var e;n.g.importScripts&&(e=n.g.location+"");var t=n.g.document;if(!e&&t&&(t.currentScript&&(e=t.currentScript.src),!e)){var r=t.getElementsByTagName("script");if(r.length)for(var o=r.length-1;o>-1&&!e;)e=r[o--].src}if(!e)throw new Error("Automatic publicPath is not supported in this browser");e=e.replace(/#.*$/,"").replace(/\?.*$/,"").replace(/\/[^\/]+$/,"/"),n.p=e})(),(()=>{var e={541:0};n.f.j=(t,r)=>{var o=n.o(e,t)?e[t]:void 0;if(0!==o)if(o)r.push(o[2]);else{var i=new Promise(((r,i)=>o=e[t]=[r,i]));r.push(o[2]=i);var a=n.p+n.u(t),s=new Error;n.l(a,(r=>{if(n.o(e,t)&&(0!==(o=e[t])&&(e[t]=void 0),o)){var i=r&&("load"===r.type?"missing":r.type),a=r&&r.target&&r.target.src;s.message="Loading chunk "+t+" failed.\n("+i+": "+a+")",s.name="ChunkLoadError",s.type=i,s.request=a,o[1](s)}}),"chunk-"+t,t)}};var t=(t,r)=>{var o,i,a=r[0],s=r[1],l=r[2],c=0;if(a.some((t=>0!==e[t]))){for(o in s)n.o(s,o)&&(n.m[o]=s[o]);if(l)l(n)}for(t&&t(r);c<a.length;c++)i=a[c],n.o(e,i)&&e[i]&&e[i][0](),e[i]=0},r=this.webpackChunk_tsparticles_interaction_external_bubble=this.webpackChunk_tsparticles_interaction_external_bubble||[];r.forEach(t.bind(null,0)),r.push=t.bind(null,r.push.bind(r))})();var a={};return(()=>{n.r(a),n.d(a,{Bubble:()=>r.x,BubbleBase:()=>e.N,BubbleDiv:()=>t.y,loadExternalBubbleInteraction:()=>o});var e=n(543),t=n(450),r=n(585);async function o(e,t=!0){await e.addInteractor("externalBubble",(async e=>{const{Bubbler:t}=await n.e(582).then(n.bind(n,582));return new t(e)}),t)}})(),a})()));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
/*! tsParticles Bubble External Interaction v3.0
|
|
1
|
+
/*! tsParticles Bubble External Interaction v3.2.0 by Matteo Bruni */
|
package/types/Types.d.ts
CHANGED
|
@@ -2,12 +2,12 @@ import type { Bubble } from "./Options/Classes/Bubble.js";
|
|
|
2
2
|
import type { BubbleOptions } from "./Options/Classes/BubbleOptions.js";
|
|
3
3
|
import type { Container } from "@tsparticles/engine";
|
|
4
4
|
import type { IBubble } from "./Options/Interfaces/IBubble.js";
|
|
5
|
-
export
|
|
5
|
+
export interface IBubbleMode {
|
|
6
6
|
bubble: IBubble;
|
|
7
|
-
}
|
|
8
|
-
export
|
|
7
|
+
}
|
|
8
|
+
export interface BubbleMode {
|
|
9
9
|
bubble?: Bubble;
|
|
10
|
-
}
|
|
10
|
+
}
|
|
11
11
|
interface IContainerBubble {
|
|
12
12
|
clicking?: boolean;
|
|
13
13
|
durationEnd?: boolean;
|
package/umd/Bubbler.js
CHANGED
|
@@ -13,7 +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
|
+
const bubbleMode = "bubble", minDistance = 0, defaultClickTime = 0, double = 2, defaultOpacity = 1, ratioOffset = 1, defaultBubbleValue = 0, minRatio = 0, half = 0.5, defaultRatio = 1;
|
|
17
17
|
class Bubbler extends engine_1.ExternalInteractorBase {
|
|
18
18
|
constructor(container) {
|
|
19
19
|
super(container);
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
container.bubble = {};
|
|
27
27
|
}
|
|
28
28
|
const distance = container.retina.bubbleModeDistance;
|
|
29
|
-
if (!distance || distance <
|
|
29
|
+
if (!distance || distance < minDistance) {
|
|
30
30
|
return;
|
|
31
31
|
}
|
|
32
32
|
const query = container.particles.quadTree.queryCircle(mouseClickPos, distance, (p) => this.isEnabled(p)), { bubble } = container;
|
|
@@ -35,11 +35,12 @@
|
|
|
35
35
|
continue;
|
|
36
36
|
}
|
|
37
37
|
particle.bubble.inRange = !bubble.durationEnd;
|
|
38
|
-
const pos = particle.getPosition(), distMouse = (0, engine_1.getDistance)(pos, mouseClickPos), timeSpent = (new Date().getTime() - (container.interactivity.mouse.clickTime
|
|
38
|
+
const pos = particle.getPosition(), distMouse = (0, engine_1.getDistance)(pos, mouseClickPos), timeSpent = (new Date().getTime() - (container.interactivity.mouse.clickTime ?? defaultClickTime)) /
|
|
39
|
+
engine_1.millisecondsToSeconds;
|
|
39
40
|
if (timeSpent > bubbleOptions.duration) {
|
|
40
41
|
bubble.durationEnd = true;
|
|
41
42
|
}
|
|
42
|
-
if (timeSpent > bubbleOptions.duration *
|
|
43
|
+
if (timeSpent > bubbleOptions.duration * double) {
|
|
43
44
|
bubble.clicking = false;
|
|
44
45
|
bubble.durationEnd = false;
|
|
45
46
|
}
|
|
@@ -62,7 +63,7 @@
|
|
|
62
63
|
},
|
|
63
64
|
particlesObj: {
|
|
64
65
|
optValue: (0, engine_1.getRangeMax)(particle.options.opacity.value),
|
|
65
|
-
value: particle.opacity?.value ??
|
|
66
|
+
value: particle.opacity?.value ?? defaultOpacity,
|
|
66
67
|
},
|
|
67
68
|
type: "opacity",
|
|
68
69
|
};
|
|
@@ -77,15 +78,15 @@
|
|
|
77
78
|
};
|
|
78
79
|
this._hoverBubble = () => {
|
|
79
80
|
const container = this.container, mousePos = container.interactivity.mouse.position, distance = container.retina.bubbleModeDistance;
|
|
80
|
-
if (!distance || distance <
|
|
81
|
+
if (!distance || distance < minDistance || !mousePos) {
|
|
81
82
|
return;
|
|
82
83
|
}
|
|
83
84
|
const query = container.particles.quadTree.queryCircle(mousePos, distance, (p) => this.isEnabled(p));
|
|
84
85
|
for (const particle of query) {
|
|
85
86
|
particle.bubble.inRange = true;
|
|
86
|
-
const pos = particle.getPosition(), pointDistance = (0, engine_1.getDistance)(pos, mousePos), ratio =
|
|
87
|
+
const pos = particle.getPosition(), pointDistance = (0, engine_1.getDistance)(pos, mousePos), ratio = ratioOffset - pointDistance / distance;
|
|
87
88
|
if (pointDistance <= distance) {
|
|
88
|
-
if (ratio >=
|
|
89
|
+
if (ratio >= minRatio && container.interactivity.status === engine_1.mouseMoveEvent) {
|
|
89
90
|
this._hoverBubbleSize(particle, ratio);
|
|
90
91
|
this._hoverBubbleOpacity(particle, ratio);
|
|
91
92
|
this._hoverBubbleColor(particle, ratio);
|
|
@@ -119,7 +120,7 @@
|
|
|
119
120
|
particle.bubble.color = undefined;
|
|
120
121
|
const pColor = particle.getFillColor();
|
|
121
122
|
particle.bubble.color = pColor
|
|
122
|
-
? (0, engine_1.rgbToHsl)((0, engine_1.colorMix)(pColor, particle.bubble.finalColor,
|
|
123
|
+
? (0, engine_1.rgbToHsl)((0, engine_1.colorMix)(pColor, particle.bubble.finalColor, ratioOffset - ratio, ratio))
|
|
123
124
|
: particle.bubble.finalColor;
|
|
124
125
|
}
|
|
125
126
|
else {
|
|
@@ -131,7 +132,7 @@
|
|
|
131
132
|
if (!modeOpacity) {
|
|
132
133
|
return;
|
|
133
134
|
}
|
|
134
|
-
const optOpacity = particle.options.opacity.value, pOpacity = particle.opacity?.value ??
|
|
135
|
+
const optOpacity = particle.options.opacity.value, pOpacity = particle.opacity?.value ?? defaultOpacity, opacity = (0, Utils_js_1.calculateBubbleValue)(pOpacity, modeOpacity, (0, engine_1.getRangeMax)(optOpacity), ratio);
|
|
135
136
|
if (opacity !== undefined) {
|
|
136
137
|
particle.bubble.opacity = opacity;
|
|
137
138
|
}
|
|
@@ -151,8 +152,8 @@
|
|
|
151
152
|
if (!bubbleOptions || bubbleParam === undefined) {
|
|
152
153
|
return;
|
|
153
154
|
}
|
|
154
|
-
const bubbleDuration = bubbleOptions.duration, bubbleDistance = container.retina.bubbleModeDistance, particlesParam = data.particlesObj.optValue, pObjBubble = data.bubbleObj.value, pObj = data.particlesObj.value
|
|
155
|
-
if (!bubbleDistance || bubbleDistance <
|
|
155
|
+
const bubbleDuration = bubbleOptions.duration, bubbleDistance = container.retina.bubbleModeDistance, particlesParam = data.particlesObj.optValue, pObjBubble = data.bubbleObj.value, pObj = data.particlesObj.value ?? defaultBubbleValue, type = data.type;
|
|
156
|
+
if (!bubbleDistance || bubbleDistance < minDistance || bubbleParam === particlesParam) {
|
|
156
157
|
return;
|
|
157
158
|
}
|
|
158
159
|
if (!container.bubble) {
|
|
@@ -198,9 +199,9 @@
|
|
|
198
199
|
}
|
|
199
200
|
selectors.forEach((item) => {
|
|
200
201
|
const elem = item, pxRatio = container.retina.pixelRatio, pos = {
|
|
201
|
-
x: (elem.offsetLeft + elem.offsetWidth
|
|
202
|
-
y: (elem.offsetTop + elem.offsetHeight
|
|
203
|
-
}, repulseRadius =
|
|
202
|
+
x: (elem.offsetLeft + elem.offsetWidth * half) * pxRatio,
|
|
203
|
+
y: (elem.offsetTop + elem.offsetHeight * half) * pxRatio,
|
|
204
|
+
}, repulseRadius = elem.offsetWidth * half * pxRatio, area = div.type === "circle"
|
|
204
205
|
? new engine_1.Circle(pos.x, pos.y, repulseRadius)
|
|
205
206
|
: new engine_1.Rectangle(elem.offsetLeft * pxRatio, elem.offsetTop * pxRatio, elem.offsetWidth * pxRatio, elem.offsetHeight * pxRatio), query = container.particles.quadTree.query(area, (p) => this.isEnabled(p));
|
|
206
207
|
for (const particle of query) {
|
|
@@ -213,9 +214,9 @@
|
|
|
213
214
|
this.clear(particle, delta, true);
|
|
214
215
|
particle.bubble.div = elem;
|
|
215
216
|
}
|
|
216
|
-
this._hoverBubbleSize(particle,
|
|
217
|
-
this._hoverBubbleOpacity(particle,
|
|
218
|
-
this._hoverBubbleColor(particle,
|
|
217
|
+
this._hoverBubbleSize(particle, defaultRatio, divBubble);
|
|
218
|
+
this._hoverBubbleOpacity(particle, defaultRatio, divBubble);
|
|
219
|
+
this._hoverBubbleColor(particle, defaultRatio, divBubble);
|
|
219
220
|
}
|
|
220
221
|
});
|
|
221
222
|
};
|
|
@@ -262,10 +263,11 @@
|
|
|
262
263
|
else {
|
|
263
264
|
(0, engine_1.divModeExecute)(bubbleMode, divs, (selector, div) => this._singleSelectorHover(delta, selector, div));
|
|
264
265
|
}
|
|
266
|
+
await Promise.resolve();
|
|
265
267
|
}
|
|
266
268
|
isEnabled(particle) {
|
|
267
269
|
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);
|
|
268
|
-
if (!(divBubble || (onHover.enable && mouse.position) || (onClick.enable && mouse.clickPosition))) {
|
|
270
|
+
if (!(divBubble || (onHover.enable && !!mouse.position) || (onClick.enable && mouse.clickPosition))) {
|
|
269
271
|
return false;
|
|
270
272
|
}
|
|
271
273
|
return (0, engine_1.isInArray)(bubbleMode, onHover.mode) || (0, engine_1.isInArray)(bubbleMode, onClick.mode) || divBubble;
|
package/umd/index.js
CHANGED
|
@@ -9,6 +9,18 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
|
|
|
9
9
|
if (k2 === undefined) k2 = k;
|
|
10
10
|
o[k2] = m[k];
|
|
11
11
|
}));
|
|
12
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
13
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
14
|
+
}) : function(o, v) {
|
|
15
|
+
o["default"] = v;
|
|
16
|
+
});
|
|
17
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
18
|
+
if (mod && mod.__esModule) return mod;
|
|
19
|
+
var result = {};
|
|
20
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
21
|
+
__setModuleDefault(result, mod);
|
|
22
|
+
return result;
|
|
23
|
+
};
|
|
12
24
|
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
13
25
|
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
14
26
|
};
|
|
@@ -18,15 +30,18 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
|
18
30
|
if (v !== undefined) module.exports = v;
|
|
19
31
|
}
|
|
20
32
|
else if (typeof define === "function" && define.amd) {
|
|
21
|
-
define(["require", "exports", "./
|
|
33
|
+
define(["require", "exports", "./Options/Classes/BubbleBase.js", "./Options/Classes/BubbleDiv.js", "./Options/Classes/Bubble.js", "./Options/Interfaces/IBubbleBase.js", "./Options/Interfaces/IBubbleDiv.js", "./Options/Interfaces/IBubble.js"], factory);
|
|
22
34
|
}
|
|
23
35
|
})(function (require, exports) {
|
|
24
36
|
"use strict";
|
|
37
|
+
var __syncRequire = typeof module === "object" && typeof module.exports === "object";
|
|
25
38
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
26
39
|
exports.loadExternalBubbleInteraction = void 0;
|
|
27
|
-
const Bubbler_js_1 = require("./Bubbler.js");
|
|
28
40
|
async function loadExternalBubbleInteraction(engine, refresh = true) {
|
|
29
|
-
await engine.addInteractor("externalBubble", (container) =>
|
|
41
|
+
await engine.addInteractor("externalBubble", async (container) => {
|
|
42
|
+
const { Bubbler } = await (__syncRequire ? Promise.resolve().then(() => __importStar(require("./Bubbler.js"))) : new Promise((resolve_1, reject_1) => { require(["./Bubbler.js"], resolve_1, reject_1); }).then(__importStar));
|
|
43
|
+
return new Bubbler(container);
|
|
44
|
+
}, refresh);
|
|
30
45
|
}
|
|
31
46
|
exports.loadExternalBubbleInteraction = loadExternalBubbleInteraction;
|
|
32
47
|
__exportStar(require("./Options/Classes/BubbleBase.js"), exports);
|