@tsparticles/pjs 3.2.1 → 3.3.0

package/43.min.js

@@ -0,0 +1,2 @@
+/*! For license information please see 43.min.js.LICENSE.txt */
+(this.webpackChunk_tsparticles_pjs=this.webpackChunk_tsparticles_pjs||[]).push([[43],{2043:(t,i,e)=>{e.d(i,{Container:()=>D});var s=e(751),n=e(3393),o=e(1813),a=e(7422);function r(t,i,e){const s=i[e];void 0!==s&&(t[e]=(t[e]??1)*s)}function h(t,i,e=!1){if(!i)return;if(!t)return;const s=t.style;if(s)for(const t in i){const n=i[t];n&&s.setProperty(t,n,e?"important":"")}}class c{constructor(t){this.container=t,this._applyPostDrawUpdaters=t=>{for(const i of this._postDrawUpdaters)i.afterDraw?.(t)},this._applyPreDrawUpdaters=(t,i,e,s,n,o)=>{for(const a of this._preDrawUpdaters){if(a.getColorStyles){const{fill:o,stroke:r}=a.getColorStyles(i,t,e,s);o&&(n.fill=o),r&&(n.stroke=r)}if(a.getTransformValues){const t=a.getTransformValues(i);for(const i in t)r(o,t,i)}a.beforeDraw?.(i)}},this._applyResizePlugins=()=>{for(const t of this._resizePlugins)t.resize?.()},this._getPluginParticleColors=t=>{let i,e;for(const s of this._colorPlugins)if(!i&&s.particleFillColor&&(i=(0,a.R5)(s.particleFillColor(t))),!e&&s.particleStrokeColor&&(e=(0,a.R5)(s.particleStrokeColor(t))),i&&e)break;return[i,e]},this._initCover=async()=>{const t=this.container.actualOptions.backgroundMask.cover,i=t.color;if(i){const e=(0,a.BN)(i);if(e){const i={...e,a:t.opacity};this._coverColorStyle=(0,a.xx)(i,i.a)}}else await new Promise(((i,e)=>{if(!t.image)return;const s=document.createElement("img");s.addEventListener("load",(()=>{this._coverImage={image:s,opacity:t.opacity},i()})),s.addEventListener("error",(t=>{e(t.error)})),s.src=t.image}))},this._initStyle=()=>{const t=this.element,i=this.container.actualOptions;if(t){this._fullScreen?(this._originalStyle=(0,n.zw)({},t.style),this._setFullScreenStyle()):this._resetOriginalStyle();for(const e in i.style){if(!e||!i.style)continue;const s=i.style[e];s&&t.style.setProperty(e,s,"important")}}},this._initTrail=async()=>{const t=this.container.actualOptions.particles.move.trail,i=t.fill;if(!t.enable)return;const e=1/t.length;if(i.color){const t=(0,a.BN)(i.color);if(!t)return;this._trailFill={color:{...t},opacity:e}}else await new Promise(((t,s)=>{if(!i.image)return;const n=document.createElement("img");n.addEventListener("load",(()=>{this._trailFill={image:n,opacity:e},t()})),n.addEventListener("error",(t=>{s(t.error)})),n.src=i.image}))},this._paintBase=t=>{this.draw((i=>(0,o.Sn)(i,this.size,t)))},this._paintImage=(t,i)=>{this.draw((e=>(0,o.Md)(e,this.size,t,i)))},this._repairStyle=()=>{const t=this.element;t&&(this._safeMutationObserver((t=>t.disconnect())),this._initStyle(),this.initBackground(),this._safeMutationObserver((i=>i.observe(t,{attributes:!0}))))},this._resetOriginalStyle=()=>{const t=this.element,i=this._originalStyle;t&&i&&h(t,i)},this._safeMutationObserver=t=>{this._mutationObserver&&t(this._mutationObserver)},this._setFullScreenStyle=()=>{const t=this.element;if(!t)return;h(t,{position:"fixed",zIndex:this.container.actualOptions.fullScreen.zIndex.toString(10),top:"0",left:"0",width:"100%",height:"100%"},!0)},this.size={height:0,width:0},this._context=null,this._generated=!1,this._preDrawUpdaters=[],this._postDrawUpdaters=[],this._resizePlugins=[],this._colorPlugins=[]}get _fullScreen(){return this.container.actualOptions.fullScreen.enable}clear(){const t=this.container.actualOptions,i=t.particles.move.trail,e=this._trailFill;t.backgroundMask.enable?this.paint():i.enable&&i.length>0&&e?e.color?this._paintBase((0,a.xx)(e.color,e.opacity)):e.image&&this._paintImage(e.image,e.opacity):t.clear&&this.draw((t=>{(0,o.IU)(t,this.size)}))}destroy(){if(this.stop(),this._generated){const t=this.element;t?.remove()}else this._resetOriginalStyle();this._preDrawUpdaters=[],this._postDrawUpdaters=[],this._resizePlugins=[],this._colorPlugins=[]}draw(t){const i=this._context;if(i)return t(i)}drawAsync(t){const i=this._context;if(i)return t(i)}drawParticle(t,i){if(t.spawning||t.destroyed)return;const e=t.getRadius();if(e<=0)return;const s=t.getFillColor(),n=t.getStrokeColor()??s;let[r,h]=this._getPluginParticleColors(t);r||(r=s),h||(h=n),(r||h)&&this.draw((s=>{const n=this.container,c=n.actualOptions,l=t.options.zIndex,d=1-t.zIndexFactor,u=d**l.opacityRate,p=t.bubble.opacity??t.opacity?.value??1,f=p*u,_=(t.strokeOpacity??p)*u,g={},m={fill:r?(0,a.LC)(r,f):void 0};m.stroke=h?(0,a.LC)(h,_):m.fill,this._applyPreDrawUpdaters(s,t,e,f,m,g),(0,o.p0)({container:n,context:s,particle:t,delta:i,colorStyles:m,backgroundMask:c.backgroundMask.enable,composite:c.backgroundMask.composite,radius:e*d**l.sizeRate,opacity:f,shadow:t.options.shadow,transform:g}),this._applyPostDrawUpdaters(t)}))}drawParticlePlugin(t,i,e){this.draw((s=>(0,o.Wb)(s,t,i,e)))}drawPlugin(t,i){this.draw((e=>(0,o.e_)(e,t,i)))}async init(){this._safeMutationObserver((t=>t.disconnect())),this._mutationObserver=(0,n.tG)((t=>{for(const i of t)"attributes"===i.type&&"style"===i.attributeName&&this._repairStyle()})),this.resize(),this._initStyle(),await this._initCover();try{await this._initTrail()}catch(t){(0,n.tZ)().error(t)}this.initBackground(),this._safeMutationObserver((t=>{this.element&&t.observe(this.element,{attributes:!0})})),this.initUpdaters(),this.initPlugins(),this.paint()}initBackground(){const t=this.container.actualOptions.background,i=this.element;if(!i)return;const e=i.style;if(e){if(t.color){const i=(0,a.BN)(t.color);e.backgroundColor=i?(0,a.xx)(i,t.opacity):""}else e.backgroundColor="";e.backgroundImage=t.image||"",e.backgroundPosition=t.position||"",e.backgroundRepeat=t.repeat||"",e.backgroundSize=t.size||""}}initPlugins(){this._resizePlugins=[];for(const[,t]of this.container.plugins)t.resize&&this._resizePlugins.push(t),(t.particleFillColor??t.particleStrokeColor)&&this._colorPlugins.push(t)}initUpdaters(){this._preDrawUpdaters=[],this._postDrawUpdaters=[];for(const t of this.container.particles.updaters)t.afterDraw&&this._postDrawUpdaters.push(t),(t.getColorStyles??t.getTransformValues??t.beforeDraw)&&this._preDrawUpdaters.push(t)}loadCanvas(t){this._generated&&this.element&&this.element.remove(),this._generated=t.dataset&&s.eb in t.dataset?"true"===t.dataset[s.eb]:this._generated,this.element=t,this.element.ariaHidden="true",this._originalStyle=(0,n.zw)({},this.element.style),this.size.height=t.offsetHeight,this.size.width=t.offsetWidth,this._context=this.element.getContext("2d"),this._safeMutationObserver((t=>{this.element&&t.observe(this.element,{attributes:!0})})),this.container.retina.init(),this.initBackground()}paint(){const t=this.container.actualOptions;this.draw((i=>{t.backgroundMask.enable&&t.backgroundMask.cover?((0,o.IU)(i,this.size),this._coverImage?this._paintImage(this._coverImage.image,this._coverImage.opacity):this._coverColorStyle?this._paintBase(this._coverColorStyle):this._paintBase()):this._paintBase()}))}resize(){if(!this.element)return!1;const t=this.container,i=t.retina.pixelRatio,e=t.canvas.size,s=this.element.offsetWidth*i,n=this.element.offsetHeight*i;if(n===e.height&&s===e.width&&n===this.element.height&&s===this.element.width)return!1;const o={...e};return this.element.width=e.width=this.element.offsetWidth*i,this.element.height=e.height=this.element.offsetHeight*i,this.container.started&&t.particles.setResizeFactor({width:e.width/o.width,height:e.height/o.height}),!0}stop(){this._safeMutationObserver((t=>t.disconnect())),this._mutationObserver=void 0,this.draw((t=>(0,o.IU)(t,this.size)))}async windowResize(){if(!this.element||!this.resize())return;const t=this.container,i=t.updateActualOptions();t.particles.setDensity(),this._applyResizePlugins(),i&&await t.refresh()}}var l=e(2457);function d(t,i,e,s,n){if(s){let s={passive:!0};(0,l.Lm)(n)?s.capture=n:void 0!==n&&(s=n),t.addEventListener(i,e,s)}else{const s=n;t.removeEventListener(i,e,s)}}class u{constructor(t){this.container=t,this._doMouseTouchClick=t=>{const i=this.container,e=i.actualOptions;if(this._canPush){const t=i.interactivity.mouse,s=t.position;if(!s)return;t.clickPosition={...s},t.clickTime=(new Date).getTime();const o=e.interactivity.events.onClick;(0,n.wJ)(o.mode,(t=>this.container.handleClickMode(t)))}if("touchend"===t.type){setTimeout((()=>this._mouseTouchFinish()),500)}},this._handleThemeChange=t=>{const i=t,e=this.container,s=e.options,n=s.defaultThemes,o=i.matches?n.dark:n.light,a=s.themes.find((t=>t.name===o));a&&a.default.auto&&e.loadTheme(o)},this._handleVisibilityChange=()=>{const t=this.container,i=t.actualOptions;this._mouseTouchFinish(),i.pauseOnBlur&&(document&&document.hidden?(t.pageHidden=!0,t.pause()):(t.pageHidden=!1,t.animationStatus?t.play(!0):t.draw(!0)))},this._handleWindowResize=()=>{this._resizeTimeout&&(clearTimeout(this._resizeTimeout),delete this._resizeTimeout);const t=async()=>{const t=this.container.canvas;await(t?.windowResize())};this._resizeTimeout=setTimeout((()=>{t()}),this.container.actualOptions.interactivity.events.resize.delay*s.Xu)},this._manageInteractivityListeners=(t,i)=>{const e=this._handlers,n=this.container,o=n.actualOptions,a=n.interactivity.element;if(!a)return;const r=a,h=n.canvas.element;h&&(h.style.pointerEvents=r===h?"initial":"none"),(o.interactivity.events.onHover.enable||o.interactivity.events.onClick.enable)&&(d(a,s.Rb,e.mouseMove,i),d(a,s.s7,e.touchStart,i),d(a,s.DG,e.touchMove,i),o.interactivity.events.onClick.enable?(d(a,s.Bp,e.touchEndClick,i),d(a,s.vo,e.mouseUp,i),d(a,s.ms,e.mouseDown,i)):d(a,s.Bp,e.touchEnd,i),d(a,t,e.mouseLeave,i),d(a,s.G3,e.touchCancel,i))},this._manageListeners=t=>{const i=this._handlers,e=this.container,n=e.actualOptions.interactivity.detectsOn,o=e.canvas.element;let a=s.Z0;"window"===n?(e.interactivity.element=window,a=s.sf):e.interactivity.element="parent"===n&&o?o.parentElement??o.parentNode:o,this._manageMediaMatch(t),this._manageResize(t),this._manageInteractivityListeners(a,t),document&&d(document,s.nK,i.visibilityChange,t,!1)},this._manageMediaMatch=t=>{const i=this._handlers,e=(0,n.lV)("(prefers-color-scheme: dark)");e&&(void 0===e.addEventListener?void 0!==e.addListener&&(t?e.addListener(i.oldThemeChange):e.removeListener(i.oldThemeChange)):d(e,"change",i.themeChange,t))},this._manageResize=t=>{const i=this._handlers,e=this.container;if(!e.actualOptions.interactivity.events.resize)return;if("undefined"==typeof ResizeObserver)return void d(window,s.NF,i.resize,t);const n=e.canvas.element;this._resizeObserver&&!t?(n&&this._resizeObserver.unobserve(n),this._resizeObserver.disconnect(),delete this._resizeObserver):!this._resizeObserver&&t&&n&&(this._resizeObserver=new ResizeObserver((t=>{t.find((t=>t.target===n))&&this._handleWindowResize()})),this._resizeObserver.observe(n))},this._mouseDown=()=>{const{interactivity:t}=this.container;if(!t)return;const{mouse:i}=t;i.clicking=!0,i.downPosition=i.position},this._mouseTouchClick=t=>{const i=this.container,e=i.actualOptions,{mouse:s}=i.interactivity;s.inside=!0;let n=!1;const o=s.position;if(o&&e.interactivity.events.onClick.enable){for(const[,t]of i.plugins)if(t.clickPositionValid&&(n=t.clickPositionValid(o),n))break;n||this._doMouseTouchClick(t),s.clicking=!1}},this._mouseTouchFinish=()=>{const t=this.container.interactivity;if(!t)return;const i=t.mouse;delete i.position,delete i.clickPosition,delete i.downPosition,t.status=s.Z0,i.inside=!1,i.clicking=!1},this._mouseTouchMove=t=>{const i=this.container,e=i.actualOptions,n=i.interactivity,o=i.canvas.element;if(!n?.element)return;let a;if(n.mouse.inside=!0,t.type.startsWith("pointer")){this._canPush=!0;const i=t;if(n.element===window){if(o){const t=o.getBoundingClientRect();a={x:i.clientX-t.left,y:i.clientY-t.top}}}else if("parent"===e.interactivity.detectsOn){const t=i.target,e=i.currentTarget;if(t&&e&&o){const s=t.getBoundingClientRect(),n=e.getBoundingClientRect(),r=o.getBoundingClientRect();a={x:i.offsetX+2*s.left-(n.left+r.left),y:i.offsetY+2*s.top-(n.top+r.top)}}else a={x:i.offsetX??i.clientX,y:i.offsetY??i.clientY}}else i.target===o&&(a={x:i.offsetX??i.clientX,y:i.offsetY??i.clientY})}else if(this._canPush="touchmove"!==t.type,o){const i=t,e=1,s=i.touches[i.touches.length-e],n=o.getBoundingClientRect(),r=0;a={x:s.clientX-(n.left??r),y:s.clientY-(n.top??r)}}const r=i.retina.pixelRatio;a&&(a.x*=r,a.y*=r),n.mouse.position=a,n.status=s.Rb},this._touchEnd=t=>{const i=t,e=Array.from(i.changedTouches);for(const t of e)this._touches.delete(t.identifier);this._mouseTouchFinish()},this._touchEndClick=t=>{const i=t,e=Array.from(i.changedTouches);for(const t of e)this._touches.delete(t.identifier);this._mouseTouchClick(t)},this._touchStart=t=>{const i=t,e=Array.from(i.changedTouches);for(const t of e)this._touches.set(t.identifier,performance.now());this._mouseTouchMove(t)},this._canPush=!0,this._touches=new Map,this._handlers={mouseDown:()=>this._mouseDown(),mouseLeave:()=>this._mouseTouchFinish(),mouseMove:t=>this._mouseTouchMove(t),mouseUp:t=>this._mouseTouchClick(t),touchStart:t=>this._touchStart(t),touchMove:t=>this._mouseTouchMove(t),touchEnd:t=>this._touchEnd(t),touchCancel:t=>this._touchEnd(t),touchEndClick:t=>this._touchEndClick(t),visibilityChange:()=>this._handleVisibilityChange(),themeChange:t=>this._handleThemeChange(t),oldThemeChange:t=>this._handleThemeChange(t),resize:()=>{this._handleWindowResize()}}}addListeners(){this._manageListeners(!0)}removeListeners(){this._manageListeners(!1)}}var p=e(4126);class f{constructor(t,i){this.container=i,this._engine=t,this._interactors=[],this._externalInteractors=[],this._particleInteractors=[]}externalInteract(t){for(const i of this._externalInteractors)i.isEnabled()&&i.interact(t)}handleClickMode(t){for(const i of this._externalInteractors)i.handleClickMode?.(t)}async init(){this._interactors=await this._engine.getInteractors(this.container,!0),this._externalInteractors=[],this._particleInteractors=[];for(const t of this._interactors){switch(t.type){case"external":this._externalInteractors.push(t);break;case"particles":this._particleInteractors.push(t)}t.init()}}particlesInteract(t,i){for(const e of this._externalInteractors)e.clear(t,i);for(const e of this._particleInteractors)e.isEnabled(t)&&e.interact(t,i)}reset(t){for(const i of this._externalInteractors)i.isEnabled()&&i.reset(t);for(const i of this._particleInteractors)i.isEnabled(t)&&i.reset(t)}}var _=e(4798),g=e(2646),m=e(7287),v=e(8761);const y=.5;function w(t){if(!(0,n.hn)(t.outMode,t.checkModes))return;const i=2*t.radius;t.coord>t.maxCoord-i?t.setCb(-t.radius):t.coord<i&&t.setCb(t.radius)}class b{constructor(t,i){this.container=i,this._calcPosition=(t,i,e,s=0)=>{for(const[,s]of t.plugins){const t=void 0!==s.particlePosition?s.particlePosition(i,this):void 0;if(t)return _.p.create(t.x,t.y,e)}const n=t.canvas.size,o=(0,g.Nx)({size:n,position:i}),a=_.p.create(o.x,o.y,e),r=this.getRadius(),h=this.options.move.outModes,c=i=>{w({outMode:i,checkModes:["bounce"],coord:a.x,maxCoord:t.canvas.size.width,setCb:t=>a.x+=t,radius:r})},l=i=>{w({outMode:i,checkModes:["bounce"],coord:a.y,maxCoord:t.canvas.size.height,setCb:t=>a.y+=t,radius:r})};if(c(h.left??h.default),c(h.right??h.default),l(h.top??h.default),l(h.bottom??h.default),this._checkOverlap(a,s)){const i=1;return this._calcPosition(t,void 0,e,s+i)}return a},this._calculateVelocity=()=>{const t=(0,g.$m)(this.direction).copy(),i=this.options.move;if("inside"===i.direction||"outside"===i.direction)return t;const e=(0,g.pu)((0,g.VG)(i.angle.value)),s=(0,g.pu)((0,g.VG)(i.angle.offset)),n={left:s-e*y,right:s+e*y};return i.straight||(t.angle+=(0,g.U4)((0,g.DT)(n.left,n.right))),i.random&&"number"==typeof i.speed&&(t.length*=(0,g.G0)()),t},this._checkOverlap=(t,i=0)=>{const e=this.options.collisions,n=this.getRadius();if(!e.enable)return!1;const o=e.overlap;if(o.enable)return!1;const a=o.retries;if(a>=0&&i>a)throw new Error(`${s.dI} particle is overlapping and can't be placed`);return!!this.container.particles.find((i=>(0,g.Yf)(t,i.position)<n+i.getRadius()))},this._getRollColor=t=>{if(!t||!this.roll||!this.backColor&&!this.roll.alter)return t;const i=this.roll.horizontal&&this.roll.vertical?2:1,e=this.roll.horizontal?Math.PI*y:0;return Math.floor(((this.roll.angle??0)+e)/(Math.PI/i))%2?this.backColor?this.backColor:this.roll.alter?(0,o.yx)(t,this.roll.alter.type,this.roll.alter.value):t:t},this._initPosition=t=>{const i=this.container,e=(0,g.VG)(this.options.zIndex.value);this.position=this._calcPosition(i,t,(0,g.qE)(e,0,i.zLayers)),this.initialPosition=this.position.copy();const s=i.canvas.size;switch(this.moveCenter={...(0,n.E9)(this.options.move.center,s),radius:this.options.move.center.radius??0,mode:this.options.move.center.mode??"percent"},this.direction=(0,g.JY)(this.options.move.direction,this.position,this.moveCenter),this.options.move.direction){case"inside":this.outType="inside";break;case"outside":this.outType="outside"}this.offset=_.M.origin},this._engine=t}destroy(t){if(this.unbreakable||this.destroyed)return;this.destroyed=!0,this.bubble.inRange=!1,this.slow.inRange=!1;const i=this.container,e=this.pathGenerator,s=i.shapeDrawers.get(this.shape);s?.particleDestroy?.(this);for(const[,e]of i.plugins)e.particleDestroyed?.(this,t);for(const e of i.particles.updaters)e.particleDestroyed?.(this,t);e?.reset(this),this._engine.dispatchEvent("particleDestroyed",{container:this.container,data:{particle:this}})}draw(t){const i=this.container,e=i.canvas;for(const[,s]of i.plugins)e.drawParticlePlugin(s,this,t);e.drawParticle(this,t)}getFillColor(){return this._getRollColor(this.bubble.color??(0,a.O_)(this.color))}getMass(){return this.getRadius()**2*Math.PI*y}getPosition(){return{x:this.position.x+this.offset.x,y:this.position.y+this.offset.y,z:this.position.z}}getRadius(){return this.bubble.radius??this.size.value}getStrokeColor(){return this._getRollColor(this.bubble.color??(0,a.O_)(this.strokeColor))}init(t,i,e,o){const r=this.container,h=this._engine;this.id=t,this.group=o,this.effectClose=!0,this.effectFill=!0,this.shapeClose=!0,this.shapeFill=!0,this.pathRotation=!1,this.lastPathTime=0,this.destroyed=!1,this.unbreakable=!1,this.rotation=0,this.misplaced=!1,this.retina={maxDistance:{}},this.outType="normal",this.ignoresResizeRatio=!0;const c=r.retina.pixelRatio,l=r.actualOptions,d=(0,v.y)(this._engine,r,l.particles),u=d.effect.type,p=d.shape.type,{reduceDuplicates:f}=d;this.effect=(0,n.TA)(u,this.id,f),this.shape=(0,n.TA)(p,this.id,f);const _=d.effect,y=d.shape;if(e){if(e.effect?.type){const t=e.effect.type,i=(0,n.TA)(t,this.id,f);i&&(this.effect=i,_.load(e.effect))}if(e.shape?.type){const t=e.shape.type,i=(0,n.TA)(t,this.id,f);i&&(this.shape=i,y.load(e.shape))}}this.effectData=function(t,i,e,s){const o=i.options[t];if(o)return(0,n.zw)({close:i.close,fill:i.fill},(0,n.TA)(o,e,s))}(this.effect,_,this.id,f),this.shapeData=function(t,i,e,s){const o=i.options[t];if(o)return(0,n.zw)({close:i.close,fill:i.fill},(0,n.TA)(o,e,s))}(this.shape,y,this.id,f),d.load(e);const w=this.effectData;w&&d.load(w.particles);const b=this.shapeData;b&&d.load(b.particles);const z=new m.k(h,r);z.load(r.actualOptions.interactivity),z.load(d.interactivity),this.interactivity=z,this.effectFill=w?.fill??d.effect.fill,this.effectClose=w?.close??d.effect.close,this.shapeFill=b?.fill??d.shape.fill,this.shapeClose=b?.close??d.shape.close,this.options=d;const C=this.options.move.path;this.pathDelay=(0,g.VG)(C.delay.value)*s.Xu,C.generator&&(this.pathGenerator=this._engine.getPathGenerator(C.generator),this.pathGenerator&&r.addPath(C.generator,this.pathGenerator)&&this.pathGenerator.init(r)),r.retina.initParticle(this),this.size=(0,n.Xs)(this.options.size,c),this.bubble={inRange:!1},this.slow={inRange:!1,factor:1},this._initPosition(i),this.initialVelocity=this._calculateVelocity(),this.velocity=this.initialVelocity.copy();this.moveDecay=1-(0,g.VG)(this.options.move.decay);const x=r.particles;x.setLastZIndex(this.position.z),this.zIndexFactor=this.position.z/r.zLayers,this.sides=24;let k=r.effectDrawers.get(this.effect);k||(k=this._engine.getEffectDrawer(this.effect),k&&r.effectDrawers.set(this.effect,k)),k?.loadEffect&&k.loadEffect(this);let P=r.shapeDrawers.get(this.shape);P||(P=this._engine.getShapeDrawer(this.shape),P&&r.shapeDrawers.set(this.shape,P)),P?.loadShape&&P.loadShape(this);const O=P?.getSidesCount;O&&(this.sides=O(this)),this.spawning=!1,this.shadowColor=(0,a.BN)(this.options.shadow.color);for(const t of x.updaters)t.init(this);for(const t of x.movers)t.init?.(this);k?.particleInit?.(r,this),P?.particleInit?.(r,this);for(const[,t]of r.plugins)t.particleCreated?.(this)}isInsideCanvas(){const t=this.getRadius(),i=this.container.canvas.size,e=this.position;return e.x>=-t&&e.y>=-t&&e.y<=i.height+t&&e.x<=i.width+t}isVisible(){return!this.destroyed&&!this.spawning&&this.isInsideCanvas()}reset(){for(const t of this.container.particles.updaters)t.reset?.(this)}}var z=e(2284),C=e(694);const x=.5;class k{constructor(t,i){this.rectangle=t,this.capacity=i,this._subdivide=()=>{const{x:t,y:i}=this.rectangle.position,{width:e,height:s}=this.rectangle.size,{capacity:n}=this;for(let o=0;o<4;o++){const a=o%2;this._subs.push(new k(new C.M_(t+e*x*a,i+s*x*(Math.round(o*x)-a),e*x,s*x),n))}this._divided=!0},this._points=[],this._divided=!1,this._subs=[]}insert(t){return!!this.rectangle.contains(t.position)&&(this._points.length<this.capacity?(this._points.push(t),!0):(this._divided||this._subdivide(),this._subs.some((i=>i.insert(t)))))}query(t,i){const e=[];if(!t.intersects(this.rectangle))return[];for(const s of this._points)!t.contains(s.position)&&(0,g.Yf)(t.position,s.position)>s.particle.getRadius()&&(!i||i(s.particle))||e.push(s.particle);if(this._divided)for(const s of this._subs)e.push(...s.query(t,i));return e}queryCircle(t,i,e){return this.query(new C.jl(t.x,t.y,i),e)}queryRectangle(t,i,e){return this.query(new C.M_(t.x,t.y,i.width,i.height),e)}}const P=t=>{const{height:i,width:e}=t;return new C.M_(-.25*e,-.25*i,1.5*e,1.5*i)};class O{constructor(t,i){this._addToPool=(...t)=>{for(const i of t)this._pool.push(i)},this._applyDensity=(t,i,e)=>{const s=t.number;if(!t.number.density?.enable)return void(void 0===e?this._limit=s.limit.value:s.limit&&this._groupLimits.set(e,s.limit.value));const n=this._initDensityFactor(s.density),o=s.value,a=s.limit.value>0?s.limit.value:o,r=Math.min(o,a)*n+i,h=Math.min(this.count,this.filter((t=>t.group===e)).length);void 0===e?this._limit=s.limit.value*n:this._groupLimits.set(e,s.limit.value*n),h<r?this.push(Math.abs(r-h),void 0,t,e):h>r&&this.removeQuantity(h-r,e)},this._initDensityFactor=t=>{const i=this._container;if(!i.canvas.element||!t.enable)return 1;const e=i.canvas.element,s=i.retina.pixelRatio;return e.width*e.height/(t.height*t.width*s**2)},this._pushParticle=(t,i,e,o)=>{try{let s=this._pool.pop();s||(s=new b(this._engine,this._container)),s.init(this._nextId,t,i,e);let n=!0;if(o&&(n=o(s)),!n)return;return this._array.push(s),this._zArray.push(s),this._nextId++,this._engine.dispatchEvent("particleAdded",{container:this._container,data:{particle:s}}),s}catch(t){(0,n.tZ)().warning(`${s.dI} adding particle: ${t}`)}},this._removeParticle=(t,i,e)=>{const s=this._array[t];if(!s||s.group!==i)return!1;const n=this._zArray.indexOf(s);return this._array.splice(t,1),this._zArray.splice(n,1),s.destroy(e),this._engine.dispatchEvent("particleRemoved",{container:this._container,data:{particle:s}}),this._addToPool(s),!0},this._engine=t,this._container=i,this._nextId=0,this._array=[],this._zArray=[],this._pool=[],this._limit=0,this._groupLimits=new Map,this._needsSort=!1,this._lastZIndex=0,this._interactionManager=new f(t,i),this._pluginsInitialized=!1;const e=i.canvas.size;this.quadTree=new k(P(e),4),this.movers=[],this.updaters=[]}get count(){return this._array.length}addManualParticles(){const t=this._container,i=t.actualOptions;for(const e of i.manualParticles)this.addParticle(e.position?(0,n.E9)(e.position,t.canvas.size):void 0,e.options)}addParticle(t,i,e,s){const n=this._container.actualOptions.particles.number.limit,o=void 0===e?this._limit:this._groupLimits.get(e)??this._limit,a=this.count;if(o>0)if("delete"===n.mode){const t=a+1-o;t>0&&this.removeQuantity(t)}else if("wait"===n.mode&&a>=o)return;return this._pushParticle(t,i,e,s)}clear(){this._array=[],this._zArray=[],this._pluginsInitialized=!1}destroy(){this._array=[],this._zArray=[],this.movers=[],this.updaters=[]}draw(t){const i=this._container,e=i.canvas;e.clear(),this.update(t);for(const[,s]of i.plugins)e.drawPlugin(s,t);for(const i of this._zArray)i.draw(t)}filter(t){return this._array.filter(t)}find(t){return this._array.find(t)}get(t){return this._array[t]}handleClickMode(t){this._interactionManager.handleClickMode(t)}async init(){const t=this._container,i=t.actualOptions;this._lastZIndex=0,this._needsSort=!1,await this.initPlugins();let e=!1;for(const[,i]of t.plugins)if(void 0!==i.particlesInitialization&&(e=i.particlesInitialization()),e)break;if(this.addManualParticles(),!e){const t=i.particles,e=t.groups;for(const i in e){const s=e[i];for(let e=this.count,n=0;n<s.number?.value&&e<t.number.value;e++,n++)this.addParticle(void 0,s,i)}for(let i=this.count;i<t.number.value;i++)this.addParticle()}}async initPlugins(){if(this._pluginsInitialized)return;const t=this._container;this.movers=await this._engine.getMovers(t,!0),this.updaters=await this._engine.getUpdaters(t,!0),await this._interactionManager.init();for(const[,i]of t.pathGenerators)i.init(t)}push(t,i,e,s){for(let n=0;n<t;n++)this.addParticle(i?.position,e,s)}async redraw(){this.clear(),await this.init(),this.draw({value:0,factor:0})}remove(t,i,e){this.removeAt(this._array.indexOf(t),void 0,i,e)}removeAt(t,i=1,e,s){if(t<0||t>this.count)return;let n=0;for(let o=t;n<i&&o<this.count;o++)this._removeParticle(o--,e,s)&&n++}removeQuantity(t,i){this.removeAt(0,t,i)}setDensity(){const t=this._container.actualOptions,i=t.particles.groups;for(const t in i)this._applyDensity(i[t],0,t);this._applyDensity(t.particles,t.manualParticles.length)}setLastZIndex(t){this._lastZIndex=t,this._needsSort=this._needsSort||this._lastZIndex<t}setResizeFactor(t){this._resizeFactor=t}update(t){const i=this._container,e=new Set;this.quadTree=new k(P(i.canvas.size),4);for(const[,t]of i.pathGenerators)t.update();for(const[,e]of i.plugins)e.update?.(t);const s=this._resizeFactor;for(const i of this._array){s&&!i.ignoresResizeRatio&&(i.position.x*=s.width,i.position.y*=s.height,i.initialPosition.x*=s.width,i.initialPosition.y*=s.height),i.ignoresResizeRatio=!1,this._interactionManager.reset(i);for(const[,e]of this._container.plugins){if(i.destroyed)break;e.particleUpdate?.(i,t)}for(const e of this.movers)e.isEnabled(i)&&e.move(i,t);i.destroyed?e.add(i):this.quadTree.insert(new z.b(i.getPosition(),i))}if(e.size){const t=t=>!e.has(t);this._array=this.filter(t),this._zArray=this._zArray.filter(t);for(const t of e)this._engine.dispatchEvent("particleRemoved",{container:this._container,data:{particle:t}});this._addToPool(...e)}this._interactionManager.externalInteract(t);for(const i of this._array){for(const e of this.updaters)e.update(i,t);i.destroyed||i.spawning||this._interactionManager.particlesInteract(i,t)}if(delete this._resizeFactor,this._needsSort){const t=this._zArray;t.sort(((t,i)=>i.position.z-t.position.z||t.id-i.id));const i=1;this._lastZIndex=t[t.length-i].position.z,this._needsSort=!1}}}class T{constructor(t){this.container=t,this.pixelRatio=1,this.reduceFactor=1}init(){const t=this.container,i=t.actualOptions;this.pixelRatio=!i.detectRetina||(0,n.B9)()?1:window.devicePixelRatio,this.reduceFactor=1;const e=this.pixelRatio,s=t.canvas;if(s.element){const t=s.element;s.size.width=t.offsetWidth*e,s.size.height=t.offsetHeight*e}const o=i.particles,a=o.move;this.maxSpeed=(0,g.VG)(a.gravity.maxSpeed)*e,this.sizeAnimationSpeed=(0,g.VG)(o.size.animation.speed)*e}initParticle(t){const i=t.options,e=this.pixelRatio,s=i.move,n=s.distance,o=t.retina;o.moveDrift=(0,g.VG)(s.drift)*e,o.moveSpeed=(0,g.VG)(s.speed)*e,o.sizeAnimationSpeed=(0,g.VG)(i.size.animation.speed)*e;const a=o.maxDistance;a.horizontal=void 0!==n.horizontal?n.horizontal*e:void 0,a.vertical=void 0!==n.vertical?n.vertical*e:void 0,o.maxSpeed=(0,g.VG)(s.gravity.maxSpeed)*e}}function M(t){return t&&!t.destroyed}function S(t,i,...e){const s=new p.J(t,i);return(0,v.Z)(s,...e),s}class D{constructor(t,i,e){this._intersectionManager=t=>{if(M(this)&&this.actualOptions.pauseOnOutsideViewport)for(const i of t)i.target===this.interactivity.element&&(i.isIntersecting?this.play():this.pause())},this._nextFrame=t=>{try{if(!this._smooth&&void 0!==this._lastFrameTime&&t<this._lastFrameTime+s.Xu/this.fpsLimit)return void this.draw(!1);this._lastFrameTime??=t;const i=function(t,i=60,e=!1){return{value:t,factor:e?60/i:60*t/s.Xu}}(t-this._lastFrameTime,this.fpsLimit,this._smooth);if(this.addLifeTime(i.value),this._lastFrameTime=t,i.value>s.Xu)return void this.draw(!1);if(this.particles.draw(i),!this.alive())return void this.destroy();this.animationStatus&&this.draw(!1)}catch(t){(0,n.tZ)().error(`${s.dI} in animation loop`,t)}},this._engine=t,this.id=Symbol(i),this.fpsLimit=120,this._smooth=!1,this._delay=0,this._duration=0,this._lifeTime=0,this._firstStart=!0,this.started=!1,this.destroyed=!1,this._paused=!0,this._lastFrameTime=0,this.zLayers=100,this.pageHidden=!1,this._sourceOptions=e,this._initialSourceOptions=e,this.retina=new T(this),this.canvas=new c(this),this.particles=new O(this._engine,this),this.pathGenerators=new Map,this.interactivity={mouse:{clicking:!1,inside:!1}},this.plugins=new Map,this.effectDrawers=new Map,this.shapeDrawers=new Map,this._options=S(this._engine,this),this.actualOptions=S(this._engine,this),this._eventListeners=new u(this),this._intersectionObserver=(0,n.BR)((t=>this._intersectionManager(t))),this._engine.dispatchEvent("containerBuilt",{container:this})}get animationStatus(){return!this._paused&&!this.pageHidden&&M(this)}get options(){return this._options}get sourceOptions(){return this._sourceOptions}addClickHandler(t){if(!M(this))return;const i=this.interactivity.element;if(!i)return;const e=(i,e,s)=>{if(!M(this))return;const n=this.retina.pixelRatio,o={x:e.x*n,y:e.y*n},a=this.particles.quadTree.queryCircle(o,s*n);t(i,a)};let s=!1,n=!1;i.addEventListener("click",(t=>{if(!M(this))return;const i=t,s={x:i.offsetX||i.clientX,y:i.offsetY||i.clientY};e(t,s,1)})),i.addEventListener("touchstart",(()=>{M(this)&&(s=!0,n=!1)})),i.addEventListener("touchmove",(()=>{M(this)&&(n=!0)})),i.addEventListener("touchend",(t=>{if(M(this)){if(s&&!n){const i=t,s=1;let n=i.touches[i.touches.length-s];if(!n&&(n=i.changedTouches[i.changedTouches.length-s],!n))return;const o=this.canvas.element,a=o?o.getBoundingClientRect():void 0,r=0,h={x:n.clientX-(a?a.left:r),y:n.clientY-(a?a.top:r)};e(t,h,Math.max(n.radiusX,n.radiusY))}s=!1,n=!1}})),i.addEventListener("touchcancel",(()=>{M(this)&&(s=!1,n=!1)}))}addLifeTime(t){this._lifeTime+=t}addPath(t,i,e=!1){return!(!M(this)||!e&&this.pathGenerators.has(t))&&(this.pathGenerators.set(t,i),!0)}alive(){return!this._duration||this._lifeTime<=this._duration}destroy(){if(!M(this))return;this.stop(),this.particles.destroy(),this.canvas.destroy();for(const[,t]of this.effectDrawers)t.destroy?.(this);for(const[,t]of this.shapeDrawers)t.destroy?.(this);for(const t of this.effectDrawers.keys())this.effectDrawers.delete(t);for(const t of this.shapeDrawers.keys())this.shapeDrawers.delete(t);this._engine.clearPlugins(this),this.destroyed=!0;const t=this._engine.dom(),i=t.findIndex((t=>t===this));if(i>=0){const e=1;t.splice(i,e)}this._engine.dispatchEvent("containerDestroyed",{container:this})}draw(t){if(!M(this))return;let i=t;const e=t=>{i&&(this._lastFrameTime=void 0,i=!1),this._nextFrame(t)};this._drawAnimationFrame=requestAnimationFrame((t=>e(t)))}async export(t,i={}){for(const[,e]of this.plugins){if(!e.export)continue;const s=await e.export(t,i);if(s.supported)return s.blob}(0,n.tZ)().error(`${s.dI} - Export plugin with type ${t} not found`)}handleClickMode(t){if(M(this)){this.particles.handleClickMode(t);for(const[,i]of this.plugins)i.handleClickMode?.(t)}}async init(){if(!M(this))return;const t=this._engine.getSupportedEffects();for(const i of t){const t=this._engine.getEffectDrawer(i);t&&this.effectDrawers.set(i,t)}const i=this._engine.getSupportedShapes();for(const t of i){const i=this._engine.getShapeDrawer(t);i&&this.shapeDrawers.set(t,i)}await this.particles.initPlugins(),this._options=S(this._engine,this,this._initialSourceOptions,this.sourceOptions),this.actualOptions=S(this._engine,this,this._options);const e=await this._engine.getAvailablePlugins(this);for(const[t,i]of e)this.plugins.set(t,i);this.retina.init(),await this.canvas.init(),this.updateActualOptions(),this.canvas.initBackground(),this.canvas.resize(),this.zLayers=this.actualOptions.zLayers,this._duration=(0,g.VG)(this.actualOptions.duration)*s.Xu,this._delay=(0,g.VG)(this.actualOptions.delay)*s.Xu,this._lifeTime=0;this.fpsLimit=this.actualOptions.fpsLimit>0?this.actualOptions.fpsLimit:120,this._smooth=this.actualOptions.smooth;for(const[,t]of this.effectDrawers)await(t.init?.(this));for(const[,t]of this.shapeDrawers)await(t.init?.(this));for(const[,t]of this.plugins)await(t.init?.());this._engine.dispatchEvent("containerInit",{container:this}),await this.particles.init(),this.particles.setDensity();for(const[,t]of this.plugins)t.particlesSetup?.();this._engine.dispatchEvent("particlesSetup",{container:this})}async loadTheme(t){M(this)&&(this._currentTheme=t,await this.refresh())}pause(){if(M(this)&&(void 0!==this._drawAnimationFrame&&(cancelAnimationFrame(this._drawAnimationFrame),delete this._drawAnimationFrame),!this._paused)){for(const[,t]of this.plugins)t.pause?.();this.pageHidden||(this._paused=!0),this._engine.dispatchEvent("containerPaused",{container:this})}}play(t){if(!M(this))return;const i=this._paused||t;if(!this._firstStart||this.actualOptions.autoPlay){if(this._paused&&(this._paused=!1),i)for(const[,t]of this.plugins)t.play&&t.play();this._engine.dispatchEvent("containerPlay",{container:this}),this.draw(i??!1)}else this._firstStart=!1}async refresh(){if(M(this))return this.stop(),this.start()}async reset(){if(M(this))return this._initialSourceOptions=void 0,this._options=S(this._engine,this),this.actualOptions=S(this._engine,this,this._options),this.refresh()}async start(){M(this)&&!this.started&&(await this.init(),this.started=!0,await new Promise((t=>{const i=async()=>{this._eventListeners.addListeners(),this.interactivity.element instanceof HTMLElement&&this._intersectionObserver&&this._intersectionObserver.observe(this.interactivity.element);for(const[,t]of this.plugins)await(t.start?.());this._engine.dispatchEvent("containerStarted",{container:this}),this.play(),t()};this._delayTimeout=setTimeout((()=>{i()}),this._delay)})))}stop(){if(M(this)&&this.started){this._delayTimeout&&(clearTimeout(this._delayTimeout),delete this._delayTimeout),this._firstStart=!0,this.started=!1,this._eventListeners.removeListeners(),this.pause(),this.particles.clear(),this.canvas.stop(),this.interactivity.element instanceof HTMLElement&&this._intersectionObserver&&this._intersectionObserver.unobserve(this.interactivity.element);for(const[,t]of this.plugins)t.stop?.();for(const t of this.plugins.keys())this.plugins.delete(t);this._sourceOptions=this._options,this._engine.dispatchEvent("containerStopped",{container:this})}}updateActualOptions(){this.actualOptions.responsive=[];const t=this.actualOptions.setResponsive(this.canvas.size.width,this.retina.pixelRatio,this._options);return this.actualOptions.setTheme(this._currentTheme),this._responsiveMaxWidth!==t&&(this._responsiveMaxWidth=t,!0)}}}}]);

package/43.min.js.LICENSE.txt

@@ -0,0 +1 @@
+/*! tsParticles Particles.js v3.3.0 by Matteo Bruni */

package/engine_dist_browser_Core_Container_js.js

@@ -4,7 +4,7 @@
  * Demo / Generator : https://particles.js.org/
  * GitHub : https://www.github.com/matteobruni/tsparticles
  * How to use? : Check the GitHub README
- * v3.2.1
+ * v3.3.0
  */
 "use strict";
 /*
@@ -23,7 +23,7 @@
   \************************************************/
 /***/ ((__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) => {
 
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   Canvas: () => (/* binding */ Canvas)\n/* harmony export */ });\n/* harmony import */ var _Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../Utils/CanvasUtils.js */ \"../../engine/dist/browser/Utils/CanvasUtils.js\");\n/* harmony import */ var _Utils_Utils_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Utils/Utils.js */ \"../../engine/dist/browser/Utils/Utils.js\");\n/* harmony import */ var _Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../Utils/ColorUtils.js */ \"../../engine/dist/browser/Utils/ColorUtils.js\");\n/* harmony import */ var _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./Utils/Constants.js */ \"../../engine/dist/browser/Core/Utils/Constants.js\");\n\n\n\n\nfunction setTransformValue(factor, newFactor, key) {\n  const newValue = newFactor[key],\n    defaultValue = 1;\n  if (newValue !== undefined) {\n    factor[key] = (factor[key] ?? defaultValue) * newValue;\n  }\n}\nfunction setStyle(canvas, style, important = false) {\n  if (!style) {\n    return;\n  }\n  const element = canvas;\n  if (!element) {\n    return;\n  }\n  const elementStyle = element.style;\n  if (!elementStyle) {\n    return;\n  }\n  for (const key in style) {\n    const value = style[key];\n    if (!value) {\n      continue;\n    }\n    elementStyle.setProperty(key, value, important ? \"important\" : \"\");\n  }\n}\nclass Canvas {\n  constructor(container) {\n    this.container = container;\n    this._applyPostDrawUpdaters = particle => {\n      for (const updater of this._postDrawUpdaters) {\n        updater.afterDraw?.(particle);\n      }\n    };\n    this._applyPreDrawUpdaters = (ctx, particle, radius, zOpacity, colorStyles, transform) => {\n      for (const updater of this._preDrawUpdaters) {\n        if (updater.getColorStyles) {\n          const {\n            fill,\n            stroke\n          } = updater.getColorStyles(particle, ctx, radius, zOpacity);\n          if (fill) {\n            colorStyles.fill = fill;\n          }\n          if (stroke) {\n            colorStyles.stroke = stroke;\n          }\n        }\n        if (updater.getTransformValues) {\n          const updaterTransform = updater.getTransformValues(particle);\n          for (const key in updaterTransform) {\n            setTransformValue(transform, updaterTransform, key);\n          }\n        }\n        updater.beforeDraw?.(particle);\n      }\n    };\n    this._applyResizePlugins = () => {\n      for (const plugin of this._resizePlugins) {\n        plugin.resize?.();\n      }\n    };\n    this._getPluginParticleColors = particle => {\n      let fColor, sColor;\n      for (const plugin of this._colorPlugins) {\n        if (!fColor && plugin.particleFillColor) {\n          fColor = (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_2__.rangeColorToHsl)(plugin.particleFillColor(particle));\n        }\n        if (!sColor && plugin.particleStrokeColor) {\n          sColor = (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_2__.rangeColorToHsl)(plugin.particleStrokeColor(particle));\n        }\n        if (fColor && sColor) {\n          break;\n        }\n      }\n      return [fColor, sColor];\n    };\n    this._initCover = async () => {\n      const options = this.container.actualOptions,\n        cover = options.backgroundMask.cover,\n        color = cover.color;\n      if (color) {\n        const coverRgb = (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_2__.rangeColorToRgb)(color);\n        if (coverRgb) {\n          const coverColor = {\n            ...coverRgb,\n            a: cover.opacity\n          };\n          this._coverColorStyle = (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_2__.getStyleFromRgb)(coverColor, coverColor.a);\n        }\n      } else {\n        await new Promise((resolve, reject) => {\n          if (!cover.image) {\n            return;\n          }\n          const img = document.createElement(\"img\");\n          img.addEventListener(\"load\", () => {\n            this._coverImage = {\n              image: img,\n              opacity: cover.opacity\n            };\n            resolve();\n          });\n          img.addEventListener(\"error\", evt => {\n            reject(evt.error);\n          });\n          img.src = cover.image;\n        });\n      }\n    };\n    this._initStyle = () => {\n      const element = this.element,\n        options = this.container.actualOptions;\n      if (!element) {\n        return;\n      }\n      if (this._fullScreen) {\n        this._originalStyle = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_1__.deepExtend)({}, element.style);\n        this._setFullScreenStyle();\n      } else {\n        this._resetOriginalStyle();\n      }\n      for (const key in options.style) {\n        if (!key || !options.style) {\n          continue;\n        }\n        const value = options.style[key];\n        if (!value) {\n          continue;\n        }\n        element.style.setProperty(key, value, \"important\");\n      }\n    };\n    this._initTrail = async () => {\n      const options = this.container.actualOptions,\n        trail = options.particles.move.trail,\n        trailFill = trail.fill;\n      if (!trail.enable) {\n        return;\n      }\n      const factorNumerator = 1,\n        opacity = factorNumerator / trail.length;\n      if (trailFill.color) {\n        const fillColor = (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_2__.rangeColorToRgb)(trailFill.color);\n        if (!fillColor) {\n          return;\n        }\n        this._trailFill = {\n          color: {\n            ...fillColor\n          },\n          opacity\n        };\n      } else {\n        await new Promise((resolve, reject) => {\n          if (!trailFill.image) {\n            return;\n          }\n          const img = document.createElement(\"img\");\n          img.addEventListener(\"load\", () => {\n            this._trailFill = {\n              image: img,\n              opacity\n            };\n            resolve();\n          });\n          img.addEventListener(\"error\", evt => {\n            reject(evt.error);\n          });\n          img.src = trailFill.image;\n        });\n      }\n    };\n    this._paintBase = baseColor => {\n      this.draw(ctx => (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__.paintBase)(ctx, this.size, baseColor));\n    };\n    this._paintImage = (image, opacity) => {\n      this.draw(ctx => (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__.paintImage)(ctx, this.size, image, opacity));\n    };\n    this._repairStyle = () => {\n      const element = this.element;\n      if (!element) {\n        return;\n      }\n      this._safeMutationObserver(observer => observer.disconnect());\n      this._initStyle();\n      this.initBackground();\n      this._safeMutationObserver(observer => observer.observe(element, {\n        attributes: true\n      }));\n    };\n    this._resetOriginalStyle = () => {\n      const element = this.element,\n        originalStyle = this._originalStyle;\n      if (!(element && originalStyle)) {\n        return;\n      }\n      setStyle(element, originalStyle);\n    };\n    this._safeMutationObserver = callback => {\n      if (!this._mutationObserver) {\n        return;\n      }\n      callback(this._mutationObserver);\n    };\n    this._setFullScreenStyle = () => {\n      const element = this.element;\n      if (!element) {\n        return;\n      }\n      const radix = 10;\n      setStyle(element, {\n        position: \"fixed\",\n        zIndex: this.container.actualOptions.fullScreen.zIndex.toString(radix),\n        top: \"0\",\n        left: \"0\",\n        width: \"100%\",\n        height: \"100%\"\n      }, true);\n    };\n    this.size = {\n      height: 0,\n      width: 0\n    };\n    this._context = null;\n    this._generated = false;\n    this._preDrawUpdaters = [];\n    this._postDrawUpdaters = [];\n    this._resizePlugins = [];\n    this._colorPlugins = [];\n  }\n  get _fullScreen() {\n    return this.container.actualOptions.fullScreen.enable;\n  }\n  clear() {\n    const options = this.container.actualOptions,\n      trail = options.particles.move.trail,\n      trailFill = this._trailFill,\n      minimumLength = 0;\n    if (options.backgroundMask.enable) {\n      this.paint();\n    } else if (trail.enable && trail.length > minimumLength && trailFill) {\n      if (trailFill.color) {\n        this._paintBase((0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_2__.getStyleFromRgb)(trailFill.color, trailFill.opacity));\n      } else if (trailFill.image) {\n        this._paintImage(trailFill.image, trailFill.opacity);\n      }\n    } else if (options.clear) {\n      this.draw(ctx => {\n        (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__.clear)(ctx, this.size);\n      });\n    }\n  }\n  destroy() {\n    this.stop();\n    if (this._generated) {\n      const element = this.element;\n      element?.remove();\n    } else {\n      this._resetOriginalStyle();\n    }\n    this._preDrawUpdaters = [];\n    this._postDrawUpdaters = [];\n    this._resizePlugins = [];\n    this._colorPlugins = [];\n  }\n  draw(cb) {\n    const ctx = this._context;\n    if (!ctx) {\n      return;\n    }\n    return cb(ctx);\n  }\n  drawAsync(cb) {\n    const ctx = this._context;\n    if (!ctx) {\n      return Promise.resolve(undefined);\n    }\n    return cb(ctx);\n  }\n  async drawParticle(particle, delta) {\n    if (particle.spawning || particle.destroyed) {\n      return;\n    }\n    const radius = particle.getRadius(),\n      minimumSize = 0;\n    if (radius <= minimumSize) {\n      return;\n    }\n    const pfColor = particle.getFillColor(),\n      psColor = particle.getStrokeColor() ?? pfColor;\n    let [fColor, sColor] = this._getPluginParticleColors(particle);\n    if (!fColor) {\n      fColor = pfColor;\n    }\n    if (!sColor) {\n      sColor = psColor;\n    }\n    if (!fColor && !sColor) {\n      return;\n    }\n    await this.drawAsync(async ctx => {\n      const container = this.container,\n        options = container.actualOptions,\n        zIndexOptions = particle.options.zIndex,\n        zIndexFactorOffset = 1,\n        zIndexFactor = zIndexFactorOffset - particle.zIndexFactor,\n        zOpacityFactor = zIndexFactor ** zIndexOptions.opacityRate,\n        defaultOpacity = 1,\n        opacity = particle.bubble.opacity ?? particle.opacity?.value ?? defaultOpacity,\n        strokeOpacity = particle.strokeOpacity ?? opacity,\n        zOpacity = opacity * zOpacityFactor,\n        zStrokeOpacity = strokeOpacity * zOpacityFactor,\n        transform = {},\n        colorStyles = {\n          fill: fColor ? (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_2__.getStyleFromHsl)(fColor, zOpacity) : undefined\n        };\n      colorStyles.stroke = sColor ? (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_2__.getStyleFromHsl)(sColor, zStrokeOpacity) : colorStyles.fill;\n      this._applyPreDrawUpdaters(ctx, particle, radius, zOpacity, colorStyles, transform);\n      await (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__.drawParticle)({\n        container,\n        context: ctx,\n        particle,\n        delta,\n        colorStyles,\n        backgroundMask: options.backgroundMask.enable,\n        composite: options.backgroundMask.composite,\n        radius: radius * zIndexFactor ** zIndexOptions.sizeRate,\n        opacity: zOpacity,\n        shadow: particle.options.shadow,\n        transform\n      });\n      this._applyPostDrawUpdaters(particle);\n    });\n  }\n  async drawParticlePlugin(plugin, particle, delta) {\n    await this.drawAsync(ctx => (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__.drawParticlePlugin)(ctx, plugin, particle, delta));\n  }\n  async drawPlugin(plugin, delta) {\n    await this.drawAsync(ctx => (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__.drawPlugin)(ctx, plugin, delta));\n  }\n  async init() {\n    this._safeMutationObserver(obs => obs.disconnect());\n    this._mutationObserver = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_1__.safeMutationObserver)(records => {\n      for (const record of records) {\n        if (record.type === \"attributes\" && record.attributeName === \"style\") {\n          this._repairStyle();\n        }\n      }\n    });\n    this.resize();\n    this._initStyle();\n    await this._initCover();\n    try {\n      await this._initTrail();\n    } catch (e) {\n      (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_1__.getLogger)().error(e);\n    }\n    this.initBackground();\n    this._safeMutationObserver(obs => {\n      if (!this.element) {\n        return;\n      }\n      obs.observe(this.element, {\n        attributes: true\n      });\n    });\n    this.initUpdaters();\n    this.initPlugins();\n    this.paint();\n  }\n  initBackground() {\n    const options = this.container.actualOptions,\n      background = options.background,\n      element = this.element;\n    if (!element) {\n      return;\n    }\n    const elementStyle = element.style;\n    if (!elementStyle) {\n      return;\n    }\n    if (background.color) {\n      const color = (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_2__.rangeColorToRgb)(background.color);\n      elementStyle.backgroundColor = color ? (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_2__.getStyleFromRgb)(color, background.opacity) : \"\";\n    } else {\n      elementStyle.backgroundColor = \"\";\n    }\n    elementStyle.backgroundImage = background.image || \"\";\n    elementStyle.backgroundPosition = background.position || \"\";\n    elementStyle.backgroundRepeat = background.repeat || \"\";\n    elementStyle.backgroundSize = background.size || \"\";\n  }\n  initPlugins() {\n    this._resizePlugins = [];\n    for (const [, plugin] of this.container.plugins) {\n      if (plugin.resize) {\n        this._resizePlugins.push(plugin);\n      }\n      if (plugin.particleFillColor ?? plugin.particleStrokeColor) {\n        this._colorPlugins.push(plugin);\n      }\n    }\n  }\n  initUpdaters() {\n    this._preDrawUpdaters = [];\n    this._postDrawUpdaters = [];\n    for (const updater of this.container.particles.updaters) {\n      if (updater.afterDraw) {\n        this._postDrawUpdaters.push(updater);\n      }\n      if (updater.getColorStyles ?? updater.getTransformValues ?? updater.beforeDraw) {\n        this._preDrawUpdaters.push(updater);\n      }\n    }\n  }\n  loadCanvas(canvas) {\n    if (this._generated && this.element) {\n      this.element.remove();\n    }\n    this._generated = canvas.dataset && _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_3__.generatedAttribute in canvas.dataset ? canvas.dataset[_Utils_Constants_js__WEBPACK_IMPORTED_MODULE_3__.generatedAttribute] === \"true\" : this._generated;\n    this.element = canvas;\n    this.element.ariaHidden = \"true\";\n    this._originalStyle = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_1__.deepExtend)({}, this.element.style);\n    this.size.height = canvas.offsetHeight;\n    this.size.width = canvas.offsetWidth;\n    this._context = this.element.getContext(\"2d\");\n    this._safeMutationObserver(obs => {\n      if (!this.element) {\n        return;\n      }\n      obs.observe(this.element, {\n        attributes: true\n      });\n    });\n    this.container.retina.init();\n    this.initBackground();\n  }\n  paint() {\n    const options = this.container.actualOptions;\n    this.draw(ctx => {\n      if (options.backgroundMask.enable && options.backgroundMask.cover) {\n        (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__.clear)(ctx, this.size);\n        if (this._coverImage) {\n          this._paintImage(this._coverImage.image, this._coverImage.opacity);\n        } else if (this._coverColorStyle) {\n          this._paintBase(this._coverColorStyle);\n        } else {\n          this._paintBase();\n        }\n      } else {\n        this._paintBase();\n      }\n    });\n  }\n  resize() {\n    if (!this.element) {\n      return false;\n    }\n    const container = this.container,\n      pxRatio = container.retina.pixelRatio,\n      size = container.canvas.size,\n      newSize = {\n        width: this.element.offsetWidth * pxRatio,\n        height: this.element.offsetHeight * pxRatio\n      };\n    if (newSize.height === size.height && newSize.width === size.width && newSize.height === this.element.height && newSize.width === this.element.width) {\n      return false;\n    }\n    const oldSize = {\n      ...size\n    };\n    this.element.width = size.width = this.element.offsetWidth * pxRatio;\n    this.element.height = size.height = this.element.offsetHeight * pxRatio;\n    if (this.container.started) {\n      container.particles.setResizeFactor({\n        width: size.width / oldSize.width,\n        height: size.height / oldSize.height\n      });\n    }\n    return true;\n  }\n  stop() {\n    this._safeMutationObserver(obs => obs.disconnect());\n    this._mutationObserver = undefined;\n    this.draw(ctx => (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__.clear)(ctx, this.size));\n  }\n  async windowResize() {\n    if (!this.element || !this.resize()) {\n      return;\n    }\n    const container = this.container,\n      needsRefresh = container.updateActualOptions();\n    await container.particles.setDensity();\n    this._applyResizePlugins();\n    if (needsRefresh) {\n      await container.refresh();\n    }\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/pjs/../../engine/dist/browser/Core/Canvas.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   Canvas: () => (/* binding */ Canvas)\n/* harmony export */ });\n/* harmony import */ var _Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../Utils/CanvasUtils.js */ \"../../engine/dist/browser/Utils/CanvasUtils.js\");\n/* harmony import */ var _Utils_Utils_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Utils/Utils.js */ \"../../engine/dist/browser/Utils/Utils.js\");\n/* harmony import */ var _Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../Utils/ColorUtils.js */ \"../../engine/dist/browser/Utils/ColorUtils.js\");\n/* harmony import */ var _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./Utils/Constants.js */ \"../../engine/dist/browser/Core/Utils/Constants.js\");\n\n\n\n\nfunction setTransformValue(factor, newFactor, key) {\n  const newValue = newFactor[key],\n    defaultValue = 1;\n  if (newValue !== undefined) {\n    factor[key] = (factor[key] ?? defaultValue) * newValue;\n  }\n}\nfunction setStyle(canvas, style, important = false) {\n  if (!style) {\n    return;\n  }\n  const element = canvas;\n  if (!element) {\n    return;\n  }\n  const elementStyle = element.style;\n  if (!elementStyle) {\n    return;\n  }\n  for (const key in style) {\n    const value = style[key];\n    if (!value) {\n      continue;\n    }\n    elementStyle.setProperty(key, value, important ? \"important\" : \"\");\n  }\n}\nclass Canvas {\n  constructor(container) {\n    this.container = container;\n    this._applyPostDrawUpdaters = particle => {\n      for (const updater of this._postDrawUpdaters) {\n        updater.afterDraw?.(particle);\n      }\n    };\n    this._applyPreDrawUpdaters = (ctx, particle, radius, zOpacity, colorStyles, transform) => {\n      for (const updater of this._preDrawUpdaters) {\n        if (updater.getColorStyles) {\n          const {\n            fill,\n            stroke\n          } = updater.getColorStyles(particle, ctx, radius, zOpacity);\n          if (fill) {\n            colorStyles.fill = fill;\n          }\n          if (stroke) {\n            colorStyles.stroke = stroke;\n          }\n        }\n        if (updater.getTransformValues) {\n          const updaterTransform = updater.getTransformValues(particle);\n          for (const key in updaterTransform) {\n            setTransformValue(transform, updaterTransform, key);\n          }\n        }\n        updater.beforeDraw?.(particle);\n      }\n    };\n    this._applyResizePlugins = () => {\n      for (const plugin of this._resizePlugins) {\n        plugin.resize?.();\n      }\n    };\n    this._getPluginParticleColors = particle => {\n      let fColor, sColor;\n      for (const plugin of this._colorPlugins) {\n        if (!fColor && plugin.particleFillColor) {\n          fColor = (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_2__.rangeColorToHsl)(plugin.particleFillColor(particle));\n        }\n        if (!sColor && plugin.particleStrokeColor) {\n          sColor = (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_2__.rangeColorToHsl)(plugin.particleStrokeColor(particle));\n        }\n        if (fColor && sColor) {\n          break;\n        }\n      }\n      return [fColor, sColor];\n    };\n    this._initCover = async () => {\n      const options = this.container.actualOptions,\n        cover = options.backgroundMask.cover,\n        color = cover.color;\n      if (color) {\n        const coverRgb = (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_2__.rangeColorToRgb)(color);\n        if (coverRgb) {\n          const coverColor = {\n            ...coverRgb,\n            a: cover.opacity\n          };\n          this._coverColorStyle = (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_2__.getStyleFromRgb)(coverColor, coverColor.a);\n        }\n      } else {\n        await new Promise((resolve, reject) => {\n          if (!cover.image) {\n            return;\n          }\n          const img = document.createElement(\"img\");\n          img.addEventListener(\"load\", () => {\n            this._coverImage = {\n              image: img,\n              opacity: cover.opacity\n            };\n            resolve();\n          });\n          img.addEventListener(\"error\", evt => {\n            reject(evt.error);\n          });\n          img.src = cover.image;\n        });\n      }\n    };\n    this._initStyle = () => {\n      const element = this.element,\n        options = this.container.actualOptions;\n      if (!element) {\n        return;\n      }\n      if (this._fullScreen) {\n        this._originalStyle = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_1__.deepExtend)({}, element.style);\n        this._setFullScreenStyle();\n      } else {\n        this._resetOriginalStyle();\n      }\n      for (const key in options.style) {\n        if (!key || !options.style) {\n          continue;\n        }\n        const value = options.style[key];\n        if (!value) {\n          continue;\n        }\n        element.style.setProperty(key, value, \"important\");\n      }\n    };\n    this._initTrail = async () => {\n      const options = this.container.actualOptions,\n        trail = options.particles.move.trail,\n        trailFill = trail.fill;\n      if (!trail.enable) {\n        return;\n      }\n      const factorNumerator = 1,\n        opacity = factorNumerator / trail.length;\n      if (trailFill.color) {\n        const fillColor = (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_2__.rangeColorToRgb)(trailFill.color);\n        if (!fillColor) {\n          return;\n        }\n        this._trailFill = {\n          color: {\n            ...fillColor\n          },\n          opacity\n        };\n      } else {\n        await new Promise((resolve, reject) => {\n          if (!trailFill.image) {\n            return;\n          }\n          const img = document.createElement(\"img\");\n          img.addEventListener(\"load\", () => {\n            this._trailFill = {\n              image: img,\n              opacity\n            };\n            resolve();\n          });\n          img.addEventListener(\"error\", evt => {\n            reject(evt.error);\n          });\n          img.src = trailFill.image;\n        });\n      }\n    };\n    this._paintBase = baseColor => {\n      this.draw(ctx => (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__.paintBase)(ctx, this.size, baseColor));\n    };\n    this._paintImage = (image, opacity) => {\n      this.draw(ctx => (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__.paintImage)(ctx, this.size, image, opacity));\n    };\n    this._repairStyle = () => {\n      const element = this.element;\n      if (!element) {\n        return;\n      }\n      this._safeMutationObserver(observer => observer.disconnect());\n      this._initStyle();\n      this.initBackground();\n      this._safeMutationObserver(observer => observer.observe(element, {\n        attributes: true\n      }));\n    };\n    this._resetOriginalStyle = () => {\n      const element = this.element,\n        originalStyle = this._originalStyle;\n      if (!(element && originalStyle)) {\n        return;\n      }\n      setStyle(element, originalStyle);\n    };\n    this._safeMutationObserver = callback => {\n      if (!this._mutationObserver) {\n        return;\n      }\n      callback(this._mutationObserver);\n    };\n    this._setFullScreenStyle = () => {\n      const element = this.element;\n      if (!element) {\n        return;\n      }\n      const radix = 10;\n      setStyle(element, {\n        position: \"fixed\",\n        zIndex: this.container.actualOptions.fullScreen.zIndex.toString(radix),\n        top: \"0\",\n        left: \"0\",\n        width: \"100%\",\n        height: \"100%\"\n      }, true);\n    };\n    this.size = {\n      height: 0,\n      width: 0\n    };\n    this._context = null;\n    this._generated = false;\n    this._preDrawUpdaters = [];\n    this._postDrawUpdaters = [];\n    this._resizePlugins = [];\n    this._colorPlugins = [];\n  }\n  get _fullScreen() {\n    return this.container.actualOptions.fullScreen.enable;\n  }\n  clear() {\n    const options = this.container.actualOptions,\n      trail = options.particles.move.trail,\n      trailFill = this._trailFill,\n      minimumLength = 0;\n    if (options.backgroundMask.enable) {\n      this.paint();\n    } else if (trail.enable && trail.length > minimumLength && trailFill) {\n      if (trailFill.color) {\n        this._paintBase((0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_2__.getStyleFromRgb)(trailFill.color, trailFill.opacity));\n      } else if (trailFill.image) {\n        this._paintImage(trailFill.image, trailFill.opacity);\n      }\n    } else if (options.clear) {\n      this.draw(ctx => {\n        (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__.clear)(ctx, this.size);\n      });\n    }\n  }\n  destroy() {\n    this.stop();\n    if (this._generated) {\n      const element = this.element;\n      element?.remove();\n    } else {\n      this._resetOriginalStyle();\n    }\n    this._preDrawUpdaters = [];\n    this._postDrawUpdaters = [];\n    this._resizePlugins = [];\n    this._colorPlugins = [];\n  }\n  draw(cb) {\n    const ctx = this._context;\n    if (!ctx) {\n      return;\n    }\n    return cb(ctx);\n  }\n  drawAsync(cb) {\n    const ctx = this._context;\n    if (!ctx) {\n      return undefined;\n    }\n    return cb(ctx);\n  }\n  drawParticle(particle, delta) {\n    if (particle.spawning || particle.destroyed) {\n      return;\n    }\n    const radius = particle.getRadius(),\n      minimumSize = 0;\n    if (radius <= minimumSize) {\n      return;\n    }\n    const pfColor = particle.getFillColor(),\n      psColor = particle.getStrokeColor() ?? pfColor;\n    let [fColor, sColor] = this._getPluginParticleColors(particle);\n    if (!fColor) {\n      fColor = pfColor;\n    }\n    if (!sColor) {\n      sColor = psColor;\n    }\n    if (!fColor && !sColor) {\n      return;\n    }\n    this.draw(ctx => {\n      const container = this.container,\n        options = container.actualOptions,\n        zIndexOptions = particle.options.zIndex,\n        zIndexFactorOffset = 1,\n        zIndexFactor = zIndexFactorOffset - particle.zIndexFactor,\n        zOpacityFactor = zIndexFactor ** zIndexOptions.opacityRate,\n        defaultOpacity = 1,\n        opacity = particle.bubble.opacity ?? particle.opacity?.value ?? defaultOpacity,\n        strokeOpacity = particle.strokeOpacity ?? opacity,\n        zOpacity = opacity * zOpacityFactor,\n        zStrokeOpacity = strokeOpacity * zOpacityFactor,\n        transform = {},\n        colorStyles = {\n          fill: fColor ? (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_2__.getStyleFromHsl)(fColor, zOpacity) : undefined\n        };\n      colorStyles.stroke = sColor ? (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_2__.getStyleFromHsl)(sColor, zStrokeOpacity) : colorStyles.fill;\n      this._applyPreDrawUpdaters(ctx, particle, radius, zOpacity, colorStyles, transform);\n      (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__.drawParticle)({\n        container,\n        context: ctx,\n        particle,\n        delta,\n        colorStyles,\n        backgroundMask: options.backgroundMask.enable,\n        composite: options.backgroundMask.composite,\n        radius: radius * zIndexFactor ** zIndexOptions.sizeRate,\n        opacity: zOpacity,\n        shadow: particle.options.shadow,\n        transform\n      });\n      this._applyPostDrawUpdaters(particle);\n    });\n  }\n  drawParticlePlugin(plugin, particle, delta) {\n    this.draw(ctx => (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__.drawParticlePlugin)(ctx, plugin, particle, delta));\n  }\n  drawPlugin(plugin, delta) {\n    this.draw(ctx => (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__.drawPlugin)(ctx, plugin, delta));\n  }\n  async init() {\n    this._safeMutationObserver(obs => obs.disconnect());\n    this._mutationObserver = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_1__.safeMutationObserver)(records => {\n      for (const record of records) {\n        if (record.type === \"attributes\" && record.attributeName === \"style\") {\n          this._repairStyle();\n        }\n      }\n    });\n    this.resize();\n    this._initStyle();\n    await this._initCover();\n    try {\n      await this._initTrail();\n    } catch (e) {\n      (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_1__.getLogger)().error(e);\n    }\n    this.initBackground();\n    this._safeMutationObserver(obs => {\n      if (!this.element) {\n        return;\n      }\n      obs.observe(this.element, {\n        attributes: true\n      });\n    });\n    this.initUpdaters();\n    this.initPlugins();\n    this.paint();\n  }\n  initBackground() {\n    const options = this.container.actualOptions,\n      background = options.background,\n      element = this.element;\n    if (!element) {\n      return;\n    }\n    const elementStyle = element.style;\n    if (!elementStyle) {\n      return;\n    }\n    if (background.color) {\n      const color = (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_2__.rangeColorToRgb)(background.color);\n      elementStyle.backgroundColor = color ? (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_2__.getStyleFromRgb)(color, background.opacity) : \"\";\n    } else {\n      elementStyle.backgroundColor = \"\";\n    }\n    elementStyle.backgroundImage = background.image || \"\";\n    elementStyle.backgroundPosition = background.position || \"\";\n    elementStyle.backgroundRepeat = background.repeat || \"\";\n    elementStyle.backgroundSize = background.size || \"\";\n  }\n  initPlugins() {\n    this._resizePlugins = [];\n    for (const [, plugin] of this.container.plugins) {\n      if (plugin.resize) {\n        this._resizePlugins.push(plugin);\n      }\n      if (plugin.particleFillColor ?? plugin.particleStrokeColor) {\n        this._colorPlugins.push(plugin);\n      }\n    }\n  }\n  initUpdaters() {\n    this._preDrawUpdaters = [];\n    this._postDrawUpdaters = [];\n    for (const updater of this.container.particles.updaters) {\n      if (updater.afterDraw) {\n        this._postDrawUpdaters.push(updater);\n      }\n      if (updater.getColorStyles ?? updater.getTransformValues ?? updater.beforeDraw) {\n        this._preDrawUpdaters.push(updater);\n      }\n    }\n  }\n  loadCanvas(canvas) {\n    if (this._generated && this.element) {\n      this.element.remove();\n    }\n    this._generated = canvas.dataset && _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_3__.generatedAttribute in canvas.dataset ? canvas.dataset[_Utils_Constants_js__WEBPACK_IMPORTED_MODULE_3__.generatedAttribute] === \"true\" : this._generated;\n    this.element = canvas;\n    this.element.ariaHidden = \"true\";\n    this._originalStyle = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_1__.deepExtend)({}, this.element.style);\n    this.size.height = canvas.offsetHeight;\n    this.size.width = canvas.offsetWidth;\n    this._context = this.element.getContext(\"2d\");\n    this._safeMutationObserver(obs => {\n      if (!this.element) {\n        return;\n      }\n      obs.observe(this.element, {\n        attributes: true\n      });\n    });\n    this.container.retina.init();\n    this.initBackground();\n  }\n  paint() {\n    const options = this.container.actualOptions;\n    this.draw(ctx => {\n      if (options.backgroundMask.enable && options.backgroundMask.cover) {\n        (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__.clear)(ctx, this.size);\n        if (this._coverImage) {\n          this._paintImage(this._coverImage.image, this._coverImage.opacity);\n        } else if (this._coverColorStyle) {\n          this._paintBase(this._coverColorStyle);\n        } else {\n          this._paintBase();\n        }\n      } else {\n        this._paintBase();\n      }\n    });\n  }\n  resize() {\n    if (!this.element) {\n      return false;\n    }\n    const container = this.container,\n      pxRatio = container.retina.pixelRatio,\n      size = container.canvas.size,\n      newSize = {\n        width: this.element.offsetWidth * pxRatio,\n        height: this.element.offsetHeight * pxRatio\n      };\n    if (newSize.height === size.height && newSize.width === size.width && newSize.height === this.element.height && newSize.width === this.element.width) {\n      return false;\n    }\n    const oldSize = {\n      ...size\n    };\n    this.element.width = size.width = this.element.offsetWidth * pxRatio;\n    this.element.height = size.height = this.element.offsetHeight * pxRatio;\n    if (this.container.started) {\n      container.particles.setResizeFactor({\n        width: size.width / oldSize.width,\n        height: size.height / oldSize.height\n      });\n    }\n    return true;\n  }\n  stop() {\n    this._safeMutationObserver(obs => obs.disconnect());\n    this._mutationObserver = undefined;\n    this.draw(ctx => (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__.clear)(ctx, this.size));\n  }\n  async windowResize() {\n    if (!this.element || !this.resize()) {\n      return;\n    }\n    const container = this.container,\n      needsRefresh = container.updateActualOptions();\n    container.particles.setDensity();\n    this._applyResizePlugins();\n    if (needsRefresh) {\n      await container.refresh();\n    }\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/pjs/../../engine/dist/browser/Core/Canvas.js?");
 
 /***/ }),
 
@@ -33,7 +33,17 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
   \***************************************************/
 /***/ ((__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) => {
 
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   Container: () => (/* binding */ Container)\n/* harmony export */ });\n/* harmony import */ var _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Utils/Constants.js */ \"../../engine/dist/browser/Core/Utils/Constants.js\");\n/* harmony import */ var _Utils_Utils_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Utils/Utils.js */ \"../../engine/dist/browser/Utils/Utils.js\");\n/* harmony import */ var _Canvas_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Canvas.js */ \"../../engine/dist/browser/Core/Canvas.js\");\n/* harmony import */ var _Utils_EventListeners_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./Utils/EventListeners.js */ \"../../engine/dist/browser/Core/Utils/EventListeners.js\");\n/* harmony import */ var _Options_Classes_Options_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../Options/Classes/Options.js */ \"../../engine/dist/browser/Options/Classes/Options.js\");\n/* harmony import */ var _Particles_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./Particles.js */ \"../../engine/dist/browser/Core/Particles.js\");\n/* harmony import */ var _Retina_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./Retina.js */ \"../../engine/dist/browser/Core/Retina.js\");\n/* harmony import */ var _Utils_NumberUtils_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../Utils/NumberUtils.js */ \"../../engine/dist/browser/Utils/NumberUtils.js\");\n/* harmony import */ var _Utils_OptionsUtils_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../Utils/OptionsUtils.js */ \"../../engine/dist/browser/Utils/OptionsUtils.js\");\n\n\n\n\n\n\n\n\n\nfunction guardCheck(container) {\n  return container && !container.destroyed;\n}\nconst defaultFps = 60;\nfunction initDelta(value, fpsLimit = defaultFps, smooth = false) {\n  return {\n    value,\n    factor: smooth ? defaultFps / fpsLimit : defaultFps * value / _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.millisecondsToSeconds\n  };\n}\nfunction loadContainerOptions(engine, container, ...sourceOptionsArr) {\n  const options = new _Options_Classes_Options_js__WEBPACK_IMPORTED_MODULE_4__.Options(engine, container);\n  (0,_Utils_OptionsUtils_js__WEBPACK_IMPORTED_MODULE_8__.loadOptions)(options, ...sourceOptionsArr);\n  return options;\n}\nclass Container {\n  constructor(engine, id, sourceOptions) {\n    this._intersectionManager = entries => {\n      if (!guardCheck(this) || !this.actualOptions.pauseOnOutsideViewport) {\n        return;\n      }\n      for (const entry of entries) {\n        if (entry.target !== this.interactivity.element) {\n          continue;\n        }\n        if (entry.isIntersecting) {\n          this.play();\n        } else {\n          this.pause();\n        }\n      }\n    };\n    this._nextFrame = async timestamp => {\n      try {\n        if (!this._smooth && this._lastFrameTime !== undefined && timestamp < this._lastFrameTime + _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.millisecondsToSeconds / this.fpsLimit) {\n          this.draw(false);\n          return;\n        }\n        this._lastFrameTime ??= timestamp;\n        const delta = initDelta(timestamp - this._lastFrameTime, this.fpsLimit, this._smooth);\n        this.addLifeTime(delta.value);\n        this._lastFrameTime = timestamp;\n        if (delta.value > _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.millisecondsToSeconds) {\n          this.draw(false);\n          return;\n        }\n        await this.particles.draw(delta);\n        if (!this.alive()) {\n          this.destroy();\n          return;\n        }\n        if (this.animationStatus) {\n          this.draw(false);\n        }\n      } catch (e) {\n        (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_1__.getLogger)().error(`${_Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.errorPrefix} in animation loop`, e);\n      }\n    };\n    this._engine = engine;\n    this.id = Symbol(id);\n    this.fpsLimit = 120;\n    this._smooth = false;\n    this._delay = 0;\n    this._duration = 0;\n    this._lifeTime = 0;\n    this._firstStart = true;\n    this.started = false;\n    this.destroyed = false;\n    this._paused = true;\n    this._lastFrameTime = 0;\n    this.zLayers = 100;\n    this.pageHidden = false;\n    this._sourceOptions = sourceOptions;\n    this._initialSourceOptions = sourceOptions;\n    this.retina = new _Retina_js__WEBPACK_IMPORTED_MODULE_6__.Retina(this);\n    this.canvas = new _Canvas_js__WEBPACK_IMPORTED_MODULE_2__.Canvas(this);\n    this.particles = new _Particles_js__WEBPACK_IMPORTED_MODULE_5__.Particles(this._engine, this);\n    this.pathGenerators = new Map();\n    this.interactivity = {\n      mouse: {\n        clicking: false,\n        inside: false\n      }\n    };\n    this.plugins = new Map();\n    this.effectDrawers = new Map();\n    this.shapeDrawers = new Map();\n    this._options = loadContainerOptions(this._engine, this);\n    this.actualOptions = loadContainerOptions(this._engine, this);\n    this._eventListeners = new _Utils_EventListeners_js__WEBPACK_IMPORTED_MODULE_3__.EventListeners(this);\n    this._intersectionObserver = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_1__.safeIntersectionObserver)(entries => this._intersectionManager(entries));\n    this._engine.dispatchEvent(\"containerBuilt\", {\n      container: this\n    });\n  }\n  get animationStatus() {\n    return !this._paused && !this.pageHidden && guardCheck(this);\n  }\n  get options() {\n    return this._options;\n  }\n  get sourceOptions() {\n    return this._sourceOptions;\n  }\n  addClickHandler(callback) {\n    if (!guardCheck(this)) {\n      return;\n    }\n    const el = this.interactivity.element;\n    if (!el) {\n      return;\n    }\n    const clickOrTouchHandler = (e, pos, radius) => {\n      if (!guardCheck(this)) {\n        return;\n      }\n      const pxRatio = this.retina.pixelRatio,\n        posRetina = {\n          x: pos.x * pxRatio,\n          y: pos.y * pxRatio\n        },\n        particles = this.particles.quadTree.queryCircle(posRetina, radius * pxRatio);\n      callback(e, particles);\n    };\n    const clickHandler = e => {\n      if (!guardCheck(this)) {\n        return;\n      }\n      const mouseEvent = e,\n        pos = {\n          x: mouseEvent.offsetX || mouseEvent.clientX,\n          y: mouseEvent.offsetY || mouseEvent.clientY\n        },\n        radius = 1;\n      clickOrTouchHandler(e, pos, radius);\n    };\n    const touchStartHandler = () => {\n      if (!guardCheck(this)) {\n        return;\n      }\n      touched = true;\n      touchMoved = false;\n    };\n    const touchMoveHandler = () => {\n      if (!guardCheck(this)) {\n        return;\n      }\n      touchMoved = true;\n    };\n    const touchEndHandler = e => {\n      if (!guardCheck(this)) {\n        return;\n      }\n      if (touched && !touchMoved) {\n        const touchEvent = e;\n        const lengthOffset = 1;\n        let lastTouch = touchEvent.touches[touchEvent.touches.length - lengthOffset];\n        if (!lastTouch) {\n          lastTouch = touchEvent.changedTouches[touchEvent.changedTouches.length - lengthOffset];\n          if (!lastTouch) {\n            return;\n          }\n        }\n        const element = this.canvas.element,\n          canvasRect = element ? element.getBoundingClientRect() : undefined,\n          minCoordinate = 0,\n          pos = {\n            x: lastTouch.clientX - (canvasRect ? canvasRect.left : minCoordinate),\n            y: lastTouch.clientY - (canvasRect ? canvasRect.top : minCoordinate)\n          };\n        clickOrTouchHandler(e, pos, Math.max(lastTouch.radiusX, lastTouch.radiusY));\n      }\n      touched = false;\n      touchMoved = false;\n    };\n    const touchCancelHandler = () => {\n      if (!guardCheck(this)) {\n        return;\n      }\n      touched = false;\n      touchMoved = false;\n    };\n    let touched = false,\n      touchMoved = false;\n    el.addEventListener(\"click\", clickHandler);\n    el.addEventListener(\"touchstart\", touchStartHandler);\n    el.addEventListener(\"touchmove\", touchMoveHandler);\n    el.addEventListener(\"touchend\", touchEndHandler);\n    el.addEventListener(\"touchcancel\", touchCancelHandler);\n  }\n  addLifeTime(value) {\n    this._lifeTime += value;\n  }\n  addPath(key, generator, override = false) {\n    if (!guardCheck(this) || !override && this.pathGenerators.has(key)) {\n      return false;\n    }\n    this.pathGenerators.set(key, generator);\n    return true;\n  }\n  alive() {\n    return !this._duration || this._lifeTime <= this._duration;\n  }\n  destroy() {\n    if (!guardCheck(this)) {\n      return;\n    }\n    this.stop();\n    this.particles.destroy();\n    this.canvas.destroy();\n    for (const [, effectDrawer] of this.effectDrawers) {\n      effectDrawer.destroy?.(this);\n    }\n    for (const [, shapeDrawer] of this.shapeDrawers) {\n      shapeDrawer.destroy?.(this);\n    }\n    for (const key of this.effectDrawers.keys()) {\n      this.effectDrawers.delete(key);\n    }\n    for (const key of this.shapeDrawers.keys()) {\n      this.shapeDrawers.delete(key);\n    }\n    this._engine.clearPlugins(this);\n    this.destroyed = true;\n    const mainArr = this._engine.dom(),\n      idx = mainArr.findIndex(t => t === this),\n      minIndex = 0;\n    if (idx >= minIndex) {\n      const deleteCount = 1;\n      mainArr.splice(idx, deleteCount);\n    }\n    this._engine.dispatchEvent(\"containerDestroyed\", {\n      container: this\n    });\n  }\n  draw(force) {\n    if (!guardCheck(this)) {\n      return;\n    }\n    let refreshTime = force;\n    const frame = async timestamp => {\n      if (refreshTime) {\n        this._lastFrameTime = undefined;\n        refreshTime = false;\n      }\n      await this._nextFrame(timestamp);\n    };\n    this._drawAnimationFrame = requestAnimationFrame(timestamp => void frame(timestamp));\n  }\n  async export(type, options = {}) {\n    for (const [, plugin] of this.plugins) {\n      if (!plugin.export) {\n        continue;\n      }\n      const res = await plugin.export(type, options);\n      if (!res.supported) {\n        continue;\n      }\n      return res.blob;\n    }\n    (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_1__.getLogger)().error(`${_Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.errorPrefix} - Export plugin with type ${type} not found`);\n  }\n  handleClickMode(mode) {\n    if (!guardCheck(this)) {\n      return;\n    }\n    this.particles.handleClickMode(mode);\n    for (const [, plugin] of this.plugins) {\n      plugin.handleClickMode?.(mode);\n    }\n  }\n  async init() {\n    if (!guardCheck(this)) {\n      return;\n    }\n    const effects = this._engine.getSupportedEffects();\n    for (const type of effects) {\n      const drawer = this._engine.getEffectDrawer(type);\n      if (drawer) {\n        this.effectDrawers.set(type, drawer);\n      }\n    }\n    const shapes = this._engine.getSupportedShapes();\n    for (const type of shapes) {\n      const drawer = this._engine.getShapeDrawer(type);\n      if (drawer) {\n        this.shapeDrawers.set(type, drawer);\n      }\n    }\n    await this.particles.initPlugins();\n    this._options = loadContainerOptions(this._engine, this, this._initialSourceOptions, this.sourceOptions);\n    this.actualOptions = loadContainerOptions(this._engine, this, this._options);\n    const availablePlugins = await this._engine.getAvailablePlugins(this);\n    for (const [id, plugin] of availablePlugins) {\n      this.plugins.set(id, plugin);\n    }\n    this.retina.init();\n    await this.canvas.init();\n    this.updateActualOptions();\n    this.canvas.initBackground();\n    this.canvas.resize();\n    this.zLayers = this.actualOptions.zLayers;\n    this._duration = (0,_Utils_NumberUtils_js__WEBPACK_IMPORTED_MODULE_7__.getRangeValue)(this.actualOptions.duration) * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.millisecondsToSeconds;\n    this._delay = (0,_Utils_NumberUtils_js__WEBPACK_IMPORTED_MODULE_7__.getRangeValue)(this.actualOptions.delay) * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.millisecondsToSeconds;\n    this._lifeTime = 0;\n    const defaultFpsLimit = 120,\n      minFpsLimit = 0;\n    this.fpsLimit = this.actualOptions.fpsLimit > minFpsLimit ? this.actualOptions.fpsLimit : defaultFpsLimit;\n    this._smooth = this.actualOptions.smooth;\n    for (const [, drawer] of this.effectDrawers) {\n      await drawer.init?.(this);\n    }\n    for (const [, drawer] of this.shapeDrawers) {\n      await drawer.init?.(this);\n    }\n    for (const [, plugin] of this.plugins) {\n      await plugin.init?.();\n    }\n    this._engine.dispatchEvent(\"containerInit\", {\n      container: this\n    });\n    await this.particles.init();\n    await this.particles.setDensity();\n    for (const [, plugin] of this.plugins) {\n      plugin.particlesSetup?.();\n    }\n    this._engine.dispatchEvent(\"particlesSetup\", {\n      container: this\n    });\n  }\n  async loadTheme(name) {\n    if (!guardCheck(this)) {\n      return;\n    }\n    this._currentTheme = name;\n    await this.refresh();\n  }\n  pause() {\n    if (!guardCheck(this)) {\n      return;\n    }\n    if (this._drawAnimationFrame !== undefined) {\n      cancelAnimationFrame(this._drawAnimationFrame);\n      delete this._drawAnimationFrame;\n    }\n    if (this._paused) {\n      return;\n    }\n    for (const [, plugin] of this.plugins) {\n      plugin.pause?.();\n    }\n    if (!this.pageHidden) {\n      this._paused = true;\n    }\n    this._engine.dispatchEvent(\"containerPaused\", {\n      container: this\n    });\n  }\n  play(force) {\n    if (!guardCheck(this)) {\n      return;\n    }\n    const needsUpdate = this._paused || force;\n    if (this._firstStart && !this.actualOptions.autoPlay) {\n      this._firstStart = false;\n      return;\n    }\n    if (this._paused) {\n      this._paused = false;\n    }\n    if (needsUpdate) {\n      for (const [, plugin] of this.plugins) {\n        if (plugin.play) {\n          plugin.play();\n        }\n      }\n    }\n    this._engine.dispatchEvent(\"containerPlay\", {\n      container: this\n    });\n    this.draw(needsUpdate ?? false);\n  }\n  async refresh() {\n    if (!guardCheck(this)) {\n      return;\n    }\n    this.stop();\n    return this.start();\n  }\n  async reset() {\n    if (!guardCheck(this)) {\n      return;\n    }\n    this._initialSourceOptions = undefined;\n    this._options = loadContainerOptions(this._engine, this);\n    this.actualOptions = loadContainerOptions(this._engine, this, this._options);\n    return this.refresh();\n  }\n  async start() {\n    if (!guardCheck(this) || this.started) {\n      return;\n    }\n    await this.init();\n    this.started = true;\n    await new Promise(resolve => {\n      const start = async () => {\n        this._eventListeners.addListeners();\n        if (this.interactivity.element instanceof HTMLElement && this._intersectionObserver) {\n          this._intersectionObserver.observe(this.interactivity.element);\n        }\n        for (const [, plugin] of this.plugins) {\n          await plugin.start?.();\n        }\n        this._engine.dispatchEvent(\"containerStarted\", {\n          container: this\n        });\n        this.play();\n        resolve();\n      };\n      this._delayTimeout = setTimeout(() => void start(), this._delay);\n    });\n  }\n  stop() {\n    if (!guardCheck(this) || !this.started) {\n      return;\n    }\n    if (this._delayTimeout) {\n      clearTimeout(this._delayTimeout);\n      delete this._delayTimeout;\n    }\n    this._firstStart = true;\n    this.started = false;\n    this._eventListeners.removeListeners();\n    this.pause();\n    this.particles.clear();\n    this.canvas.stop();\n    if (this.interactivity.element instanceof HTMLElement && this._intersectionObserver) {\n      this._intersectionObserver.unobserve(this.interactivity.element);\n    }\n    for (const [, plugin] of this.plugins) {\n      plugin.stop?.();\n    }\n    for (const key of this.plugins.keys()) {\n      this.plugins.delete(key);\n    }\n    this._sourceOptions = this._options;\n    this._engine.dispatchEvent(\"containerStopped\", {\n      container: this\n    });\n  }\n  updateActualOptions() {\n    this.actualOptions.responsive = [];\n    const newMaxWidth = this.actualOptions.setResponsive(this.canvas.size.width, this.retina.pixelRatio, this._options);\n    this.actualOptions.setTheme(this._currentTheme);\n    if (this._responsiveMaxWidth === newMaxWidth) {\n      return false;\n    }\n    this._responsiveMaxWidth = newMaxWidth;\n    return true;\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/pjs/../../engine/dist/browser/Core/Container.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   Container: () => (/* binding */ Container)\n/* harmony export */ });\n/* harmony import */ var _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Utils/Constants.js */ \"../../engine/dist/browser/Core/Utils/Constants.js\");\n/* harmony import */ var _Utils_Utils_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Utils/Utils.js */ \"../../engine/dist/browser/Utils/Utils.js\");\n/* harmony import */ var _Canvas_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Canvas.js */ \"../../engine/dist/browser/Core/Canvas.js\");\n/* harmony import */ var _Utils_EventListeners_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./Utils/EventListeners.js */ \"../../engine/dist/browser/Core/Utils/EventListeners.js\");\n/* harmony import */ var _Options_Classes_Options_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../Options/Classes/Options.js */ \"../../engine/dist/browser/Options/Classes/Options.js\");\n/* harmony import */ var _Particles_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./Particles.js */ \"../../engine/dist/browser/Core/Particles.js\");\n/* harmony import */ var _Retina_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./Retina.js */ \"../../engine/dist/browser/Core/Retina.js\");\n/* harmony import */ var _Utils_NumberUtils_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../Utils/NumberUtils.js */ \"../../engine/dist/browser/Utils/NumberUtils.js\");\n/* harmony import */ var _Utils_OptionsUtils_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../Utils/OptionsUtils.js */ \"../../engine/dist/browser/Utils/OptionsUtils.js\");\n\n\n\n\n\n\n\n\n\nfunction guardCheck(container) {\n  return container && !container.destroyed;\n}\nconst defaultFps = 60;\nfunction initDelta(value, fpsLimit = defaultFps, smooth = false) {\n  return {\n    value,\n    factor: smooth ? defaultFps / fpsLimit : defaultFps * value / _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.millisecondsToSeconds\n  };\n}\nfunction loadContainerOptions(engine, container, ...sourceOptionsArr) {\n  const options = new _Options_Classes_Options_js__WEBPACK_IMPORTED_MODULE_4__.Options(engine, container);\n  (0,_Utils_OptionsUtils_js__WEBPACK_IMPORTED_MODULE_8__.loadOptions)(options, ...sourceOptionsArr);\n  return options;\n}\nclass Container {\n  constructor(engine, id, sourceOptions) {\n    this._intersectionManager = entries => {\n      if (!guardCheck(this) || !this.actualOptions.pauseOnOutsideViewport) {\n        return;\n      }\n      for (const entry of entries) {\n        if (entry.target !== this.interactivity.element) {\n          continue;\n        }\n        if (entry.isIntersecting) {\n          void this.play();\n        } else {\n          this.pause();\n        }\n      }\n    };\n    this._nextFrame = timestamp => {\n      try {\n        if (!this._smooth && this._lastFrameTime !== undefined && timestamp < this._lastFrameTime + _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.millisecondsToSeconds / this.fpsLimit) {\n          this.draw(false);\n          return;\n        }\n        this._lastFrameTime ??= timestamp;\n        const delta = initDelta(timestamp - this._lastFrameTime, this.fpsLimit, this._smooth);\n        this.addLifeTime(delta.value);\n        this._lastFrameTime = timestamp;\n        if (delta.value > _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.millisecondsToSeconds) {\n          this.draw(false);\n          return;\n        }\n        this.particles.draw(delta);\n        if (!this.alive()) {\n          this.destroy();\n          return;\n        }\n        if (this.animationStatus) {\n          this.draw(false);\n        }\n      } catch (e) {\n        (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_1__.getLogger)().error(`${_Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.errorPrefix} in animation loop`, e);\n      }\n    };\n    this._engine = engine;\n    this.id = Symbol(id);\n    this.fpsLimit = 120;\n    this._smooth = false;\n    this._delay = 0;\n    this._duration = 0;\n    this._lifeTime = 0;\n    this._firstStart = true;\n    this.started = false;\n    this.destroyed = false;\n    this._paused = true;\n    this._lastFrameTime = 0;\n    this.zLayers = 100;\n    this.pageHidden = false;\n    this._sourceOptions = sourceOptions;\n    this._initialSourceOptions = sourceOptions;\n    this.retina = new _Retina_js__WEBPACK_IMPORTED_MODULE_6__.Retina(this);\n    this.canvas = new _Canvas_js__WEBPACK_IMPORTED_MODULE_2__.Canvas(this);\n    this.particles = new _Particles_js__WEBPACK_IMPORTED_MODULE_5__.Particles(this._engine, this);\n    this.pathGenerators = new Map();\n    this.interactivity = {\n      mouse: {\n        clicking: false,\n        inside: false\n      }\n    };\n    this.plugins = new Map();\n    this.effectDrawers = new Map();\n    this.shapeDrawers = new Map();\n    this._options = loadContainerOptions(this._engine, this);\n    this.actualOptions = loadContainerOptions(this._engine, this);\n    this._eventListeners = new _Utils_EventListeners_js__WEBPACK_IMPORTED_MODULE_3__.EventListeners(this);\n    this._intersectionObserver = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_1__.safeIntersectionObserver)(entries => this._intersectionManager(entries));\n    this._engine.dispatchEvent(\"containerBuilt\", {\n      container: this\n    });\n  }\n  get animationStatus() {\n    return !this._paused && !this.pageHidden && guardCheck(this);\n  }\n  get options() {\n    return this._options;\n  }\n  get sourceOptions() {\n    return this._sourceOptions;\n  }\n  addClickHandler(callback) {\n    if (!guardCheck(this)) {\n      return;\n    }\n    const el = this.interactivity.element;\n    if (!el) {\n      return;\n    }\n    const clickOrTouchHandler = (e, pos, radius) => {\n      if (!guardCheck(this)) {\n        return;\n      }\n      const pxRatio = this.retina.pixelRatio,\n        posRetina = {\n          x: pos.x * pxRatio,\n          y: pos.y * pxRatio\n        },\n        particles = this.particles.quadTree.queryCircle(posRetina, radius * pxRatio);\n      callback(e, particles);\n    };\n    const clickHandler = e => {\n      if (!guardCheck(this)) {\n        return;\n      }\n      const mouseEvent = e,\n        pos = {\n          x: mouseEvent.offsetX || mouseEvent.clientX,\n          y: mouseEvent.offsetY || mouseEvent.clientY\n        },\n        radius = 1;\n      clickOrTouchHandler(e, pos, radius);\n    };\n    const touchStartHandler = () => {\n      if (!guardCheck(this)) {\n        return;\n      }\n      touched = true;\n      touchMoved = false;\n    };\n    const touchMoveHandler = () => {\n      if (!guardCheck(this)) {\n        return;\n      }\n      touchMoved = true;\n    };\n    const touchEndHandler = e => {\n      if (!guardCheck(this)) {\n        return;\n      }\n      if (touched && !touchMoved) {\n        const touchEvent = e;\n        const lengthOffset = 1;\n        let lastTouch = touchEvent.touches[touchEvent.touches.length - lengthOffset];\n        if (!lastTouch) {\n          lastTouch = touchEvent.changedTouches[touchEvent.changedTouches.length - lengthOffset];\n          if (!lastTouch) {\n            return;\n          }\n        }\n        const element = this.canvas.element,\n          canvasRect = element ? element.getBoundingClientRect() : undefined,\n          minCoordinate = 0,\n          pos = {\n            x: lastTouch.clientX - (canvasRect ? canvasRect.left : minCoordinate),\n            y: lastTouch.clientY - (canvasRect ? canvasRect.top : minCoordinate)\n          };\n        clickOrTouchHandler(e, pos, Math.max(lastTouch.radiusX, lastTouch.radiusY));\n      }\n      touched = false;\n      touchMoved = false;\n    };\n    const touchCancelHandler = () => {\n      if (!guardCheck(this)) {\n        return;\n      }\n      touched = false;\n      touchMoved = false;\n    };\n    let touched = false,\n      touchMoved = false;\n    el.addEventListener(\"click\", clickHandler);\n    el.addEventListener(\"touchstart\", touchStartHandler);\n    el.addEventListener(\"touchmove\", touchMoveHandler);\n    el.addEventListener(\"touchend\", touchEndHandler);\n    el.addEventListener(\"touchcancel\", touchCancelHandler);\n  }\n  addLifeTime(value) {\n    this._lifeTime += value;\n  }\n  addPath(key, generator, override = false) {\n    if (!guardCheck(this) || !override && this.pathGenerators.has(key)) {\n      return false;\n    }\n    this.pathGenerators.set(key, generator);\n    return true;\n  }\n  alive() {\n    return !this._duration || this._lifeTime <= this._duration;\n  }\n  destroy() {\n    if (!guardCheck(this)) {\n      return;\n    }\n    this.stop();\n    this.particles.destroy();\n    this.canvas.destroy();\n    for (const [, effectDrawer] of this.effectDrawers) {\n      effectDrawer.destroy?.(this);\n    }\n    for (const [, shapeDrawer] of this.shapeDrawers) {\n      shapeDrawer.destroy?.(this);\n    }\n    for (const key of this.effectDrawers.keys()) {\n      this.effectDrawers.delete(key);\n    }\n    for (const key of this.shapeDrawers.keys()) {\n      this.shapeDrawers.delete(key);\n    }\n    this._engine.clearPlugins(this);\n    this.destroyed = true;\n    const mainArr = this._engine.dom(),\n      idx = mainArr.findIndex(t => t === this),\n      minIndex = 0;\n    if (idx >= minIndex) {\n      const deleteCount = 1;\n      mainArr.splice(idx, deleteCount);\n    }\n    this._engine.dispatchEvent(\"containerDestroyed\", {\n      container: this\n    });\n  }\n  draw(force) {\n    if (!guardCheck(this)) {\n      return;\n    }\n    let refreshTime = force;\n    const frame = timestamp => {\n      if (refreshTime) {\n        this._lastFrameTime = undefined;\n        refreshTime = false;\n      }\n      this._nextFrame(timestamp);\n    };\n    this._drawAnimationFrame = requestAnimationFrame(timestamp => frame(timestamp));\n  }\n  async export(type, options = {}) {\n    for (const [, plugin] of this.plugins) {\n      if (!plugin.export) {\n        continue;\n      }\n      const res = await plugin.export(type, options);\n      if (!res.supported) {\n        continue;\n      }\n      return res.blob;\n    }\n    (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_1__.getLogger)().error(`${_Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.errorPrefix} - Export plugin with type ${type} not found`);\n  }\n  handleClickMode(mode) {\n    if (!guardCheck(this)) {\n      return;\n    }\n    this.particles.handleClickMode(mode);\n    for (const [, plugin] of this.plugins) {\n      plugin.handleClickMode?.(mode);\n    }\n  }\n  async init() {\n    if (!guardCheck(this)) {\n      return;\n    }\n    const effects = this._engine.getSupportedEffects();\n    for (const type of effects) {\n      const drawer = this._engine.getEffectDrawer(type);\n      if (drawer) {\n        this.effectDrawers.set(type, drawer);\n      }\n    }\n    const shapes = this._engine.getSupportedShapes();\n    for (const type of shapes) {\n      const drawer = this._engine.getShapeDrawer(type);\n      if (drawer) {\n        this.shapeDrawers.set(type, drawer);\n      }\n    }\n    await this.particles.initPlugins();\n    this._options = loadContainerOptions(this._engine, this, this._initialSourceOptions, this.sourceOptions);\n    this.actualOptions = loadContainerOptions(this._engine, this, this._options);\n    const availablePlugins = await this._engine.getAvailablePlugins(this);\n    for (const [id, plugin] of availablePlugins) {\n      this.plugins.set(id, plugin);\n    }\n    this.retina.init();\n    await this.canvas.init();\n    this.updateActualOptions();\n    this.canvas.initBackground();\n    this.canvas.resize();\n    this.zLayers = this.actualOptions.zLayers;\n    this._duration = (0,_Utils_NumberUtils_js__WEBPACK_IMPORTED_MODULE_7__.getRangeValue)(this.actualOptions.duration) * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.millisecondsToSeconds;\n    this._delay = (0,_Utils_NumberUtils_js__WEBPACK_IMPORTED_MODULE_7__.getRangeValue)(this.actualOptions.delay) * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_0__.millisecondsToSeconds;\n    this._lifeTime = 0;\n    const defaultFpsLimit = 120,\n      minFpsLimit = 0;\n    this.fpsLimit = this.actualOptions.fpsLimit > minFpsLimit ? this.actualOptions.fpsLimit : defaultFpsLimit;\n    this._smooth = this.actualOptions.smooth;\n    for (const [, drawer] of this.effectDrawers) {\n      await drawer.init?.(this);\n    }\n    for (const [, drawer] of this.shapeDrawers) {\n      await drawer.init?.(this);\n    }\n    for (const [, plugin] of this.plugins) {\n      await plugin.init?.();\n    }\n    this._engine.dispatchEvent(\"containerInit\", {\n      container: this\n    });\n    await this.particles.init();\n    this.particles.setDensity();\n    for (const [, plugin] of this.plugins) {\n      plugin.particlesSetup?.();\n    }\n    this._engine.dispatchEvent(\"particlesSetup\", {\n      container: this\n    });\n  }\n  async loadTheme(name) {\n    if (!guardCheck(this)) {\n      return;\n    }\n    this._currentTheme = name;\n    await this.refresh();\n  }\n  pause() {\n    if (!guardCheck(this)) {\n      return;\n    }\n    if (this._drawAnimationFrame !== undefined) {\n      cancelAnimationFrame(this._drawAnimationFrame);\n      delete this._drawAnimationFrame;\n    }\n    if (this._paused) {\n      return;\n    }\n    for (const [, plugin] of this.plugins) {\n      plugin.pause?.();\n    }\n    if (!this.pageHidden) {\n      this._paused = true;\n    }\n    this._engine.dispatchEvent(\"containerPaused\", {\n      container: this\n    });\n  }\n  play(force) {\n    if (!guardCheck(this)) {\n      return;\n    }\n    const needsUpdate = this._paused || force;\n    if (this._firstStart && !this.actualOptions.autoPlay) {\n      this._firstStart = false;\n      return;\n    }\n    if (this._paused) {\n      this._paused = false;\n    }\n    if (needsUpdate) {\n      for (const [, plugin] of this.plugins) {\n        if (plugin.play) {\n          plugin.play();\n        }\n      }\n    }\n    this._engine.dispatchEvent(\"containerPlay\", {\n      container: this\n    });\n    this.draw(needsUpdate ?? false);\n  }\n  async refresh() {\n    if (!guardCheck(this)) {\n      return;\n    }\n    this.stop();\n    return this.start();\n  }\n  async reset() {\n    if (!guardCheck(this)) {\n      return;\n    }\n    this._initialSourceOptions = undefined;\n    this._options = loadContainerOptions(this._engine, this);\n    this.actualOptions = loadContainerOptions(this._engine, this, this._options);\n    return this.refresh();\n  }\n  async start() {\n    if (!guardCheck(this) || this.started) {\n      return;\n    }\n    await this.init();\n    this.started = true;\n    await new Promise(resolve => {\n      const start = async () => {\n        this._eventListeners.addListeners();\n        if (this.interactivity.element instanceof HTMLElement && this._intersectionObserver) {\n          this._intersectionObserver.observe(this.interactivity.element);\n        }\n        for (const [, plugin] of this.plugins) {\n          await plugin.start?.();\n        }\n        this._engine.dispatchEvent(\"containerStarted\", {\n          container: this\n        });\n        this.play();\n        resolve();\n      };\n      this._delayTimeout = setTimeout(() => void start(), this._delay);\n    });\n  }\n  stop() {\n    if (!guardCheck(this) || !this.started) {\n      return;\n    }\n    if (this._delayTimeout) {\n      clearTimeout(this._delayTimeout);\n      delete this._delayTimeout;\n    }\n    this._firstStart = true;\n    this.started = false;\n    this._eventListeners.removeListeners();\n    this.pause();\n    this.particles.clear();\n    this.canvas.stop();\n    if (this.interactivity.element instanceof HTMLElement && this._intersectionObserver) {\n      this._intersectionObserver.unobserve(this.interactivity.element);\n    }\n    for (const [, plugin] of this.plugins) {\n      plugin.stop?.();\n    }\n    for (const key of this.plugins.keys()) {\n      this.plugins.delete(key);\n    }\n    this._sourceOptions = this._options;\n    this._engine.dispatchEvent(\"containerStopped\", {\n      container: this\n    });\n  }\n  updateActualOptions() {\n    this.actualOptions.responsive = [];\n    const newMaxWidth = this.actualOptions.setResponsive(this.canvas.size.width, this.retina.pixelRatio, this._options);\n    this.actualOptions.setTheme(this._currentTheme);\n    if (this._responsiveMaxWidth === newMaxWidth) {\n      return false;\n    }\n    this._responsiveMaxWidth = newMaxWidth;\n    return true;\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/pjs/../../engine/dist/browser/Core/Container.js?");
+
+/***/ }),
+
+/***/ "../../engine/dist/browser/Core/Particle.js":
+/*!**************************************************!*\
+  !*** ../../engine/dist/browser/Core/Particle.js ***!
+  \**************************************************/
+/***/ ((__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) => {
+
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   Particle: () => (/* binding */ Particle)\n/* harmony export */ });\n/* harmony import */ var _Utils_Vectors_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Utils/Vectors.js */ \"../../engine/dist/browser/Core/Utils/Vectors.js\");\n/* harmony import */ var _Utils_NumberUtils_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Utils/NumberUtils.js */ \"../../engine/dist/browser/Utils/NumberUtils.js\");\n/* harmony import */ var _Utils_Utils_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../Utils/Utils.js */ \"../../engine/dist/browser/Utils/Utils.js\");\n/* harmony import */ var _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./Utils/Constants.js */ \"../../engine/dist/browser/Core/Utils/Constants.js\");\n/* harmony import */ var _Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../Utils/ColorUtils.js */ \"../../engine/dist/browser/Utils/ColorUtils.js\");\n/* harmony import */ var _Options_Classes_Interactivity_Interactivity_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../Options/Classes/Interactivity/Interactivity.js */ \"../../engine/dist/browser/Options/Classes/Interactivity/Interactivity.js\");\n/* harmony import */ var _Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../Utils/CanvasUtils.js */ \"../../engine/dist/browser/Utils/CanvasUtils.js\");\n/* harmony import */ var _Utils_OptionsUtils_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../Utils/OptionsUtils.js */ \"../../engine/dist/browser/Utils/OptionsUtils.js\");\n\n\n\n\n\n\n\n\nconst defaultRetryCount = 0,\n  double = 2,\n  half = 0.5,\n  squareExp = 2;\nfunction loadEffectData(effect, effectOptions, id, reduceDuplicates) {\n  const effectData = effectOptions.options[effect];\n  if (!effectData) {\n    return;\n  }\n  return (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_2__.deepExtend)({\n    close: effectOptions.close,\n    fill: effectOptions.fill\n  }, (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_2__.itemFromSingleOrMultiple)(effectData, id, reduceDuplicates));\n}\nfunction loadShapeData(shape, shapeOptions, id, reduceDuplicates) {\n  const shapeData = shapeOptions.options[shape];\n  if (!shapeData) {\n    return;\n  }\n  return (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_2__.deepExtend)({\n    close: shapeOptions.close,\n    fill: shapeOptions.fill\n  }, (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_2__.itemFromSingleOrMultiple)(shapeData, id, reduceDuplicates));\n}\nfunction fixOutMode(data) {\n  if (!(0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_2__.isInArray)(data.outMode, data.checkModes)) {\n    return;\n  }\n  const diameter = data.radius * double;\n  if (data.coord > data.maxCoord - diameter) {\n    data.setCb(-data.radius);\n  } else if (data.coord < diameter) {\n    data.setCb(data.radius);\n  }\n}\nclass Particle {\n  constructor(engine, container) {\n    this.container = container;\n    this._calcPosition = (container, position, zIndex, tryCount = defaultRetryCount) => {\n      for (const [, plugin] of container.plugins) {\n        const pluginPos = plugin.particlePosition !== undefined ? plugin.particlePosition(position, this) : undefined;\n        if (pluginPos) {\n          return _Utils_Vectors_js__WEBPACK_IMPORTED_MODULE_0__.Vector3d.create(pluginPos.x, pluginPos.y, zIndex);\n        }\n      }\n      const canvasSize = container.canvas.size,\n        exactPosition = (0,_Utils_NumberUtils_js__WEBPACK_IMPORTED_MODULE_1__.calcExactPositionOrRandomFromSize)({\n          size: canvasSize,\n          position: position\n        }),\n        pos = _Utils_Vectors_js__WEBPACK_IMPORTED_MODULE_0__.Vector3d.create(exactPosition.x, exactPosition.y, zIndex),\n        radius = this.getRadius(),\n        outModes = this.options.move.outModes,\n        fixHorizontal = outMode => {\n          fixOutMode({\n            outMode,\n            checkModes: [\"bounce\"],\n            coord: pos.x,\n            maxCoord: container.canvas.size.width,\n            setCb: value => pos.x += value,\n            radius\n          });\n        },\n        fixVertical = outMode => {\n          fixOutMode({\n            outMode,\n            checkModes: [\"bounce\"],\n            coord: pos.y,\n            maxCoord: container.canvas.size.height,\n            setCb: value => pos.y += value,\n            radius\n          });\n        };\n      fixHorizontal(outModes.left ?? outModes.default);\n      fixHorizontal(outModes.right ?? outModes.default);\n      fixVertical(outModes.top ?? outModes.default);\n      fixVertical(outModes.bottom ?? outModes.default);\n      if (this._checkOverlap(pos, tryCount)) {\n        const increment = 1;\n        return this._calcPosition(container, undefined, zIndex, tryCount + increment);\n      }\n      return pos;\n    };\n    this._calculateVelocity = () => {\n      const baseVelocity = (0,_Utils_NumberUtils_js__WEBPACK_IMPORTED_MODULE_1__.getParticleBaseVelocity)(this.direction),\n        res = baseVelocity.copy(),\n        moveOptions = this.options.move;\n      if (moveOptions.direction === \"inside\" || moveOptions.direction === \"outside\") {\n        return res;\n      }\n      const rad = (0,_Utils_NumberUtils_js__WEBPACK_IMPORTED_MODULE_1__.degToRad)((0,_Utils_NumberUtils_js__WEBPACK_IMPORTED_MODULE_1__.getRangeValue)(moveOptions.angle.value)),\n        radOffset = (0,_Utils_NumberUtils_js__WEBPACK_IMPORTED_MODULE_1__.degToRad)((0,_Utils_NumberUtils_js__WEBPACK_IMPORTED_MODULE_1__.getRangeValue)(moveOptions.angle.offset)),\n        range = {\n          left: radOffset - rad * half,\n          right: radOffset + rad * half\n        };\n      if (!moveOptions.straight) {\n        res.angle += (0,_Utils_NumberUtils_js__WEBPACK_IMPORTED_MODULE_1__.randomInRange)((0,_Utils_NumberUtils_js__WEBPACK_IMPORTED_MODULE_1__.setRangeValue)(range.left, range.right));\n      }\n      if (moveOptions.random && typeof moveOptions.speed === \"number\") {\n        res.length *= (0,_Utils_NumberUtils_js__WEBPACK_IMPORTED_MODULE_1__.getRandom)();\n      }\n      return res;\n    };\n    this._checkOverlap = (pos, tryCount = defaultRetryCount) => {\n      const collisionsOptions = this.options.collisions,\n        radius = this.getRadius();\n      if (!collisionsOptions.enable) {\n        return false;\n      }\n      const overlapOptions = collisionsOptions.overlap;\n      if (overlapOptions.enable) {\n        return false;\n      }\n      const retries = overlapOptions.retries,\n        minRetries = 0;\n      if (retries >= minRetries && tryCount > retries) {\n        throw new Error(`${_Utils_Constants_js__WEBPACK_IMPORTED_MODULE_3__.errorPrefix} particle is overlapping and can't be placed`);\n      }\n      return !!this.container.particles.find(particle => (0,_Utils_NumberUtils_js__WEBPACK_IMPORTED_MODULE_1__.getDistance)(pos, particle.position) < radius + particle.getRadius());\n    };\n    this._getRollColor = color => {\n      if (!color || !this.roll || !this.backColor && !this.roll.alter) {\n        return color;\n      }\n      const rollFactor = 1,\n        none = 0,\n        backFactor = this.roll.horizontal && this.roll.vertical ? double * rollFactor : rollFactor,\n        backSum = this.roll.horizontal ? Math.PI * half : none,\n        rolled = Math.floor(((this.roll.angle ?? none) + backSum) / (Math.PI / backFactor)) % double;\n      if (!rolled) {\n        return color;\n      }\n      if (this.backColor) {\n        return this.backColor;\n      }\n      if (this.roll.alter) {\n        return (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_6__.alterHsl)(color, this.roll.alter.type, this.roll.alter.value);\n      }\n      return color;\n    };\n    this._initPosition = position => {\n      const container = this.container,\n        zIndexValue = (0,_Utils_NumberUtils_js__WEBPACK_IMPORTED_MODULE_1__.getRangeValue)(this.options.zIndex.value),\n        minZ = 0;\n      this.position = this._calcPosition(container, position, (0,_Utils_NumberUtils_js__WEBPACK_IMPORTED_MODULE_1__.clamp)(zIndexValue, minZ, container.zLayers));\n      this.initialPosition = this.position.copy();\n      const canvasSize = container.canvas.size,\n        defaultRadius = 0;\n      this.moveCenter = {\n        ...(0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_2__.getPosition)(this.options.move.center, canvasSize),\n        radius: this.options.move.center.radius ?? defaultRadius,\n        mode: this.options.move.center.mode ?? \"percent\"\n      };\n      this.direction = (0,_Utils_NumberUtils_js__WEBPACK_IMPORTED_MODULE_1__.getParticleDirectionAngle)(this.options.move.direction, this.position, this.moveCenter);\n      switch (this.options.move.direction) {\n        case \"inside\":\n          this.outType = \"inside\";\n          break;\n        case \"outside\":\n          this.outType = \"outside\";\n          break;\n      }\n      this.offset = _Utils_Vectors_js__WEBPACK_IMPORTED_MODULE_0__.Vector.origin;\n    };\n    this._engine = engine;\n  }\n  destroy(override) {\n    if (this.unbreakable || this.destroyed) {\n      return;\n    }\n    this.destroyed = true;\n    this.bubble.inRange = false;\n    this.slow.inRange = false;\n    const container = this.container,\n      pathGenerator = this.pathGenerator,\n      shapeDrawer = container.shapeDrawers.get(this.shape);\n    shapeDrawer?.particleDestroy?.(this);\n    for (const [, plugin] of container.plugins) {\n      plugin.particleDestroyed?.(this, override);\n    }\n    for (const updater of container.particles.updaters) {\n      updater.particleDestroyed?.(this, override);\n    }\n    pathGenerator?.reset(this);\n    this._engine.dispatchEvent(\"particleDestroyed\", {\n      container: this.container,\n      data: {\n        particle: this\n      }\n    });\n  }\n  draw(delta) {\n    const container = this.container,\n      canvas = container.canvas;\n    for (const [, plugin] of container.plugins) {\n      canvas.drawParticlePlugin(plugin, this, delta);\n    }\n    canvas.drawParticle(this, delta);\n  }\n  getFillColor() {\n    return this._getRollColor(this.bubble.color ?? (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_4__.getHslFromAnimation)(this.color));\n  }\n  getMass() {\n    return this.getRadius() ** squareExp * Math.PI * half;\n  }\n  getPosition() {\n    return {\n      x: this.position.x + this.offset.x,\n      y: this.position.y + this.offset.y,\n      z: this.position.z\n    };\n  }\n  getRadius() {\n    return this.bubble.radius ?? this.size.value;\n  }\n  getStrokeColor() {\n    return this._getRollColor(this.bubble.color ?? (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_4__.getHslFromAnimation)(this.strokeColor));\n  }\n  init(id, position, overrideOptions, group) {\n    const container = this.container,\n      engine = this._engine;\n    this.id = id;\n    this.group = group;\n    this.effectClose = true;\n    this.effectFill = true;\n    this.shapeClose = true;\n    this.shapeFill = true;\n    this.pathRotation = false;\n    this.lastPathTime = 0;\n    this.destroyed = false;\n    this.unbreakable = false;\n    this.rotation = 0;\n    this.misplaced = false;\n    this.retina = {\n      maxDistance: {}\n    };\n    this.outType = \"normal\";\n    this.ignoresResizeRatio = true;\n    const pxRatio = container.retina.pixelRatio,\n      mainOptions = container.actualOptions,\n      particlesOptions = (0,_Utils_OptionsUtils_js__WEBPACK_IMPORTED_MODULE_7__.loadParticlesOptions)(this._engine, container, mainOptions.particles),\n      effectType = particlesOptions.effect.type,\n      shapeType = particlesOptions.shape.type,\n      {\n        reduceDuplicates\n      } = particlesOptions;\n    this.effect = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_2__.itemFromSingleOrMultiple)(effectType, this.id, reduceDuplicates);\n    this.shape = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_2__.itemFromSingleOrMultiple)(shapeType, this.id, reduceDuplicates);\n    const effectOptions = particlesOptions.effect,\n      shapeOptions = particlesOptions.shape;\n    if (overrideOptions) {\n      if (overrideOptions.effect?.type) {\n        const overrideEffectType = overrideOptions.effect.type,\n          effect = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_2__.itemFromSingleOrMultiple)(overrideEffectType, this.id, reduceDuplicates);\n        if (effect) {\n          this.effect = effect;\n          effectOptions.load(overrideOptions.effect);\n        }\n      }\n      if (overrideOptions.shape?.type) {\n        const overrideShapeType = overrideOptions.shape.type,\n          shape = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_2__.itemFromSingleOrMultiple)(overrideShapeType, this.id, reduceDuplicates);\n        if (shape) {\n          this.shape = shape;\n          shapeOptions.load(overrideOptions.shape);\n        }\n      }\n    }\n    this.effectData = loadEffectData(this.effect, effectOptions, this.id, reduceDuplicates);\n    this.shapeData = loadShapeData(this.shape, shapeOptions, this.id, reduceDuplicates);\n    particlesOptions.load(overrideOptions);\n    const effectData = this.effectData;\n    if (effectData) {\n      particlesOptions.load(effectData.particles);\n    }\n    const shapeData = this.shapeData;\n    if (shapeData) {\n      particlesOptions.load(shapeData.particles);\n    }\n    const interactivity = new _Options_Classes_Interactivity_Interactivity_js__WEBPACK_IMPORTED_MODULE_5__.Interactivity(engine, container);\n    interactivity.load(container.actualOptions.interactivity);\n    interactivity.load(particlesOptions.interactivity);\n    this.interactivity = interactivity;\n    this.effectFill = effectData?.fill ?? particlesOptions.effect.fill;\n    this.effectClose = effectData?.close ?? particlesOptions.effect.close;\n    this.shapeFill = shapeData?.fill ?? particlesOptions.shape.fill;\n    this.shapeClose = shapeData?.close ?? particlesOptions.shape.close;\n    this.options = particlesOptions;\n    const pathOptions = this.options.move.path;\n    this.pathDelay = (0,_Utils_NumberUtils_js__WEBPACK_IMPORTED_MODULE_1__.getRangeValue)(pathOptions.delay.value) * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_3__.millisecondsToSeconds;\n    if (pathOptions.generator) {\n      this.pathGenerator = this._engine.getPathGenerator(pathOptions.generator);\n      if (this.pathGenerator && container.addPath(pathOptions.generator, this.pathGenerator)) {\n        this.pathGenerator.init(container);\n      }\n    }\n    container.retina.initParticle(this);\n    this.size = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_2__.initParticleNumericAnimationValue)(this.options.size, pxRatio);\n    this.bubble = {\n      inRange: false\n    };\n    this.slow = {\n      inRange: false,\n      factor: 1\n    };\n    this._initPosition(position);\n    this.initialVelocity = this._calculateVelocity();\n    this.velocity = this.initialVelocity.copy();\n    const decayOffset = 1;\n    this.moveDecay = decayOffset - (0,_Utils_NumberUtils_js__WEBPACK_IMPORTED_MODULE_1__.getRangeValue)(this.options.move.decay);\n    const particles = container.particles;\n    particles.setLastZIndex(this.position.z);\n    this.zIndexFactor = this.position.z / container.zLayers;\n    this.sides = 24;\n    let effectDrawer = container.effectDrawers.get(this.effect);\n    if (!effectDrawer) {\n      effectDrawer = this._engine.getEffectDrawer(this.effect);\n      if (effectDrawer) {\n        container.effectDrawers.set(this.effect, effectDrawer);\n      }\n    }\n    if (effectDrawer?.loadEffect) {\n      effectDrawer.loadEffect(this);\n    }\n    let shapeDrawer = container.shapeDrawers.get(this.shape);\n    if (!shapeDrawer) {\n      shapeDrawer = this._engine.getShapeDrawer(this.shape);\n      if (shapeDrawer) {\n        container.shapeDrawers.set(this.shape, shapeDrawer);\n      }\n    }\n    if (shapeDrawer?.loadShape) {\n      shapeDrawer.loadShape(this);\n    }\n    const sideCountFunc = shapeDrawer?.getSidesCount;\n    if (sideCountFunc) {\n      this.sides = sideCountFunc(this);\n    }\n    this.spawning = false;\n    this.shadowColor = (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_4__.rangeColorToRgb)(this.options.shadow.color);\n    for (const updater of particles.updaters) {\n      updater.init(this);\n    }\n    for (const mover of particles.movers) {\n      mover.init?.(this);\n    }\n    effectDrawer?.particleInit?.(container, this);\n    shapeDrawer?.particleInit?.(container, this);\n    for (const [, plugin] of container.plugins) {\n      plugin.particleCreated?.(this);\n    }\n  }\n  isInsideCanvas() {\n    const radius = this.getRadius(),\n      canvasSize = this.container.canvas.size,\n      position = this.position;\n    return position.x >= -radius && position.y >= -radius && position.y <= canvasSize.height + radius && position.x <= canvasSize.width + radius;\n  }\n  isVisible() {\n    return !this.destroyed && !this.spawning && this.isInsideCanvas();\n  }\n  reset() {\n    for (const updater of this.container.particles.updaters) {\n      updater.reset?.(this);\n    }\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/pjs/../../engine/dist/browser/Core/Particle.js?");
 
 /***/ }),
 
@@ -43,7 +53,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
   \***************************************************/
 /***/ ((__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) => {
 
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   Particles: () => (/* binding */ Particles)\n/* harmony export */ });\n/* harmony import */ var _Utils_Utils_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../Utils/Utils.js */ \"../../engine/dist/browser/Utils/Utils.js\");\n/* harmony import */ var _Utils_InteractionManager_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Utils/InteractionManager.js */ \"../../engine/dist/browser/Core/Utils/InteractionManager.js\");\n/* harmony import */ var _Utils_Point_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Utils/Point.js */ \"../../engine/dist/browser/Core/Utils/Point.js\");\n/* harmony import */ var _Utils_QuadTree_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./Utils/QuadTree.js */ \"../../engine/dist/browser/Core/Utils/QuadTree.js\");\n/* harmony import */ var _Utils_Rectangle_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./Utils/Rectangle.js */ \"../../engine/dist/browser/Core/Utils/Rectangle.js\");\n/* harmony import */ var _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./Utils/Constants.js */ \"../../engine/dist/browser/Core/Utils/Constants.js\");\n\n\n\n\n\n\nconst qTreeCapacity = 4,\n  squareExp = 2,\n  defaultRemoveQuantity = 1;\nconst qTreeRectangle = canvasSize => {\n  const {\n      height,\n      width\n    } = canvasSize,\n    posOffset = -0.25,\n    sizeFactor = 1.5;\n  return new _Utils_Rectangle_js__WEBPACK_IMPORTED_MODULE_4__.Rectangle(posOffset * width, posOffset * height, sizeFactor * width, sizeFactor * height);\n};\nclass Particles {\n  constructor(engine, container) {\n    this._addToPool = (...particles) => {\n      for (const particle of particles) {\n        this._pool.push(particle);\n      }\n    };\n    this._applyDensity = async (options, manualCount, group) => {\n      const numberOptions = options.number;\n      if (!options.number.density?.enable) {\n        if (group === undefined) {\n          this._limit = numberOptions.limit.value;\n        } else if (numberOptions.limit) {\n          this._groupLimits.set(group, numberOptions.limit.value);\n        }\n        return;\n      }\n      const densityFactor = this._initDensityFactor(numberOptions.density),\n        optParticlesNumber = numberOptions.value,\n        minLimit = 0,\n        optParticlesLimit = numberOptions.limit.value > minLimit ? numberOptions.limit.value : optParticlesNumber,\n        particlesNumber = Math.min(optParticlesNumber, optParticlesLimit) * densityFactor + manualCount,\n        particlesCount = Math.min(this.count, this.filter(t => t.group === group).length);\n      if (group === undefined) {\n        this._limit = numberOptions.limit.value * densityFactor;\n      } else {\n        this._groupLimits.set(group, numberOptions.limit.value * densityFactor);\n      }\n      if (particlesCount < particlesNumber) {\n        await this.push(Math.abs(particlesNumber - particlesCount), undefined, options, group);\n      } else if (particlesCount > particlesNumber) {\n        this.removeQuantity(particlesCount - particlesNumber, group);\n      }\n    };\n    this._initDensityFactor = densityOptions => {\n      const container = this._container,\n        defaultFactor = 1;\n      if (!container.canvas.element || !densityOptions.enable) {\n        return defaultFactor;\n      }\n      const canvas = container.canvas.element,\n        pxRatio = container.retina.pixelRatio;\n      return canvas.width * canvas.height / (densityOptions.height * densityOptions.width * pxRatio ** squareExp);\n    };\n    this._pushParticle = async (position, overrideOptions, group, initializer) => {\n      try {\n        let particle = this._pool.pop();\n        if (!particle) {\n          const {\n            Particle\n          } = await __webpack_require__.e(/*! import() */ \"engine_dist_browser_Core_Particle_js\").then(__webpack_require__.bind(__webpack_require__, /*! ./Particle.js */ \"../../engine/dist/browser/Core/Particle.js\"));\n          particle = new Particle(this._engine, this._container);\n        }\n        await particle.init(this._nextId, position, overrideOptions, group);\n        let canAdd = true;\n        if (initializer) {\n          canAdd = initializer(particle);\n        }\n        if (!canAdd) {\n          return;\n        }\n        this._array.push(particle);\n        this._zArray.push(particle);\n        this._nextId++;\n        this._engine.dispatchEvent(\"particleAdded\", {\n          container: this._container,\n          data: {\n            particle\n          }\n        });\n        return particle;\n      } catch (e) {\n        (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_0__.getLogger)().warning(`${_Utils_Constants_js__WEBPACK_IMPORTED_MODULE_5__.errorPrefix} adding particle: ${e}`);\n      }\n    };\n    this._removeParticle = (index, group, override) => {\n      const particle = this._array[index];\n      if (!particle || particle.group !== group) {\n        return false;\n      }\n      const zIdx = this._zArray.indexOf(particle),\n        deleteCount = 1;\n      this._array.splice(index, deleteCount);\n      this._zArray.splice(zIdx, deleteCount);\n      particle.destroy(override);\n      this._engine.dispatchEvent(\"particleRemoved\", {\n        container: this._container,\n        data: {\n          particle\n        }\n      });\n      this._addToPool(particle);\n      return true;\n    };\n    this._engine = engine;\n    this._container = container;\n    this._nextId = 0;\n    this._array = [];\n    this._zArray = [];\n    this._pool = [];\n    this._limit = 0;\n    this._groupLimits = new Map();\n    this._needsSort = false;\n    this._lastZIndex = 0;\n    this._interactionManager = new _Utils_InteractionManager_js__WEBPACK_IMPORTED_MODULE_1__.InteractionManager(engine, container);\n    this._pluginsInitialized = false;\n    const canvasSize = container.canvas.size;\n    this.quadTree = new _Utils_QuadTree_js__WEBPACK_IMPORTED_MODULE_3__.QuadTree(qTreeRectangle(canvasSize), qTreeCapacity);\n    this.movers = [];\n    this.updaters = [];\n  }\n  get count() {\n    return this._array.length;\n  }\n  async addManualParticles() {\n    const container = this._container,\n      options = container.actualOptions;\n    for (const particle of options.manualParticles) {\n      await this.addParticle(particle.position ? (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_0__.getPosition)(particle.position, container.canvas.size) : undefined, particle.options);\n    }\n  }\n  async addParticle(position, overrideOptions, group, initializer) {\n    const limitOptions = this._container.actualOptions.particles.number.limit,\n      limit = group === undefined ? this._limit : this._groupLimits.get(group) ?? this._limit,\n      currentCount = this.count,\n      minLimit = 0;\n    if (limit > minLimit) {\n      if (limitOptions.mode === \"delete\") {\n        const countOffset = 1,\n          minCount = 0,\n          countToRemove = currentCount + countOffset - limit;\n        if (countToRemove > minCount) {\n          this.removeQuantity(countToRemove);\n        }\n      } else if (limitOptions.mode === \"wait\") {\n        if (currentCount >= limit) {\n          return;\n        }\n      }\n    }\n    return await this._pushParticle(position, overrideOptions, group, initializer);\n  }\n  clear() {\n    this._array = [];\n    this._zArray = [];\n    this._pluginsInitialized = false;\n  }\n  destroy() {\n    this._array = [];\n    this._zArray = [];\n    this.movers = [];\n    this.updaters = [];\n  }\n  async draw(delta) {\n    const container = this._container,\n      canvas = container.canvas;\n    canvas.clear();\n    await this.update(delta);\n    for (const [, plugin] of container.plugins) {\n      await canvas.drawPlugin(plugin, delta);\n    }\n    for (const p of this._zArray) {\n      await p.draw(delta);\n    }\n  }\n  filter(condition) {\n    return this._array.filter(condition);\n  }\n  find(condition) {\n    return this._array.find(condition);\n  }\n  get(index) {\n    return this._array[index];\n  }\n  handleClickMode(mode) {\n    this._interactionManager.handleClickMode(mode);\n  }\n  async init() {\n    const container = this._container,\n      options = container.actualOptions;\n    this._lastZIndex = 0;\n    this._needsSort = false;\n    await this.initPlugins();\n    let handled = false;\n    for (const [, plugin] of container.plugins) {\n      if (plugin.particlesInitialization !== undefined) {\n        handled = plugin.particlesInitialization();\n      }\n      if (handled) {\n        break;\n      }\n    }\n    await this.addManualParticles();\n    if (!handled) {\n      const particlesOptions = options.particles,\n        groups = particlesOptions.groups;\n      for (const group in groups) {\n        const groupOptions = groups[group];\n        for (let i = this.count, j = 0; j < groupOptions.number?.value && i < particlesOptions.number.value; i++, j++) {\n          await this.addParticle(undefined, groupOptions, group);\n        }\n      }\n      for (let i = this.count; i < particlesOptions.number.value; i++) {\n        await this.addParticle();\n      }\n    }\n  }\n  async initPlugins() {\n    if (this._pluginsInitialized) {\n      return;\n    }\n    const container = this._container;\n    this.movers = await this._engine.getMovers(container, true);\n    this.updaters = await this._engine.getUpdaters(container, true);\n    await this._interactionManager.init();\n    for (const [, pathGenerator] of container.pathGenerators) {\n      await pathGenerator.init(container);\n    }\n  }\n  async push(nb, mouse, overrideOptions, group) {\n    for (let i = 0; i < nb; i++) {\n      await this.addParticle(mouse?.position, overrideOptions, group);\n    }\n  }\n  async redraw() {\n    this.clear();\n    await this.init();\n    await this.draw({\n      value: 0,\n      factor: 0\n    });\n  }\n  remove(particle, group, override) {\n    this.removeAt(this._array.indexOf(particle), undefined, group, override);\n  }\n  removeAt(index, quantity = defaultRemoveQuantity, group, override) {\n    const minIndex = 0;\n    if (index < minIndex || index > this.count) {\n      return;\n    }\n    let deleted = 0;\n    for (let i = index; deleted < quantity && i < this.count; i++) {\n      if (this._removeParticle(i--, group, override)) {\n        deleted++;\n      }\n    }\n  }\n  removeQuantity(quantity, group) {\n    const defaultIndex = 0;\n    this.removeAt(defaultIndex, quantity, group);\n  }\n  async setDensity() {\n    const options = this._container.actualOptions,\n      groups = options.particles.groups,\n      manualCount = 0;\n    for (const group in groups) {\n      await this._applyDensity(groups[group], manualCount, group);\n    }\n    await this._applyDensity(options.particles, options.manualParticles.length);\n  }\n  setLastZIndex(zIndex) {\n    this._lastZIndex = zIndex;\n    this._needsSort = this._needsSort || this._lastZIndex < zIndex;\n  }\n  setResizeFactor(factor) {\n    this._resizeFactor = factor;\n  }\n  async update(delta) {\n    const container = this._container,\n      particlesToDelete = new Set();\n    this.quadTree = new _Utils_QuadTree_js__WEBPACK_IMPORTED_MODULE_3__.QuadTree(qTreeRectangle(container.canvas.size), qTreeCapacity);\n    for (const [, pathGenerator] of container.pathGenerators) {\n      pathGenerator.update();\n    }\n    for (const [, plugin] of container.plugins) {\n      await plugin.update?.(delta);\n    }\n    const resizeFactor = this._resizeFactor;\n    for (const particle of this._array) {\n      if (resizeFactor && !particle.ignoresResizeRatio) {\n        particle.position.x *= resizeFactor.width;\n        particle.position.y *= resizeFactor.height;\n        particle.initialPosition.x *= resizeFactor.width;\n        particle.initialPosition.y *= resizeFactor.height;\n      }\n      particle.ignoresResizeRatio = false;\n      this._interactionManager.reset(particle);\n      for (const [, plugin] of this._container.plugins) {\n        if (particle.destroyed) {\n          break;\n        }\n        plugin.particleUpdate?.(particle, delta);\n      }\n      for (const mover of this.movers) {\n        if (mover.isEnabled(particle)) {\n          await mover.move(particle, delta);\n        }\n      }\n      if (particle.destroyed) {\n        particlesToDelete.add(particle);\n        continue;\n      }\n      this.quadTree.insert(new _Utils_Point_js__WEBPACK_IMPORTED_MODULE_2__.Point(particle.getPosition(), particle));\n    }\n    if (particlesToDelete.size) {\n      const checkDelete = p => !particlesToDelete.has(p);\n      this._array = this.filter(checkDelete);\n      this._zArray = this._zArray.filter(checkDelete);\n      for (const particle of particlesToDelete) {\n        this._engine.dispatchEvent(\"particleRemoved\", {\n          container: this._container,\n          data: {\n            particle\n          }\n        });\n      }\n      this._addToPool(...particlesToDelete);\n    }\n    await this._interactionManager.externalInteract(delta);\n    for (const particle of this._array) {\n      for (const updater of this.updaters) {\n        await updater.update(particle, delta);\n      }\n      if (!particle.destroyed && !particle.spawning) {\n        await this._interactionManager.particlesInteract(particle, delta);\n      }\n    }\n    delete this._resizeFactor;\n    if (this._needsSort) {\n      const zArray = this._zArray;\n      zArray.sort((a, b) => b.position.z - a.position.z || a.id - b.id);\n      const lengthOffset = 1;\n      this._lastZIndex = zArray[zArray.length - lengthOffset].position.z;\n      this._needsSort = false;\n    }\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/pjs/../../engine/dist/browser/Core/Particles.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   Particles: () => (/* binding */ Particles)\n/* harmony export */ });\n/* harmony import */ var _Utils_Utils_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../Utils/Utils.js */ \"../../engine/dist/browser/Utils/Utils.js\");\n/* harmony import */ var _Utils_InteractionManager_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Utils/InteractionManager.js */ \"../../engine/dist/browser/Core/Utils/InteractionManager.js\");\n/* harmony import */ var _Particle_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Particle.js */ \"../../engine/dist/browser/Core/Particle.js\");\n/* harmony import */ var _Utils_Point_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./Utils/Point.js */ \"../../engine/dist/browser/Core/Utils/Point.js\");\n/* harmony import */ var _Utils_QuadTree_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./Utils/QuadTree.js */ \"../../engine/dist/browser/Core/Utils/QuadTree.js\");\n/* harmony import */ var _Utils_Ranges_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./Utils/Ranges.js */ \"../../engine/dist/browser/Core/Utils/Ranges.js\");\n/* harmony import */ var _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./Utils/Constants.js */ \"../../engine/dist/browser/Core/Utils/Constants.js\");\n\n\n\n\n\n\n\nconst qTreeCapacity = 4,\n  squareExp = 2,\n  defaultRemoveQuantity = 1;\nconst qTreeRectangle = canvasSize => {\n  const {\n      height,\n      width\n    } = canvasSize,\n    posOffset = -0.25,\n    sizeFactor = 1.5;\n  return new _Utils_Ranges_js__WEBPACK_IMPORTED_MODULE_5__.Rectangle(posOffset * width, posOffset * height, sizeFactor * width, sizeFactor * height);\n};\nclass Particles {\n  constructor(engine, container) {\n    this._addToPool = (...particles) => {\n      for (const particle of particles) {\n        this._pool.push(particle);\n      }\n    };\n    this._applyDensity = (options, manualCount, group) => {\n      const numberOptions = options.number;\n      if (!options.number.density?.enable) {\n        if (group === undefined) {\n          this._limit = numberOptions.limit.value;\n        } else if (numberOptions.limit) {\n          this._groupLimits.set(group, numberOptions.limit.value);\n        }\n        return;\n      }\n      const densityFactor = this._initDensityFactor(numberOptions.density),\n        optParticlesNumber = numberOptions.value,\n        minLimit = 0,\n        optParticlesLimit = numberOptions.limit.value > minLimit ? numberOptions.limit.value : optParticlesNumber,\n        particlesNumber = Math.min(optParticlesNumber, optParticlesLimit) * densityFactor + manualCount,\n        particlesCount = Math.min(this.count, this.filter(t => t.group === group).length);\n      if (group === undefined) {\n        this._limit = numberOptions.limit.value * densityFactor;\n      } else {\n        this._groupLimits.set(group, numberOptions.limit.value * densityFactor);\n      }\n      if (particlesCount < particlesNumber) {\n        this.push(Math.abs(particlesNumber - particlesCount), undefined, options, group);\n      } else if (particlesCount > particlesNumber) {\n        this.removeQuantity(particlesCount - particlesNumber, group);\n      }\n    };\n    this._initDensityFactor = densityOptions => {\n      const container = this._container,\n        defaultFactor = 1;\n      if (!container.canvas.element || !densityOptions.enable) {\n        return defaultFactor;\n      }\n      const canvas = container.canvas.element,\n        pxRatio = container.retina.pixelRatio;\n      return canvas.width * canvas.height / (densityOptions.height * densityOptions.width * pxRatio ** squareExp);\n    };\n    this._pushParticle = (position, overrideOptions, group, initializer) => {\n      try {\n        let particle = this._pool.pop();\n        if (!particle) {\n          particle = new _Particle_js__WEBPACK_IMPORTED_MODULE_2__.Particle(this._engine, this._container);\n        }\n        particle.init(this._nextId, position, overrideOptions, group);\n        let canAdd = true;\n        if (initializer) {\n          canAdd = initializer(particle);\n        }\n        if (!canAdd) {\n          return;\n        }\n        this._array.push(particle);\n        this._zArray.push(particle);\n        this._nextId++;\n        this._engine.dispatchEvent(\"particleAdded\", {\n          container: this._container,\n          data: {\n            particle\n          }\n        });\n        return particle;\n      } catch (e) {\n        (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_0__.getLogger)().warning(`${_Utils_Constants_js__WEBPACK_IMPORTED_MODULE_6__.errorPrefix} adding particle: ${e}`);\n      }\n    };\n    this._removeParticle = (index, group, override) => {\n      const particle = this._array[index];\n      if (!particle || particle.group !== group) {\n        return false;\n      }\n      const zIdx = this._zArray.indexOf(particle),\n        deleteCount = 1;\n      this._array.splice(index, deleteCount);\n      this._zArray.splice(zIdx, deleteCount);\n      particle.destroy(override);\n      this._engine.dispatchEvent(\"particleRemoved\", {\n        container: this._container,\n        data: {\n          particle\n        }\n      });\n      this._addToPool(particle);\n      return true;\n    };\n    this._engine = engine;\n    this._container = container;\n    this._nextId = 0;\n    this._array = [];\n    this._zArray = [];\n    this._pool = [];\n    this._limit = 0;\n    this._groupLimits = new Map();\n    this._needsSort = false;\n    this._lastZIndex = 0;\n    this._interactionManager = new _Utils_InteractionManager_js__WEBPACK_IMPORTED_MODULE_1__.InteractionManager(engine, container);\n    this._pluginsInitialized = false;\n    const canvasSize = container.canvas.size;\n    this.quadTree = new _Utils_QuadTree_js__WEBPACK_IMPORTED_MODULE_4__.QuadTree(qTreeRectangle(canvasSize), qTreeCapacity);\n    this.movers = [];\n    this.updaters = [];\n  }\n  get count() {\n    return this._array.length;\n  }\n  addManualParticles() {\n    const container = this._container,\n      options = container.actualOptions;\n    for (const particle of options.manualParticles) {\n      this.addParticle(particle.position ? (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_0__.getPosition)(particle.position, container.canvas.size) : undefined, particle.options);\n    }\n  }\n  addParticle(position, overrideOptions, group, initializer) {\n    const limitOptions = this._container.actualOptions.particles.number.limit,\n      limit = group === undefined ? this._limit : this._groupLimits.get(group) ?? this._limit,\n      currentCount = this.count,\n      minLimit = 0;\n    if (limit > minLimit) {\n      if (limitOptions.mode === \"delete\") {\n        const countOffset = 1,\n          minCount = 0,\n          countToRemove = currentCount + countOffset - limit;\n        if (countToRemove > minCount) {\n          this.removeQuantity(countToRemove);\n        }\n      } else if (limitOptions.mode === \"wait\") {\n        if (currentCount >= limit) {\n          return;\n        }\n      }\n    }\n    return this._pushParticle(position, overrideOptions, group, initializer);\n  }\n  clear() {\n    this._array = [];\n    this._zArray = [];\n    this._pluginsInitialized = false;\n  }\n  destroy() {\n    this._array = [];\n    this._zArray = [];\n    this.movers = [];\n    this.updaters = [];\n  }\n  draw(delta) {\n    const container = this._container,\n      canvas = container.canvas;\n    canvas.clear();\n    this.update(delta);\n    for (const [, plugin] of container.plugins) {\n      canvas.drawPlugin(plugin, delta);\n    }\n    for (const p of this._zArray) {\n      p.draw(delta);\n    }\n  }\n  filter(condition) {\n    return this._array.filter(condition);\n  }\n  find(condition) {\n    return this._array.find(condition);\n  }\n  get(index) {\n    return this._array[index];\n  }\n  handleClickMode(mode) {\n    this._interactionManager.handleClickMode(mode);\n  }\n  async init() {\n    const container = this._container,\n      options = container.actualOptions;\n    this._lastZIndex = 0;\n    this._needsSort = false;\n    await this.initPlugins();\n    let handled = false;\n    for (const [, plugin] of container.plugins) {\n      if (plugin.particlesInitialization !== undefined) {\n        handled = plugin.particlesInitialization();\n      }\n      if (handled) {\n        break;\n      }\n    }\n    this.addManualParticles();\n    if (!handled) {\n      const particlesOptions = options.particles,\n        groups = particlesOptions.groups;\n      for (const group in groups) {\n        const groupOptions = groups[group];\n        for (let i = this.count, j = 0; j < groupOptions.number?.value && i < particlesOptions.number.value; i++, j++) {\n          this.addParticle(undefined, groupOptions, group);\n        }\n      }\n      for (let i = this.count; i < particlesOptions.number.value; i++) {\n        this.addParticle();\n      }\n    }\n  }\n  async initPlugins() {\n    if (this._pluginsInitialized) {\n      return;\n    }\n    const container = this._container;\n    this.movers = await this._engine.getMovers(container, true);\n    this.updaters = await this._engine.getUpdaters(container, true);\n    await this._interactionManager.init();\n    for (const [, pathGenerator] of container.pathGenerators) {\n      pathGenerator.init(container);\n    }\n  }\n  push(nb, mouse, overrideOptions, group) {\n    for (let i = 0; i < nb; i++) {\n      this.addParticle(mouse?.position, overrideOptions, group);\n    }\n  }\n  async redraw() {\n    this.clear();\n    await this.init();\n    this.draw({\n      value: 0,\n      factor: 0\n    });\n  }\n  remove(particle, group, override) {\n    this.removeAt(this._array.indexOf(particle), undefined, group, override);\n  }\n  removeAt(index, quantity = defaultRemoveQuantity, group, override) {\n    const minIndex = 0;\n    if (index < minIndex || index > this.count) {\n      return;\n    }\n    let deleted = 0;\n    for (let i = index; deleted < quantity && i < this.count; i++) {\n      if (this._removeParticle(i--, group, override)) {\n        deleted++;\n      }\n    }\n  }\n  removeQuantity(quantity, group) {\n    const defaultIndex = 0;\n    this.removeAt(defaultIndex, quantity, group);\n  }\n  setDensity() {\n    const options = this._container.actualOptions,\n      groups = options.particles.groups,\n      manualCount = 0;\n    for (const group in groups) {\n      this._applyDensity(groups[group], manualCount, group);\n    }\n    this._applyDensity(options.particles, options.manualParticles.length);\n  }\n  setLastZIndex(zIndex) {\n    this._lastZIndex = zIndex;\n    this._needsSort = this._needsSort || this._lastZIndex < zIndex;\n  }\n  setResizeFactor(factor) {\n    this._resizeFactor = factor;\n  }\n  update(delta) {\n    const container = this._container,\n      particlesToDelete = new Set();\n    this.quadTree = new _Utils_QuadTree_js__WEBPACK_IMPORTED_MODULE_4__.QuadTree(qTreeRectangle(container.canvas.size), qTreeCapacity);\n    for (const [, pathGenerator] of container.pathGenerators) {\n      pathGenerator.update();\n    }\n    for (const [, plugin] of container.plugins) {\n      plugin.update?.(delta);\n    }\n    const resizeFactor = this._resizeFactor;\n    for (const particle of this._array) {\n      if (resizeFactor && !particle.ignoresResizeRatio) {\n        particle.position.x *= resizeFactor.width;\n        particle.position.y *= resizeFactor.height;\n        particle.initialPosition.x *= resizeFactor.width;\n        particle.initialPosition.y *= resizeFactor.height;\n      }\n      particle.ignoresResizeRatio = false;\n      this._interactionManager.reset(particle);\n      for (const [, plugin] of this._container.plugins) {\n        if (particle.destroyed) {\n          break;\n        }\n        plugin.particleUpdate?.(particle, delta);\n      }\n      for (const mover of this.movers) {\n        if (mover.isEnabled(particle)) {\n          mover.move(particle, delta);\n        }\n      }\n      if (particle.destroyed) {\n        particlesToDelete.add(particle);\n        continue;\n      }\n      this.quadTree.insert(new _Utils_Point_js__WEBPACK_IMPORTED_MODULE_3__.Point(particle.getPosition(), particle));\n    }\n    if (particlesToDelete.size) {\n      const checkDelete = p => !particlesToDelete.has(p);\n      this._array = this.filter(checkDelete);\n      this._zArray = this._zArray.filter(checkDelete);\n      for (const particle of particlesToDelete) {\n        this._engine.dispatchEvent(\"particleRemoved\", {\n          container: this._container,\n          data: {\n            particle\n          }\n        });\n      }\n      this._addToPool(...particlesToDelete);\n    }\n    this._interactionManager.externalInteract(delta);\n    for (const particle of this._array) {\n      for (const updater of this.updaters) {\n        updater.update(particle, delta);\n      }\n      if (!particle.destroyed && !particle.spawning) {\n        this._interactionManager.particlesInteract(particle, delta);\n      }\n    }\n    delete this._resizeFactor;\n    if (this._needsSort) {\n      const zArray = this._zArray;\n      zArray.sort((a, b) => b.position.z - a.position.z || a.id - b.id);\n      const lengthOffset = 1;\n      this._lastZIndex = zArray[zArray.length - lengthOffset].position.z;\n      this._needsSort = false;\n    }\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/pjs/../../engine/dist/browser/Core/Particles.js?");
 
 /***/ }),
 
@@ -63,7 +73,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
   \**************************************************************/
 /***/ ((__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) => {
 
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   EventListeners: () => (/* binding */ EventListeners)\n/* harmony export */ });\n/* harmony import */ var _Utils_Utils_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../Utils/Utils.js */ \"../../engine/dist/browser/Utils/Utils.js\");\n/* harmony import */ var _Constants_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Constants.js */ \"../../engine/dist/browser/Core/Utils/Constants.js\");\n\n\nconst double = 2;\nfunction manageListener(element, event, handler, add, options) {\n  if (add) {\n    let addOptions = {\n      passive: true\n    };\n    if ((0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_0__.isBoolean)(options)) {\n      addOptions.capture = options;\n    } else if (options !== undefined) {\n      addOptions = options;\n    }\n    element.addEventListener(event, handler, addOptions);\n  } else {\n    const removeOptions = options;\n    element.removeEventListener(event, handler, removeOptions);\n  }\n}\nclass EventListeners {\n  constructor(container) {\n    this.container = container;\n    this._doMouseTouchClick = e => {\n      const container = this.container,\n        options = container.actualOptions;\n      if (this._canPush) {\n        const mouseInteractivity = container.interactivity.mouse,\n          mousePos = mouseInteractivity.position;\n        if (!mousePos) {\n          return;\n        }\n        mouseInteractivity.clickPosition = {\n          ...mousePos\n        };\n        mouseInteractivity.clickTime = new Date().getTime();\n        const onClick = options.interactivity.events.onClick;\n        (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_0__.executeOnSingleOrMultiple)(onClick.mode, mode => this.container.handleClickMode(mode));\n      }\n      if (e.type === \"touchend\") {\n        const touchDelay = 500;\n        setTimeout(() => this._mouseTouchFinish(), touchDelay);\n      }\n    };\n    this._handleThemeChange = e => {\n      const mediaEvent = e,\n        container = this.container,\n        options = container.options,\n        defaultThemes = options.defaultThemes,\n        themeName = mediaEvent.matches ? defaultThemes.dark : defaultThemes.light,\n        theme = options.themes.find(theme => theme.name === themeName);\n      if (theme && theme.default.auto) {\n        void container.loadTheme(themeName);\n      }\n    };\n    this._handleVisibilityChange = () => {\n      const container = this.container,\n        options = container.actualOptions;\n      this._mouseTouchFinish();\n      if (!options.pauseOnBlur) {\n        return;\n      }\n      if (document && document.hidden) {\n        container.pageHidden = true;\n        container.pause();\n      } else {\n        container.pageHidden = false;\n        if (container.animationStatus) {\n          container.play(true);\n        } else {\n          container.draw(true);\n        }\n      }\n    };\n    this._handleWindowResize = () => {\n      if (this._resizeTimeout) {\n        clearTimeout(this._resizeTimeout);\n        delete this._resizeTimeout;\n      }\n      const handleResize = async () => {\n        const canvas = this.container.canvas;\n        await canvas?.windowResize();\n      };\n      this._resizeTimeout = setTimeout(() => void handleResize(), this.container.actualOptions.interactivity.events.resize.delay * _Constants_js__WEBPACK_IMPORTED_MODULE_1__.millisecondsToSeconds);\n    };\n    this._manageInteractivityListeners = (mouseLeaveTmpEvent, add) => {\n      const handlers = this._handlers,\n        container = this.container,\n        options = container.actualOptions;\n      const interactivityEl = container.interactivity.element;\n      if (!interactivityEl) {\n        return;\n      }\n      const html = interactivityEl,\n        canvasEl = container.canvas.element;\n      if (canvasEl) {\n        canvasEl.style.pointerEvents = html === canvasEl ? \"initial\" : \"none\";\n      }\n      if (!(options.interactivity.events.onHover.enable || options.interactivity.events.onClick.enable)) {\n        return;\n      }\n      manageListener(interactivityEl, _Constants_js__WEBPACK_IMPORTED_MODULE_1__.mouseMoveEvent, handlers.mouseMove, add);\n      manageListener(interactivityEl, _Constants_js__WEBPACK_IMPORTED_MODULE_1__.touchStartEvent, handlers.touchStart, add);\n      manageListener(interactivityEl, _Constants_js__WEBPACK_IMPORTED_MODULE_1__.touchMoveEvent, handlers.touchMove, add);\n      if (!options.interactivity.events.onClick.enable) {\n        manageListener(interactivityEl, _Constants_js__WEBPACK_IMPORTED_MODULE_1__.touchEndEvent, handlers.touchEnd, add);\n      } else {\n        manageListener(interactivityEl, _Constants_js__WEBPACK_IMPORTED_MODULE_1__.touchEndEvent, handlers.touchEndClick, add);\n        manageListener(interactivityEl, _Constants_js__WEBPACK_IMPORTED_MODULE_1__.mouseUpEvent, handlers.mouseUp, add);\n        manageListener(interactivityEl, _Constants_js__WEBPACK_IMPORTED_MODULE_1__.mouseDownEvent, handlers.mouseDown, add);\n      }\n      manageListener(interactivityEl, mouseLeaveTmpEvent, handlers.mouseLeave, add);\n      manageListener(interactivityEl, _Constants_js__WEBPACK_IMPORTED_MODULE_1__.touchCancelEvent, handlers.touchCancel, add);\n    };\n    this._manageListeners = add => {\n      const handlers = this._handlers,\n        container = this.container,\n        options = container.actualOptions,\n        detectType = options.interactivity.detectsOn,\n        canvasEl = container.canvas.element;\n      let mouseLeaveTmpEvent = _Constants_js__WEBPACK_IMPORTED_MODULE_1__.mouseLeaveEvent;\n      if (detectType === \"window\") {\n        container.interactivity.element = window;\n        mouseLeaveTmpEvent = _Constants_js__WEBPACK_IMPORTED_MODULE_1__.mouseOutEvent;\n      } else if (detectType === \"parent\" && canvasEl) {\n        container.interactivity.element = canvasEl.parentElement ?? canvasEl.parentNode;\n      } else {\n        container.interactivity.element = canvasEl;\n      }\n      this._manageMediaMatch(add);\n      this._manageResize(add);\n      this._manageInteractivityListeners(mouseLeaveTmpEvent, add);\n      if (document) {\n        manageListener(document, _Constants_js__WEBPACK_IMPORTED_MODULE_1__.visibilityChangeEvent, handlers.visibilityChange, add, false);\n      }\n    };\n    this._manageMediaMatch = add => {\n      const handlers = this._handlers,\n        mediaMatch = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_0__.safeMatchMedia)(\"(prefers-color-scheme: dark)\");\n      if (!mediaMatch) {\n        return;\n      }\n      if (mediaMatch.addEventListener !== undefined) {\n        manageListener(mediaMatch, \"change\", handlers.themeChange, add);\n        return;\n      }\n      if (mediaMatch.addListener === undefined) {\n        return;\n      }\n      if (add) {\n        mediaMatch.addListener(handlers.oldThemeChange);\n      } else {\n        mediaMatch.removeListener(handlers.oldThemeChange);\n      }\n    };\n    this._manageResize = add => {\n      const handlers = this._handlers,\n        container = this.container,\n        options = container.actualOptions;\n      if (!options.interactivity.events.resize) {\n        return;\n      }\n      if (typeof ResizeObserver === \"undefined\") {\n        manageListener(window, _Constants_js__WEBPACK_IMPORTED_MODULE_1__.resizeEvent, handlers.resize, add);\n        return;\n      }\n      const canvasEl = container.canvas.element;\n      if (this._resizeObserver && !add) {\n        if (canvasEl) {\n          this._resizeObserver.unobserve(canvasEl);\n        }\n        this._resizeObserver.disconnect();\n        delete this._resizeObserver;\n      } else if (!this._resizeObserver && add && canvasEl) {\n        this._resizeObserver = new ResizeObserver(entries => {\n          const entry = entries.find(e => e.target === canvasEl);\n          if (!entry) {\n            return;\n          }\n          this._handleWindowResize();\n        });\n        this._resizeObserver.observe(canvasEl);\n      }\n    };\n    this._mouseDown = () => {\n      const {\n        interactivity\n      } = this.container;\n      if (!interactivity) {\n        return;\n      }\n      const {\n        mouse\n      } = interactivity;\n      mouse.clicking = true;\n      mouse.downPosition = mouse.position;\n    };\n    this._mouseTouchClick = e => {\n      const container = this.container,\n        options = container.actualOptions,\n        {\n          mouse\n        } = container.interactivity;\n      mouse.inside = true;\n      let handled = false;\n      const mousePosition = mouse.position;\n      if (!mousePosition || !options.interactivity.events.onClick.enable) {\n        return;\n      }\n      for (const [, plugin] of container.plugins) {\n        if (!plugin.clickPositionValid) {\n          continue;\n        }\n        handled = plugin.clickPositionValid(mousePosition);\n        if (handled) {\n          break;\n        }\n      }\n      if (!handled) {\n        this._doMouseTouchClick(e);\n      }\n      mouse.clicking = false;\n    };\n    this._mouseTouchFinish = () => {\n      const interactivity = this.container.interactivity;\n      if (!interactivity) {\n        return;\n      }\n      const mouse = interactivity.mouse;\n      delete mouse.position;\n      delete mouse.clickPosition;\n      delete mouse.downPosition;\n      interactivity.status = _Constants_js__WEBPACK_IMPORTED_MODULE_1__.mouseLeaveEvent;\n      mouse.inside = false;\n      mouse.clicking = false;\n    };\n    this._mouseTouchMove = e => {\n      const container = this.container,\n        options = container.actualOptions,\n        interactivity = container.interactivity,\n        canvasEl = container.canvas.element;\n      if (!interactivity?.element) {\n        return;\n      }\n      interactivity.mouse.inside = true;\n      let pos;\n      if (e.type.startsWith(\"pointer\")) {\n        this._canPush = true;\n        const mouseEvent = e;\n        if (interactivity.element === window) {\n          if (canvasEl) {\n            const clientRect = canvasEl.getBoundingClientRect();\n            pos = {\n              x: mouseEvent.clientX - clientRect.left,\n              y: mouseEvent.clientY - clientRect.top\n            };\n          }\n        } else if (options.interactivity.detectsOn === \"parent\") {\n          const source = mouseEvent.target,\n            target = mouseEvent.currentTarget;\n          if (source && target && canvasEl) {\n            const sourceRect = source.getBoundingClientRect(),\n              targetRect = target.getBoundingClientRect(),\n              canvasRect = canvasEl.getBoundingClientRect();\n            pos = {\n              x: mouseEvent.offsetX + double * sourceRect.left - (targetRect.left + canvasRect.left),\n              y: mouseEvent.offsetY + double * sourceRect.top - (targetRect.top + canvasRect.top)\n            };\n          } else {\n            pos = {\n              x: mouseEvent.offsetX ?? mouseEvent.clientX,\n              y: mouseEvent.offsetY ?? mouseEvent.clientY\n            };\n          }\n        } else if (mouseEvent.target === canvasEl) {\n          pos = {\n            x: mouseEvent.offsetX ?? mouseEvent.clientX,\n            y: mouseEvent.offsetY ?? mouseEvent.clientY\n          };\n        }\n      } else {\n        this._canPush = e.type !== \"touchmove\";\n        if (canvasEl) {\n          const touchEvent = e,\n            lengthOffset = 1,\n            lastTouch = touchEvent.touches[touchEvent.touches.length - lengthOffset],\n            canvasRect = canvasEl.getBoundingClientRect(),\n            defaultCoordinate = 0;\n          pos = {\n            x: lastTouch.clientX - (canvasRect.left ?? defaultCoordinate),\n            y: lastTouch.clientY - (canvasRect.top ?? defaultCoordinate)\n          };\n        }\n      }\n      const pxRatio = container.retina.pixelRatio;\n      if (pos) {\n        pos.x *= pxRatio;\n        pos.y *= pxRatio;\n      }\n      interactivity.mouse.position = pos;\n      interactivity.status = _Constants_js__WEBPACK_IMPORTED_MODULE_1__.mouseMoveEvent;\n    };\n    this._touchEnd = e => {\n      const evt = e,\n        touches = Array.from(evt.changedTouches);\n      for (const touch of touches) {\n        this._touches.delete(touch.identifier);\n      }\n      this._mouseTouchFinish();\n    };\n    this._touchEndClick = e => {\n      const evt = e,\n        touches = Array.from(evt.changedTouches);\n      for (const touch of touches) {\n        this._touches.delete(touch.identifier);\n      }\n      this._mouseTouchClick(e);\n    };\n    this._touchStart = e => {\n      const evt = e,\n        touches = Array.from(evt.changedTouches);\n      for (const touch of touches) {\n        this._touches.set(touch.identifier, performance.now());\n      }\n      this._mouseTouchMove(e);\n    };\n    this._canPush = true;\n    this._touches = new Map();\n    this._handlers = {\n      mouseDown: () => this._mouseDown(),\n      mouseLeave: () => this._mouseTouchFinish(),\n      mouseMove: e => this._mouseTouchMove(e),\n      mouseUp: e => this._mouseTouchClick(e),\n      touchStart: e => this._touchStart(e),\n      touchMove: e => this._mouseTouchMove(e),\n      touchEnd: e => this._touchEnd(e),\n      touchCancel: e => this._touchEnd(e),\n      touchEndClick: e => this._touchEndClick(e),\n      visibilityChange: () => this._handleVisibilityChange(),\n      themeChange: e => this._handleThemeChange(e),\n      oldThemeChange: e => this._handleThemeChange(e),\n      resize: () => {\n        this._handleWindowResize();\n      }\n    };\n  }\n  addListeners() {\n    this._manageListeners(true);\n  }\n  removeListeners() {\n    this._manageListeners(false);\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/pjs/../../engine/dist/browser/Core/Utils/EventListeners.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   EventListeners: () => (/* binding */ EventListeners)\n/* harmony export */ });\n/* harmony import */ var _Utils_Utils_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../Utils/Utils.js */ \"../../engine/dist/browser/Utils/Utils.js\");\n/* harmony import */ var _Constants_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Constants.js */ \"../../engine/dist/browser/Core/Utils/Constants.js\");\n/* harmony import */ var _Utils_TypeUtils_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../Utils/TypeUtils.js */ \"../../engine/dist/browser/Utils/TypeUtils.js\");\n\n\n\nconst double = 2;\nfunction manageListener(element, event, handler, add, options) {\n  if (add) {\n    let addOptions = {\n      passive: true\n    };\n    if ((0,_Utils_TypeUtils_js__WEBPACK_IMPORTED_MODULE_2__.isBoolean)(options)) {\n      addOptions.capture = options;\n    } else if (options !== undefined) {\n      addOptions = options;\n    }\n    element.addEventListener(event, handler, addOptions);\n  } else {\n    const removeOptions = options;\n    element.removeEventListener(event, handler, removeOptions);\n  }\n}\nclass EventListeners {\n  constructor(container) {\n    this.container = container;\n    this._doMouseTouchClick = e => {\n      const container = this.container,\n        options = container.actualOptions;\n      if (this._canPush) {\n        const mouseInteractivity = container.interactivity.mouse,\n          mousePos = mouseInteractivity.position;\n        if (!mousePos) {\n          return;\n        }\n        mouseInteractivity.clickPosition = {\n          ...mousePos\n        };\n        mouseInteractivity.clickTime = new Date().getTime();\n        const onClick = options.interactivity.events.onClick;\n        (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_0__.executeOnSingleOrMultiple)(onClick.mode, mode => this.container.handleClickMode(mode));\n      }\n      if (e.type === \"touchend\") {\n        const touchDelay = 500;\n        setTimeout(() => this._mouseTouchFinish(), touchDelay);\n      }\n    };\n    this._handleThemeChange = e => {\n      const mediaEvent = e,\n        container = this.container,\n        options = container.options,\n        defaultThemes = options.defaultThemes,\n        themeName = mediaEvent.matches ? defaultThemes.dark : defaultThemes.light,\n        theme = options.themes.find(theme => theme.name === themeName);\n      if (theme && theme.default.auto) {\n        void container.loadTheme(themeName);\n      }\n    };\n    this._handleVisibilityChange = () => {\n      const container = this.container,\n        options = container.actualOptions;\n      this._mouseTouchFinish();\n      if (!options.pauseOnBlur) {\n        return;\n      }\n      if (document && document.hidden) {\n        container.pageHidden = true;\n        container.pause();\n      } else {\n        container.pageHidden = false;\n        if (container.animationStatus) {\n          void container.play(true);\n        } else {\n          void container.draw(true);\n        }\n      }\n    };\n    this._handleWindowResize = () => {\n      if (this._resizeTimeout) {\n        clearTimeout(this._resizeTimeout);\n        delete this._resizeTimeout;\n      }\n      const handleResize = async () => {\n        const canvas = this.container.canvas;\n        await canvas?.windowResize();\n      };\n      this._resizeTimeout = setTimeout(() => void handleResize(), this.container.actualOptions.interactivity.events.resize.delay * _Constants_js__WEBPACK_IMPORTED_MODULE_1__.millisecondsToSeconds);\n    };\n    this._manageInteractivityListeners = (mouseLeaveTmpEvent, add) => {\n      const handlers = this._handlers,\n        container = this.container,\n        options = container.actualOptions;\n      const interactivityEl = container.interactivity.element;\n      if (!interactivityEl) {\n        return;\n      }\n      const html = interactivityEl,\n        canvasEl = container.canvas.element;\n      if (canvasEl) {\n        canvasEl.style.pointerEvents = html === canvasEl ? \"initial\" : \"none\";\n      }\n      if (!(options.interactivity.events.onHover.enable || options.interactivity.events.onClick.enable)) {\n        return;\n      }\n      manageListener(interactivityEl, _Constants_js__WEBPACK_IMPORTED_MODULE_1__.mouseMoveEvent, handlers.mouseMove, add);\n      manageListener(interactivityEl, _Constants_js__WEBPACK_IMPORTED_MODULE_1__.touchStartEvent, handlers.touchStart, add);\n      manageListener(interactivityEl, _Constants_js__WEBPACK_IMPORTED_MODULE_1__.touchMoveEvent, handlers.touchMove, add);\n      if (!options.interactivity.events.onClick.enable) {\n        manageListener(interactivityEl, _Constants_js__WEBPACK_IMPORTED_MODULE_1__.touchEndEvent, handlers.touchEnd, add);\n      } else {\n        manageListener(interactivityEl, _Constants_js__WEBPACK_IMPORTED_MODULE_1__.touchEndEvent, handlers.touchEndClick, add);\n        manageListener(interactivityEl, _Constants_js__WEBPACK_IMPORTED_MODULE_1__.mouseUpEvent, handlers.mouseUp, add);\n        manageListener(interactivityEl, _Constants_js__WEBPACK_IMPORTED_MODULE_1__.mouseDownEvent, handlers.mouseDown, add);\n      }\n      manageListener(interactivityEl, mouseLeaveTmpEvent, handlers.mouseLeave, add);\n      manageListener(interactivityEl, _Constants_js__WEBPACK_IMPORTED_MODULE_1__.touchCancelEvent, handlers.touchCancel, add);\n    };\n    this._manageListeners = add => {\n      const handlers = this._handlers,\n        container = this.container,\n        options = container.actualOptions,\n        detectType = options.interactivity.detectsOn,\n        canvasEl = container.canvas.element;\n      let mouseLeaveTmpEvent = _Constants_js__WEBPACK_IMPORTED_MODULE_1__.mouseLeaveEvent;\n      if (detectType === \"window\") {\n        container.interactivity.element = window;\n        mouseLeaveTmpEvent = _Constants_js__WEBPACK_IMPORTED_MODULE_1__.mouseOutEvent;\n      } else if (detectType === \"parent\" && canvasEl) {\n        container.interactivity.element = canvasEl.parentElement ?? canvasEl.parentNode;\n      } else {\n        container.interactivity.element = canvasEl;\n      }\n      this._manageMediaMatch(add);\n      this._manageResize(add);\n      this._manageInteractivityListeners(mouseLeaveTmpEvent, add);\n      if (document) {\n        manageListener(document, _Constants_js__WEBPACK_IMPORTED_MODULE_1__.visibilityChangeEvent, handlers.visibilityChange, add, false);\n      }\n    };\n    this._manageMediaMatch = add => {\n      const handlers = this._handlers,\n        mediaMatch = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_0__.safeMatchMedia)(\"(prefers-color-scheme: dark)\");\n      if (!mediaMatch) {\n        return;\n      }\n      if (mediaMatch.addEventListener !== undefined) {\n        manageListener(mediaMatch, \"change\", handlers.themeChange, add);\n        return;\n      }\n      if (mediaMatch.addListener === undefined) {\n        return;\n      }\n      if (add) {\n        mediaMatch.addListener(handlers.oldThemeChange);\n      } else {\n        mediaMatch.removeListener(handlers.oldThemeChange);\n      }\n    };\n    this._manageResize = add => {\n      const handlers = this._handlers,\n        container = this.container,\n        options = container.actualOptions;\n      if (!options.interactivity.events.resize) {\n        return;\n      }\n      if (typeof ResizeObserver === \"undefined\") {\n        manageListener(window, _Constants_js__WEBPACK_IMPORTED_MODULE_1__.resizeEvent, handlers.resize, add);\n        return;\n      }\n      const canvasEl = container.canvas.element;\n      if (this._resizeObserver && !add) {\n        if (canvasEl) {\n          this._resizeObserver.unobserve(canvasEl);\n        }\n        this._resizeObserver.disconnect();\n        delete this._resizeObserver;\n      } else if (!this._resizeObserver && add && canvasEl) {\n        this._resizeObserver = new ResizeObserver(entries => {\n          const entry = entries.find(e => e.target === canvasEl);\n          if (!entry) {\n            return;\n          }\n          this._handleWindowResize();\n        });\n        this._resizeObserver.observe(canvasEl);\n      }\n    };\n    this._mouseDown = () => {\n      const {\n        interactivity\n      } = this.container;\n      if (!interactivity) {\n        return;\n      }\n      const {\n        mouse\n      } = interactivity;\n      mouse.clicking = true;\n      mouse.downPosition = mouse.position;\n    };\n    this._mouseTouchClick = e => {\n      const container = this.container,\n        options = container.actualOptions,\n        {\n          mouse\n        } = container.interactivity;\n      mouse.inside = true;\n      let handled = false;\n      const mousePosition = mouse.position;\n      if (!mousePosition || !options.interactivity.events.onClick.enable) {\n        return;\n      }\n      for (const [, plugin] of container.plugins) {\n        if (!plugin.clickPositionValid) {\n          continue;\n        }\n        handled = plugin.clickPositionValid(mousePosition);\n        if (handled) {\n          break;\n        }\n      }\n      if (!handled) {\n        this._doMouseTouchClick(e);\n      }\n      mouse.clicking = false;\n    };\n    this._mouseTouchFinish = () => {\n      const interactivity = this.container.interactivity;\n      if (!interactivity) {\n        return;\n      }\n      const mouse = interactivity.mouse;\n      delete mouse.position;\n      delete mouse.clickPosition;\n      delete mouse.downPosition;\n      interactivity.status = _Constants_js__WEBPACK_IMPORTED_MODULE_1__.mouseLeaveEvent;\n      mouse.inside = false;\n      mouse.clicking = false;\n    };\n    this._mouseTouchMove = e => {\n      const container = this.container,\n        options = container.actualOptions,\n        interactivity = container.interactivity,\n        canvasEl = container.canvas.element;\n      if (!interactivity?.element) {\n        return;\n      }\n      interactivity.mouse.inside = true;\n      let pos;\n      if (e.type.startsWith(\"pointer\")) {\n        this._canPush = true;\n        const mouseEvent = e;\n        if (interactivity.element === window) {\n          if (canvasEl) {\n            const clientRect = canvasEl.getBoundingClientRect();\n            pos = {\n              x: mouseEvent.clientX - clientRect.left,\n              y: mouseEvent.clientY - clientRect.top\n            };\n          }\n        } else if (options.interactivity.detectsOn === \"parent\") {\n          const source = mouseEvent.target,\n            target = mouseEvent.currentTarget;\n          if (source && target && canvasEl) {\n            const sourceRect = source.getBoundingClientRect(),\n              targetRect = target.getBoundingClientRect(),\n              canvasRect = canvasEl.getBoundingClientRect();\n            pos = {\n              x: mouseEvent.offsetX + double * sourceRect.left - (targetRect.left + canvasRect.left),\n              y: mouseEvent.offsetY + double * sourceRect.top - (targetRect.top + canvasRect.top)\n            };\n          } else {\n            pos = {\n              x: mouseEvent.offsetX ?? mouseEvent.clientX,\n              y: mouseEvent.offsetY ?? mouseEvent.clientY\n            };\n          }\n        } else if (mouseEvent.target === canvasEl) {\n          pos = {\n            x: mouseEvent.offsetX ?? mouseEvent.clientX,\n            y: mouseEvent.offsetY ?? mouseEvent.clientY\n          };\n        }\n      } else {\n        this._canPush = e.type !== \"touchmove\";\n        if (canvasEl) {\n          const touchEvent = e,\n            lengthOffset = 1,\n            lastTouch = touchEvent.touches[touchEvent.touches.length - lengthOffset],\n            canvasRect = canvasEl.getBoundingClientRect(),\n            defaultCoordinate = 0;\n          pos = {\n            x: lastTouch.clientX - (canvasRect.left ?? defaultCoordinate),\n            y: lastTouch.clientY - (canvasRect.top ?? defaultCoordinate)\n          };\n        }\n      }\n      const pxRatio = container.retina.pixelRatio;\n      if (pos) {\n        pos.x *= pxRatio;\n        pos.y *= pxRatio;\n      }\n      interactivity.mouse.position = pos;\n      interactivity.status = _Constants_js__WEBPACK_IMPORTED_MODULE_1__.mouseMoveEvent;\n    };\n    this._touchEnd = e => {\n      const evt = e,\n        touches = Array.from(evt.changedTouches);\n      for (const touch of touches) {\n        this._touches.delete(touch.identifier);\n      }\n      this._mouseTouchFinish();\n    };\n    this._touchEndClick = e => {\n      const evt = e,\n        touches = Array.from(evt.changedTouches);\n      for (const touch of touches) {\n        this._touches.delete(touch.identifier);\n      }\n      this._mouseTouchClick(e);\n    };\n    this._touchStart = e => {\n      const evt = e,\n        touches = Array.from(evt.changedTouches);\n      for (const touch of touches) {\n        this._touches.set(touch.identifier, performance.now());\n      }\n      this._mouseTouchMove(e);\n    };\n    this._canPush = true;\n    this._touches = new Map();\n    this._handlers = {\n      mouseDown: () => this._mouseDown(),\n      mouseLeave: () => this._mouseTouchFinish(),\n      mouseMove: e => this._mouseTouchMove(e),\n      mouseUp: e => this._mouseTouchClick(e),\n      touchStart: e => this._touchStart(e),\n      touchMove: e => this._mouseTouchMove(e),\n      touchEnd: e => this._touchEnd(e),\n      touchCancel: e => this._touchEnd(e),\n      touchEndClick: e => this._touchEndClick(e),\n      visibilityChange: () => this._handleVisibilityChange(),\n      themeChange: e => this._handleThemeChange(e),\n      oldThemeChange: e => this._handleThemeChange(e),\n      resize: () => {\n        this._handleWindowResize();\n      }\n    };\n  }\n  addListeners() {\n    this._manageListeners(true);\n  }\n  removeListeners() {\n    this._manageListeners(false);\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/pjs/../../engine/dist/browser/Core/Utils/EventListeners.js?");
 
 /***/ }),
 
@@ -73,7 +83,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
   \******************************************************************/
 /***/ ((__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) => {
 
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   InteractionManager: () => (/* binding */ InteractionManager)\n/* harmony export */ });\nclass InteractionManager {\n  constructor(engine, container) {\n    this.container = container;\n    this._engine = engine;\n    this._interactors = [];\n    this._externalInteractors = [];\n    this._particleInteractors = [];\n  }\n  async externalInteract(delta) {\n    for (const interactor of this._externalInteractors) {\n      if (interactor.isEnabled()) {\n        await interactor.interact(delta);\n      }\n    }\n  }\n  handleClickMode(mode) {\n    for (const interactor of this._externalInteractors) {\n      interactor.handleClickMode?.(mode);\n    }\n  }\n  async init() {\n    this._interactors = await this._engine.getInteractors(this.container, true);\n    this._externalInteractors = [];\n    this._particleInteractors = [];\n    for (const interactor of this._interactors) {\n      switch (interactor.type) {\n        case \"external\":\n          this._externalInteractors.push(interactor);\n          break;\n        case \"particles\":\n          this._particleInteractors.push(interactor);\n          break;\n      }\n      interactor.init();\n    }\n  }\n  async particlesInteract(particle, delta) {\n    for (const interactor of this._externalInteractors) {\n      interactor.clear(particle, delta);\n    }\n    for (const interactor of this._particleInteractors) {\n      if (interactor.isEnabled(particle)) {\n        await interactor.interact(particle, delta);\n      }\n    }\n  }\n  reset(particle) {\n    for (const interactor of this._externalInteractors) {\n      if (interactor.isEnabled()) {\n        interactor.reset(particle);\n      }\n    }\n    for (const interactor of this._particleInteractors) {\n      if (interactor.isEnabled(particle)) {\n        interactor.reset(particle);\n      }\n    }\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/pjs/../../engine/dist/browser/Core/Utils/InteractionManager.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   InteractionManager: () => (/* binding */ InteractionManager)\n/* harmony export */ });\nclass InteractionManager {\n  constructor(engine, container) {\n    this.container = container;\n    this._engine = engine;\n    this._interactors = [];\n    this._externalInteractors = [];\n    this._particleInteractors = [];\n  }\n  externalInteract(delta) {\n    for (const interactor of this._externalInteractors) {\n      if (interactor.isEnabled()) {\n        interactor.interact(delta);\n      }\n    }\n  }\n  handleClickMode(mode) {\n    for (const interactor of this._externalInteractors) {\n      interactor.handleClickMode?.(mode);\n    }\n  }\n  async init() {\n    this._interactors = await this._engine.getInteractors(this.container, true);\n    this._externalInteractors = [];\n    this._particleInteractors = [];\n    for (const interactor of this._interactors) {\n      switch (interactor.type) {\n        case \"external\":\n          this._externalInteractors.push(interactor);\n          break;\n        case \"particles\":\n          this._particleInteractors.push(interactor);\n          break;\n      }\n      interactor.init();\n    }\n  }\n  particlesInteract(particle, delta) {\n    for (const interactor of this._externalInteractors) {\n      interactor.clear(particle, delta);\n    }\n    for (const interactor of this._particleInteractors) {\n      if (interactor.isEnabled(particle)) {\n        interactor.interact(particle, delta);\n      }\n    }\n  }\n  reset(particle) {\n    for (const interactor of this._externalInteractors) {\n      if (interactor.isEnabled()) {\n        interactor.reset(particle);\n      }\n    }\n    for (const interactor of this._particleInteractors) {\n      if (interactor.isEnabled(particle)) {\n        interactor.reset(particle);\n      }\n    }\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/pjs/../../engine/dist/browser/Core/Utils/InteractionManager.js?");
 
 /***/ }),
 
@@ -83,7 +93,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
   \********************************************************/
 /***/ ((__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) => {
 
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   QuadTree: () => (/* binding */ QuadTree)\n/* harmony export */ });\n/* harmony import */ var _Circle_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Circle.js */ \"../../engine/dist/browser/Core/Utils/Circle.js\");\n/* harmony import */ var _Rectangle_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Rectangle.js */ \"../../engine/dist/browser/Core/Utils/Rectangle.js\");\n/* harmony import */ var _Utils_NumberUtils_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../Utils/NumberUtils.js */ \"../../engine/dist/browser/Utils/NumberUtils.js\");\n\n\n\nconst half = 0.5,\n  double = 2,\n  subdivideCount = 4;\nclass QuadTree {\n  constructor(rectangle, capacity) {\n    this.rectangle = rectangle;\n    this.capacity = capacity;\n    this._subdivide = () => {\n      const {\n          x,\n          y\n        } = this.rectangle.position,\n        {\n          width,\n          height\n        } = this.rectangle.size,\n        {\n          capacity\n        } = this;\n      for (let i = 0; i < subdivideCount; i++) {\n        const fixedIndex = i % double;\n        this._subs.push(new QuadTree(new _Rectangle_js__WEBPACK_IMPORTED_MODULE_1__.Rectangle(x + width * half * fixedIndex, y + height * half * (Math.round(i * half) - fixedIndex), width * half, height * half), capacity));\n      }\n      this._divided = true;\n    };\n    this._points = [];\n    this._divided = false;\n    this._subs = [];\n  }\n  insert(point) {\n    if (!this.rectangle.contains(point.position)) {\n      return false;\n    }\n    if (this._points.length < this.capacity) {\n      this._points.push(point);\n      return true;\n    }\n    if (!this._divided) {\n      this._subdivide();\n    }\n    return this._subs.some(sub => sub.insert(point));\n  }\n  query(range, check, found) {\n    const res = found ?? [];\n    if (!range.intersects(this.rectangle)) {\n      return [];\n    }\n    for (const p of this._points) {\n      if (!range.contains(p.position) && (0,_Utils_NumberUtils_js__WEBPACK_IMPORTED_MODULE_2__.getDistance)(range.position, p.position) > p.particle.getRadius() && (!check || check(p.particle))) {\n        continue;\n      }\n      res.push(p.particle);\n    }\n    if (this._divided) {\n      for (const sub of this._subs) {\n        sub.query(range, check, res);\n      }\n    }\n    return res;\n  }\n  queryCircle(position, radius, check) {\n    return this.query(new _Circle_js__WEBPACK_IMPORTED_MODULE_0__.Circle(position.x, position.y, radius), check);\n  }\n  queryRectangle(position, size, check) {\n    return this.query(new _Rectangle_js__WEBPACK_IMPORTED_MODULE_1__.Rectangle(position.x, position.y, size.width, size.height), check);\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/pjs/../../engine/dist/browser/Core/Utils/QuadTree.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   QuadTree: () => (/* binding */ QuadTree)\n/* harmony export */ });\n/* harmony import */ var _Ranges_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Ranges.js */ \"../../engine/dist/browser/Core/Utils/Ranges.js\");\n/* harmony import */ var _Utils_NumberUtils_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../Utils/NumberUtils.js */ \"../../engine/dist/browser/Utils/NumberUtils.js\");\n\n\nconst half = 0.5,\n  double = 2,\n  subdivideCount = 4;\nclass QuadTree {\n  constructor(rectangle, capacity) {\n    this.rectangle = rectangle;\n    this.capacity = capacity;\n    this._subdivide = () => {\n      const {\n          x,\n          y\n        } = this.rectangle.position,\n        {\n          width,\n          height\n        } = this.rectangle.size,\n        {\n          capacity\n        } = this;\n      for (let i = 0; i < subdivideCount; i++) {\n        const fixedIndex = i % double;\n        this._subs.push(new QuadTree(new _Ranges_js__WEBPACK_IMPORTED_MODULE_0__.Rectangle(x + width * half * fixedIndex, y + height * half * (Math.round(i * half) - fixedIndex), width * half, height * half), capacity));\n      }\n      this._divided = true;\n    };\n    this._points = [];\n    this._divided = false;\n    this._subs = [];\n  }\n  insert(point) {\n    if (!this.rectangle.contains(point.position)) {\n      return false;\n    }\n    if (this._points.length < this.capacity) {\n      this._points.push(point);\n      return true;\n    }\n    if (!this._divided) {\n      this._subdivide();\n    }\n    return this._subs.some(sub => sub.insert(point));\n  }\n  query(range, check) {\n    const res = [];\n    if (!range.intersects(this.rectangle)) {\n      return [];\n    }\n    for (const p of this._points) {\n      if (!range.contains(p.position) && (0,_Utils_NumberUtils_js__WEBPACK_IMPORTED_MODULE_1__.getDistance)(range.position, p.position) > p.particle.getRadius() && (!check || check(p.particle))) {\n        continue;\n      }\n      res.push(p.particle);\n    }\n    if (this._divided) {\n      for (const sub of this._subs) {\n        res.push(...sub.query(range, check));\n      }\n    }\n    return res;\n  }\n  queryCircle(position, radius, check) {\n    return this.query(new _Ranges_js__WEBPACK_IMPORTED_MODULE_0__.Circle(position.x, position.y, radius), check);\n  }\n  queryRectangle(position, size, check) {\n    return this.query(new _Ranges_js__WEBPACK_IMPORTED_MODULE_0__.Rectangle(position.x, position.y, size.width, size.height), check);\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/pjs/../../engine/dist/browser/Core/Utils/QuadTree.js?");
 
 /***/ })
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsparticles/pjs",
-  "version": "3.2.1",
+  "version": "3.3.0",
   "description": "Easily create highly customizable particle animations and use them as animated backgrounds for your website. Ready to use components available also for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Riot.js, Inferno.",
   "homepage": "https://particles.js.org",
   "repository": {
@@ -99,7 +99,7 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@tsparticles/engine": "^3.2.1"
+    "@tsparticles/engine": "^3.3.0"
   },
   "publishConfig": {
     "access": "public"

package/report.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
-    <title>@tsparticles/pjs [31 Jan 2024 at 09:48]</title>
+    <title>@tsparticles/pjs [27 Feb 2024 at 12:14]</title>
     <link rel="shortcut icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAABrVBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+O1foceMD///+J0/qK1Pr7/v8Xdr/9///W8P4UdL7L7P0Scr2r4Pyj3vwad8D5/f/2/f+55f3E6f34+/2H0/ojfMKpzOd0rNgQcb3F3O/j9f7c8v6g3Pz0/P/w+v/q+P7n9v6T1/uQ1vuE0vqLut/y+v+Z2fvt+f+15Pzv9fuc2/vR7v2V2Pvd6/bg9P7I6/285/2y4/yp3/zp8vk8i8kqgMT7/P31+fyv4vxGkcz6/P6/6P3j7vfS5PNnpNUxhcbO7f7F6v3O4vHK3/DA2u631Ouy0eqXweKJud5wqthfoNMMbLvY8f73+v2dxeR8sNtTmdDx9/zX6PSjyeaCtd1YnNGX2PuQveCGt95Nls42h8dLlM3F4vBtAAAAM3RSTlMAAyOx0/sKBvik8opWGBMOAe3l1snDm2E9LSb06eHcu5JpHbarfHZCN9CBb08zzkdNS0kYaptYAAAFV0lEQVRYw92X51/aYBDHHS2O2qqttVbrqNq9m+TJIAYIShBkWwqIiCgoWvfeq7Z2/s29hyQNyUcR7LveGwVyXy6XH8/9rqxglLfUPLxVduUor3h0rfp2TYvpivk37929TkG037hffoX0+peVtZQc1589rigVUdXS/ABSAyEmGIO/1XfvldSK8vs3OqB6u3m0nxmIrvgB0dj7rr7Y9IbuF68hnfFaiHA/sxqm0wciIG43P60qKv9WXWc1RXGh/mFESFABTSBi0sNAKzqet17eCtOb3kZIDwxEEU0oAIJGYxNBDhBND29e0rtXXbcpuPmED9IhEAAQ/AXEaF8EPmnrrKsv0LvWR3fg5sWDNAFZOgAgaKvZDogHNU9MFwnnYROkc56RD5CjAbQX9Ow4g7upCsvYu55aSI/Nj0H1akgKQEUM94dwK65hYRmFU9MIcH/fqJYOZYcnuJSU/waKDgTOEVaVKhwrTRP5XzgSpAITYzom7UvkhFX5VutmxeNnWDjjswTKTyfgluNDGbUpWissXhF3s7mlSml+czWkg3D0l1nNjGNjz3myOQOa1KM/jOS6ebdbAVTCi4gljHSFrviza7tOgRWcS0MOUX9zdNgag5w7rRqA44Lzw0hr1WqES36dFliSJFlh2rXIae3FFcDDgKdxrUIDePr8jGcSClV1u7A9xeN0ModY/pHMxmR1EzRh8TJiwqsHmKW0l4FCEZI+jHio+JdPPE9qwQtTRxku2D8sIeRL2LnxWSllANCQGOIiqVHAz2ye2JR0DcH+HoxDkaADLjgxjKQ+AwCX/g0+DNgdG0ukYCONAe+dbc2IAc6fwt1ARoDSezNHxV2Cmzwv3O6lDMV55edBGwGK9n1+x2F8EDfAGCxug8MhpsMEcTEAWf3rx2vZhe/LAmtIn/6apE6PN0ULKgywD9mmdxbmFl3OvD5AS5fW5zLbv/YHmcsBTjf/afDz3MaZTVCfAP9z6/Bw6ycv8EUBWJIn9zYcoAWWlW9+OzO3vkTy8H+RANLmdrpOuYWdZYEXpo+TlCJrW5EARb7fF+bWdqf3hhyZI1nWJQHgznErZhbjoEsWqi8dQNoE294aldzFurwSABL2XXMf9+H1VQGke9exw5P/AnA5Pv5ngMul7LOvO922iwACu8WkCwLCafvM4CeWPxfA8lNHcWZSoi8EwMAIciKX2Z4SWCMAa3snCZ/G4EA8D6CMLNFsGQhkkz/gQNEBbPCbWsxGUpYVu3z8IyNAknwJkfPMEhLyrdi5RTyUVACkw4GSFRNWJNEW+fgPGwHD8/JxnRuLabN4CGNRkAE23na2+VmEAUmrYymSGjMAYqH84YUIyzgzs3XC7gNgH36Vcc4zKY9o9fgPBXUAiHHwVboBHGLiX6Zcjp1f2wu4tvzZKo0ecPnDtQYDQvJXaBeNzce45Fp28ZQLrEZVuFqgBwOalArKXnW1UzlnSusQKJqKYNuz4tOnI6sZG4zanpemv+7ySU2jbA9h6uhcgpfy6G2PahirDZ6zvq6zDduMVFTKvzw8wgyEdelwY9in3XkEPs3osJuwRQ4qTkfzifndg9Gfc4pdsu82+tTnHZTBa2EAMrqr2t43pguc8tNm7JQVQ2S0ukj2d22dhXYP0/veWtwKrCkNoNimAN5+Xr/oLrxswKbVJjteWrX7eR63o4j9q0GxnaBdWgGA5VStpanIjQmEhV0/nVt5VOFUvix6awJhPcAaTEShgrG+iGyvb5a0Ndb1YGHFPEwoqAinoaykaID1o1pdPNu7XsnCKQ3R+hwWIIhGvORcJUBYXe3Xa3vq/mF/N9V13ugufMkfXn+KHsRD0B8AAAAASUVORK5CYII=" type="image/x-icon" />
 
     <script>