@tsparticles/pjs 4.0.0-alpha.2 → 4.0.0-alpha.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/571.min.js +1 -1
- package/571.min.js.LICENSE.txt +1 -1
- package/browser/index.js +1 -1
- package/cjs/index.js +1 -1
- package/engine_dist_browser_Core_Container_js.js +4 -4
- package/esm/index.js +1 -1
- package/package.json +2 -2
- package/report.html +1 -1
- package/tsparticles.pjs.bundle.js +7 -7
- package/tsparticles.pjs.bundle.min.js +1 -1
- package/tsparticles.pjs.bundle.min.js.LICENSE.txt +1 -1
- package/tsparticles.pjs.js +2 -2
- package/tsparticles.pjs.min.js +1 -1
- package/tsparticles.pjs.min.js.LICENSE.txt +1 -1
- package/umd/index.js +1 -1
package/571.min.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/*! For license information please see 571.min.js.LICENSE.txt */
|
|
2
|
-
(this.webpackChunk_tsparticles_pjs=this.webpackChunk_tsparticles_pjs||[]).push([[571],{7571(t,i,e){e.d(i,{Container:()=>A});var s=e(4400),n=e(1546),o=e(3618),a=e(9470),r=e(4975);function h(t,i,e){const s=i[e];void 0!==s&&(t[e]=(t[e]??n.zs)*s)}function c(t,i,e=!1){if(!i)return;const s=t.style,n=new Set;for(let t=0;t<s.length;t++){const i=s.item(t);i&&n.add(i)}for(let t=0;t<i.length;t++){const e=i.item(t);e&&n.add(e)}for(const t of n){const n=i.getPropertyValue(t);n?s.setProperty(t,n,e?"important":""):s.removeProperty(t)}}class l{constructor(t,i){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)h(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,r.R5)(this._engine,s.particleFillColor(t))),!e&&s.particleStrokeColor&&(e=(0,r.R5)(this._engine,s.particleStrokeColor(t))),i&&e)break;return[i,e]},this._initStyle=()=>{const t=this.element,i=this.container.actualOptions;if(t){this._fullScreen?this._setFullScreenStyle():this._resetOriginalStyle();for(const e in i.style){if(!e||!Object.prototype.hasOwnProperty.call(i.style,e))continue;const s=i.style[e];s&&t.style.setProperty(e,s,"important")}}},this._repairStyle=()=>{const t=this.element;if(!t)return;this._safeMutationObserver((t=>{t.disconnect()})),this._initStyle(),this.initBackground();const i=this._pointerEvents;t.style.pointerEvents=i,t.setAttribute("pointer-events",i),this._safeMutationObserver((i=>{t instanceof Node&&i.observe(t,{attributes:!0})}))},this._resetOriginalStyle=()=>{const t=this.element,i=this._originalStyle;t&&i&&c(t,i,!0)},this._safeMutationObserver=t=>{this._mutationObserver&&t(this._mutationObserver)},this._setFullScreenStyle=()=>{const t=this.element;t&&c(t,(0,a.hJ)(this.container.actualOptions.fullScreen.zIndex),!0)},this._engine=i,this._standardSize={height:0,width:0};const e=t.retina.pixelRatio,s=this._standardSize;this.size={height:s.height*e,width:s.width*e},this._context=null,this._generated=!1,this._preDrawUpdaters=[],this._postDrawUpdaters=[],this._resizePlugins=[],this._colorPlugins=[],this._pointerEvents="none"}get _fullScreen(){return this.container.actualOptions.fullScreen.enable}canvasClear(){this.container.actualOptions.clear&&this.draw((t=>{(0,o.IU)(t,this.size)}))}clear(){let t=!1;for(const i of this.container.plugins.values())!t&&i.canvasClear&&(t=i.canvasClear());t||this.canvasClear()}clearDrawPlugin(t,i){this.draw((e=>{(0,o.l7)(e,t,i)}))}destroy(){if(this.stop(),this._generated){const t=this.element;t?.remove(),this.element=void 0}else this._resetOriginalStyle();this._preDrawUpdaters=[],this._postDrawUpdaters=[],this._resizePlugins=[],this._colorPlugins=[]}draw(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<=n.w2)return;const s=t.getFillColor(),a=t.getStrokeColor()??s;let[h,c]=this._getPluginParticleColors(t);if(h??=s,c??=a,!h&&!c)return;const l=this.container,d=t.options.zIndex,u=n.RV-t.zIndexFactor,p=u**d.opacityRate,f=t.bubble.opacity??t.opacity?.value??n.hv,_=t.strokeOpacity??f,g=f*p,v=_*p,m={},y={fill:(()=>{if(h)return(0,r.LC)(h,l.hdr,g)})()};y.stroke=c?(0,r.LC)(c,l.hdr,v):y.fill,this.draw((s=>{this._applyPreDrawUpdaters(s,t,e,g,y,m),(0,o.p0)({container:l,context:s,particle:t,delta:i,colorStyles:y,radius:e*u**d.sizeRate,opacity:g,transform:m})})),this._applyPostDrawUpdaters(t)}drawParticlePlugin(t,i,e){this.draw((s=>{(0,o.Wb)(s,t,i,e)}))}drawParticles(t){const{particles:i,plugins:e}=this.container;this.clear(),i.update(t);for(const i of e.values())this.drawPlugin(i,t);this.draw((()=>{i.drawParticles(t)}));for(const i of e.values())this.clearDrawPlugin(i,t)}drawPlugin(t,i){this.draw((e=>{(0,o.e_)(e,t,i)}))}init(){this._safeMutationObserver((t=>{t.disconnect()})),this._mutationObserver=(0,a.tG)((t=>{for(const i of t)"attributes"===i.type&&"style"===i.attributeName&&this._repairStyle()})),this.resize(),this._initStyle(),this.initBackground(),this._safeMutationObserver((t=>{this.element&&this.element instanceof Node&&t.observe(this.element,{attributes:!0})})),this.initUpdaters(),this.initPlugins(),this.paint()}initBackground(){const{container:t}=this,i=t.actualOptions.background,e=this.element;if(!e)return;const s=e.style,n=(0,r.BN)(this._engine,i.color);s.backgroundColor=n?(0,r.xx)(n,t.hdr,i.opacity):"",s.backgroundImage=i.image||"",s.backgroundPosition=i.position||"",s.backgroundRepeat=i.repeat||"",s.backgroundSize=i.size||""}initPlugins(){this._resizePlugins=[];for(const t of this.container.plugins.values())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();const i=this.container;this._generated=n.eb in t.dataset?"true"===t.dataset[n.eb]:this._generated,this.element=t,this.element.ariaHidden="true",this._originalStyle=(0,a.td)(this.element.style);const e=this._standardSize;e.height=t.offsetHeight,e.width=t.offsetWidth;const s=this.container.retina.pixelRatio,o=this.size;t.height=o.height=e.height*s,t.width=o.width=e.width*s;const r=(0,a.lV)("(color-gamut: p3)");this._context=this.element.getContext("2d",{alpha:!0,colorSpace:r?.matches&&i.hdr?"display-p3":"srgb",desynchronized:!0,willReadFrequently:!1}),this._safeMutationObserver((t=>{t.disconnect()})),i.retina.init(),this.initBackground(),this._safeMutationObserver((t=>{this.element&&this.element instanceof Node&&t.observe(this.element,{attributes:!0})}))}paint(){let t=!1;for(const i of this.container.plugins.values()){if(t)break;t=i.canvasPaint?.()??!1}t||this.paintBase()}paintBase(t){this.draw((i=>{(0,o.Sn)(i,this.size,t)}))}paintImage(t,i){this.draw((e=>{(0,o.Md)(e,this.size,t,i)}))}resize(){if(!this.element)return!1;const t=this.container,i=t.canvas._standardSize,e={width:this.element.offsetWidth,height:this.element.offsetHeight},s=t.retina.pixelRatio,n={width:e.width*s,height:e.height*s};if(e.height===i.height&&e.width===i.width&&n.height===this.element.height&&n.width===this.element.width)return!1;const o={...i};i.height=e.height,i.width=e.width;const a=this.size;return this.element.width=a.width=n.width,this.element.height=a.height=n.height,this.container.started&&t.particles.setResizeFactor({width:i.width/o.width,height:i.height/o.height}),!0}setPointerEvents(t){this.element&&(this._pointerEvents=t,this._repairStyle())}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 d=e(8980),u=e(998);function p(t,i,e,s,n){if(s){let s={passive:!0};(0,u.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 f{constructor(t){this.container=t,this._canPush=!0,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=Date.now();const n=e.interactivity.events.onClick;(0,a.wJ)(n.mode,(t=>{this.container.handleClickMode(t)}))}"touchend"===t.type&&setTimeout((()=>{this._mouseTouchFinish()}),n.pH)},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?.default.auto&&e.loadTheme(o)},this._handleVisibilityChange=()=>{const t=this.container,i=t.actualOptions;this._mouseTouchFinish(),i.pauseOnBlur&&((0,a.T5)().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*n.Xu)},this._manageInteractivityListeners=(t,i)=>{const e=this._handlers,s=this.container,o=s.actualOptions,a=s.interactivity.element;if(!a)return;const r=a,h=s.canvas;h.setPointerEvents(r===h.element?"initial":"none"),(o.interactivity.events.onHover.enable||o.interactivity.events.onClick.enable)&&(p(a,n.Rb,e.mouseMove,i),p(a,n.s7,e.touchStart,i),p(a,n.DG,e.touchMove,i),o.interactivity.events.onClick.enable?(p(a,n.Bp,e.touchEndClick,i),p(a,n.vo,e.mouseUp,i),p(a,n.ms,e.mouseDown,i)):p(a,n.Bp,e.touchEnd,i),p(a,t,e.mouseLeave,i),p(a,n.G3,e.touchCancel,i))},this._manageListeners=t=>{const i=this._handlers,e=this.container,s=e.actualOptions.interactivity.detectsOn,o=e.canvas.element;let a=n.Z0;s===d.h.window?(e.interactivity.element=window,a=n.sf):s===d.h.parent&&o?e.interactivity.element=o.parentElement??o.parentNode:e.interactivity.element=o,this._manageMediaMatch(t),this._manageResize(t),this._manageInteractivityListeners(a,t),p(document,n.nK,i.visibilityChange,t,!1)},this._manageMediaMatch=t=>{const i=this._handlers;this._matchMedia&&p(this._matchMedia,"change",i.themeChange,t)},this._manageResize=t=>{const i=this._handlers,e=this.container;if(!e.actualOptions.interactivity.events.resize.enable)return;if("undefined"==typeof ResizeObserver)return void p(globalThis,n.NF,i.resize,t);const s=e.canvas.element;this._resizeObserver&&!t?(s&&this._resizeObserver.unobserve(s),this._resizeObserver.disconnect(),delete this._resizeObserver):!this._resizeObserver&&t&&s&&(this._resizeObserver=new ResizeObserver((t=>{t.find((t=>t.target===s))&&this._handleWindowResize()})),this._resizeObserver.observe(s))},this._mouseDown=()=>{const{interactivity:t}=this.container,{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.values())if(t.clickPositionValid&&(n=t.clickPositionValid(o),n))break;n||this._doMouseTouchClick(t),s.clicking=!1}},this._mouseTouchFinish=()=>{const{interactivity:t}=this.container,{mouse:i}=t;delete i.position,delete i.clickPosition,delete i.downPosition,t.status=n.Z0,i.inside=!1,i.clicking=!1},this._mouseTouchMove=t=>{const i=this.container,e=i.actualOptions,s=i.interactivity,o=i.canvas.element;if(!s.element)return;let a;if(s.mouse.inside=!0,t.type.startsWith("pointer")){this._canPush=!0;const i=t;if(s.element===window){if(o){const t=o.getBoundingClientRect();a={x:i.clientX-t.left,y:i.clientY-t.top}}}else if(e.interactivity.detectsOn===d.h.parent){const t=i.target,e=i.currentTarget;if(o){const s=t.getBoundingClientRect(),r=e.getBoundingClientRect(),h=o.getBoundingClientRect();a={x:i.offsetX+n.gd*s.left-(r.left+h.left),y:i.offsetY+n.gd*s.top-(r.top+h.top)}}else a={x:i.offsetX,y:i.offsetY}}else i.target===o&&(a={x:i.offsetX,y:i.offsetY})}else if(this._canPush="touchmove"!==t.type,o){const i=t,e=i.touches[i.touches.length-n.K3],s=o.getBoundingClientRect();if(!e)return;a={x:e.clientX-s.left,y:e.clientY-s.top}}const r=i.retina.pixelRatio;a&&(a.x*=r,a.y*=r),s.mouse.position=a,s.status=n.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._matchMedia=(0,a.lV)("(prefers-color-scheme: dark)"),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 _=e(622),g=e(4805),v=e(4723);class m{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 v.e.external:this._externalInteractors.push(t);break;case v.e.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 y=e(5511),w=e(7023),b=e(5368),z=e(6657),P=e(1176),x=e(5608),C=e(1896);function k(t){if(!(0,a.hn)(t.outMode,t.checkModes))return;const i=t.radius*n.gd;t.coord>t.maxCoord-i?t.setCb(-t.radius):t.coord<i&&t.setCb(t.radius)}class M{constructor(t,i){this.container=i,this._calcPosition=(t,i,e,o=n.rq)=>{const a=t.plugins.values();for(const t of a){const s=t.particlePosition?.(i,this);if(s)return w.p.create(s.x,s.y,e)}const r=t.canvas.size,h=(0,s.Nx)({size:r,position:i}),c=w.p.create(h.x,h.y,e),l=this.getRadius(),d=this.options.move.outModes,u=i=>{k({outMode:i,checkModes:[P.Y.bounce],coord:c.x,maxCoord:t.canvas.size.width,setCb:t=>c.x+=t,radius:l})},p=i=>{k({outMode:i,checkModes:[P.Y.bounce],coord:c.y,maxCoord:t.canvas.size.height,setCb:t=>c.y+=t,radius:l})};u(d.left??d.default),u(d.right??d.default),p(d.top??d.default),p(d.bottom??d.default);let f=!0;for(const t of a)if(f=t.checkParticlePosition?.(this,c,o),!1===f)break;return f?c:this._calcPosition(t,void 0,e,o+n.Eo)},this._calculateVelocity=()=>{const t=(0,s.$m)(this.direction).copy(),i=this.options.move;if(i.direction===z.F.inside||i.direction===z.F.outside)return t;const e=(0,s.pu)((0,s.VG)(i.angle.value)),o=(0,s.pu)((0,s.VG)(i.angle.offset)),a={left:o-e*n.MX,right:o+e*n.MX};return i.straight||(t.angle+=(0,s.vE)((0,s.DT)(a.left,a.right))),i.random&&"number"==typeof i.speed&&(t.length*=(0,s.G0)()),t},this._getRollColor=t=>{if(!t||!this.roll||!this.backColor&&!this.roll.alter)return t;const i=this.roll.horizontal&&this.roll.vertical?n.gd*n.l:n.l,e=this.roll.horizontal?Math.PI*n.MX:n.dv;return Math.floor((this.roll.angle+e)/(Math.PI/i))%n.gd?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,s.VG)(this.options.zIndex.value);this.position=this._calcPosition(i,t,(0,s.qE)(e,n.X_,i.zLayers)),this.initialPosition=this.position.copy();const o=i.canvas.size;switch(this.moveCenter={...(0,a.E9)(this.options.move.center,o),radius:this.options.move.center.radius,mode:this.options.move.center.mode},this.direction=(0,s.JY)(this.options.move.direction,this.position,this.moveCenter),this.options.move.direction){case z.F.inside:this.outType=x.x.inside;break;case z.F.outside:this.outType=x.x.outside}this.offset=w.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=this.shape?i.shapeDrawers.get(this.shape):void 0;s?.particleDestroy?.(this);for(const e of i.plugins.values())e.particleDestroyed?.(this,t);for(const e of i.particles.updaters)e.particleDestroyed?.(this,t);e?.reset(this),this._engine.dispatchEvent(_.B.particleDestroyed,{container:this.container,data:{particle:this}})}draw(t){const i=this.container,e=i.canvas;for(const s of i.plugins.values())e.drawParticlePlugin(s,this,t);e.drawParticle(this,t)}getAngle(){return this.rotation+(this.pathRotation?this.velocity.angle:n.tA)}getFillColor(){return this._getRollColor(this.bubble.color??(0,r.O_)(this.color))}getMass(){return this.getRadius()**n.dm*Math.PI*n.MX}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,r.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.isRotating=!1,this.rotation=0,this.misplaced=!1,this.retina={maxDistance:{}},this.outType=x.x.normal,this.ignoresResizeRatio=!0;const c=r.retina.pixelRatio,l=r.actualOptions,d=(0,C.y)(this._engine,r,l.particles),u=d.reduceDuplicates,p=d.effect.type,f=d.shape.type;this.effect=(0,a.TA)(p,this.id,u),this.shape=(0,a.TA)(f,this.id,u);const _=d.effect,g=d.shape;if(e){if(e.effect?.type){const t=e.effect.type,i=(0,a.TA)(t,this.id,u);i&&(this.effect=i,_.load(e.effect))}if(e.shape?.type){const t=e.shape.type,i=(0,a.TA)(t,this.id,u);i&&(this.shape=i,g.load(e.shape))}}if(this.effect===n.mR){const t=[...this.container.effectDrawers.keys()];this.effect=t[Math.floor((0,s.G0)()*t.length)]}if(this.shape===n.mR){const t=[...this.container.shapeDrawers.keys()];this.shape=t[Math.floor((0,s.G0)()*t.length)]}this.effectData=this.effect?function(t,i,e,s){const n=i.options[t];return(0,a.zw)({close:i.close,fill:i.fill},(0,a.TA)(n,e,s))}(this.effect,_,this.id,u):void 0,this.shapeData=this.shape?function(t,i,e,s){const n=i.options[t];return(0,a.zw)({close:i.close,fill:i.fill},(0,a.TA)(n,e,s))}(this.shape,g,this.id,u):void 0,d.load(e);const v=this.effectData;v&&d.load(v.particles);const m=this.shapeData;m&&d.load(m.particles);const y=new b.k(h,r);y.load(r.actualOptions.interactivity),y.load(d.interactivity),this.interactivity=y,this.effectFill=v?.fill??d.effect.fill,this.effectClose=v?.close??d.effect.close,this.shapeFill=m?.fill??d.shape.fill,this.shapeClose=m?.close??d.shape.close,this.options=d;const w=this.options.move.path;this.pathDelay=(0,s.VG)(w.delay.value)*n.Xu,w.generator&&(this.pathGenerator=this._engine.getPathGenerator(w.generator),this.pathGenerator&&r.addPath(w.generator,this.pathGenerator)&&this.pathGenerator.init(r)),r.retina.initParticle(this),this.size=(0,a.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=n.WH-(0,s.VG)(this.options.move.decay);const z=r.particles;let P,k;z.setLastZIndex(this.position.z),this.zIndexFactor=this.position.z/r.zLayers,this.sides=24,this.effect&&(P=r.effectDrawers.get(this.effect),P||(P=this._engine.getEffectDrawer(this.effect),P&&r.effectDrawers.set(this.effect,P))),P?.loadEffect&&P.loadEffect(this),this.shape&&(k=r.shapeDrawers.get(this.shape),k||(k=this._engine.getShapeDrawer(this.shape),k&&r.shapeDrawers.set(this.shape,k))),k?.loadShape&&k.loadShape(this);const M=k?.getSidesCount;M&&(this.sides=M(this)),this.spawning=!1;for(const t of z.updaters)t.init(this);for(const t of z.movers)t.init(this);P?.particleInit?.(r,this),k?.particleInit?.(r,this);for(const t of r.plugins.values())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 O=e(1989),T=e(5189);class S{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:o}=this;for(let a=0;a<n.Pg;a++){const r=a%n.gd;this._subs.push(new S(new T.M_(t+e*n.MX*r,i+s*n.MX*(Math.round(a*n.MX)-r),e*n.MX,s*n.MX),o))}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 n of this._points)!t.contains(n.position)&&(0,s.Yf)(t.position,n.position)>n.particle.getRadius()&&(!i||i(n.particle))||e.push(n.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 T.jl(t.x,t.y,i),e)}queryRectangle(t,i,e){return this.query(new T.M_(t.x,t.y,i.width,i.height),e)}}var D=e(7452);const R=t=>{const{height:i,width:e}=t;return new T.M_(n.un*e,n.un*i,n.Rh*e,n.Rh*i)};class I{constructor(t,i){this._addToPool=(...t)=>{this._pool.push(...t)},this._applyDensity=(t,i,e,s)=>{const o=t.number;if(!o.density.enable)return void(void 0===e?this._limit=o.limit.value:(s?.number.limit.value??o.limit.value)&&this._groupLimits.set(e,s?.number.limit.value??o.limit.value));const a=this._initDensityFactor(o.density),r=o.value,h=o.limit.value>n.ou?o.limit.value:r,c=Math.min(r,h)*a+i,l=Math.min(this.count,this.filter((t=>t.group===e)).length);void 0===e?this._limit=o.limit.value*a:this._groupLimits.set(e,o.limit.value*a),l<c?this.push(Math.abs(c-l),void 0,t,e):l>c&&this.removeQuantity(l-c,e)},this._initDensityFactor=t=>{const i=this._container;if(!i.canvas.element||!t.enable)return n.lA;const e=i.canvas.element,s=i.retina.pixelRatio;return e.width*e.height/(t.height*t.width*s**n.dm)},this._pushParticle=(t,i,e,s)=>{try{const n=this._pool.pop()??new M(this._engine,this._container);n.init(this._nextId,t,i,e);let o=!0;if(s&&(o=s(n)),!o)return;return this._array.push(n),this._zArray.push(n),this._nextId++,this._engine.dispatchEvent(_.B.particleAdded,{container:this._container,data:{particle:n}}),n}catch(t){(0,D.t)().warning(`error adding particle: ${t}`)}},this._removeParticle=(t,i,e)=>{const s=this._array[t];if(!s)return!1;if(s.group!==i)return!1;const o=this._zArray.indexOf(s);return this._array.splice(t,n.LD),this._zArray.splice(o,n.LD),s.destroy(e),this._engine.dispatchEvent(_.B.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 m(t,i),this._pluginsInitialized=!1;const e=i.canvas.size;this.quadTree=new S(R(e),n.Kw),this.movers=[],this.updaters=[]}get count(){return this._array.length}addManualParticles(){const t=this._container;t.actualOptions.manualParticles.forEach((i=>this.addParticle(i.position?(0,a.E9)(i.position,t.canvas.size):void 0,i.options)))}addParticle(t,i,e,s){const o=this._container.actualOptions.particles.number.limit.mode,a=void 0===e?this._limit:this._groupLimits.get(e)??this._limit,r=this.count;if(a>n.ou)switch(o){case y.d.delete:{const t=r+n.nq-a;t>n.wM&&this.removeQuantity(t);break}case y.d.wait:if(r>=a)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=[]}drawParticles(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.values())if(e=i.particlesInitialization?.()??e,e)break;if(this.addManualParticles(),!e){const t=i.particles,e=t.groups;for(const i in e){const s=e[i];if(s)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.values())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._container.canvas.drawParticles({value:0,factor:0})}remove(t,i,e){this.removeAt(this._array.indexOf(t),void 0,i,e)}removeAt(t,i=n.xd,e,s){if(t<n.z9||t>this.count)return;let o=0;for(let n=t;o<i&&n<this.count;n++)this._removeParticle(n,e,s)&&(n--,o++)}removeQuantity(t,i){this.removeAt(n.z9,t,i)}setDensity(){const t=this._container.actualOptions,i=t.particles.groups,e=t.manualParticles.length;for(const t in i){const s=i[t];if(!s)continue;const n=(0,C.y)(this._engine,this._container,s);this._applyDensity(n,e,t)}this._applyDensity(t.particles,e)}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 S(R(i.canvas.size),n.Kw);for(const t of i.pathGenerators.values())t.update();for(const e of i.plugins.values())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.values()){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 O.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(_.B.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=t[t.length-n.K3];if(!i)return;this._lastZIndex=i.position.z,this._needsSort=!1}}}class E{constructor(t){this.container=t,this.pixelRatio=n.$x,this.reduceFactor=n.Zp}init(){const t=this.container,i=t.actualOptions;this.pixelRatio=i.detectRetina?devicePixelRatio:n.$x,this.reduceFactor=n.Zp;const e=this.pixelRatio,o=t.canvas;if(o.element){const t=o.element;o.size.width=t.offsetWidth*e,o.size.height=t.offsetHeight*e}const a=i.particles,r=a.move;this.maxSpeed=(0,s.VG)(r.gravity.maxSpeed)*e,this.sizeAnimationSpeed=(0,s.VG)(a.size.animation.speed)*e}initParticle(t){const i=t.options,e=this.pixelRatio,n=i.move,o=n.distance,a=t.retina;a.moveDrift=(0,s.VG)(n.drift)*e,a.moveSpeed=(0,s.VG)(n.speed)*e,a.sizeAnimationSpeed=(0,s.VG)(i.size.animation.speed)*e;const r=a.maxDistance;r.horizontal=void 0!==o.horizontal?o.horizontal*e:void 0,r.vertical=void 0!==o.vertical?o.vertical*e:void 0,a.maxSpeed=(0,s.VG)(n.gravity.maxSpeed)*e}}function F(t){return!t.destroyed}function L(t,i,...e){const s=new g.J(t,i);return(0,C.Z)(s,...e),s}class A{constructor(t,i,e){this._intersectionManager=t=>{if(F(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+n.Xu/this.fpsLimit)return void this.draw(!1);this._lastFrameTime??=t;const i=function(t,i=n.z$,e=!1){return{value:t,factor:e?n.z$/i:n.z$*t/n.Xu}}(t-this._lastFrameTime,this.fpsLimit,this._smooth);if(this.addLifeTime(i.value),this._lastFrameTime=t,i.value>n.Xu)return void this.draw(!1);if(this.canvas.drawParticles(i),!this.alive())return void this.destroy();this.animationStatus&&this.draw(!1)}catch(t){(0,D.t)().error("error in animation loop",t)}},this._engine=t,this.id=Symbol(i),this.fpsLimit=120,this.hdr=!1,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._clickHandlers=new Map,this._sourceOptions=e,this._initialSourceOptions=e,this.retina=new E(this),this.canvas=new l(this,this._engine),this.particles=new I(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=L(this._engine,this),this.actualOptions=L(this._engine,this),this._eventListeners=new f(this),this._intersectionObserver=(0,a.BR)((t=>{this._intersectionManager(t)})),this._engine.dispatchEvent(_.B.containerBuilt,{container:this})}get animationStatus(){return!this._paused&&!this.pageHidden&&F(this)}get options(){return this._options}get sourceOptions(){return this._sourceOptions}addClickHandler(t){if(!F(this))return;const i=this.interactivity.element;if(!i)return;const e=(i,e,s)=>{if(!F(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,o=!1;this._clickHandlers.set("click",(t=>{if(!F(this))return;const i=t,s={x:i.offsetX||i.clientX,y:i.offsetY||i.clientY};e(t,s,n.FS)})),this._clickHandlers.set("touchstart",(()=>{F(this)&&(s=!0,o=!1)})),this._clickHandlers.set("touchmove",(()=>{F(this)&&(o=!0)})),this._clickHandlers.set("touchend",(t=>{if(F(this)){if(s&&!o){const i=t,s=i.touches[i.touches.length-n.KZ];if(!s)return;const o=this.canvas.element,a=o?o.getBoundingClientRect():void 0,r={x:s.clientX-(a?a.left:n.TL),y:s.clientY-(a?a.top:n.TL)};e(t,r,Math.max(s.radiusX,s.radiusY))}s=!1,o=!1}})),this._clickHandlers.set("touchcancel",(()=>{F(this)&&(s=!1,o=!1)}));for(const[t,e]of this._clickHandlers)i.addEventListener(t,e)}addLifeTime(t){this._lifeTime+=t}addPath(t,i,e=!1){return!(!F(this)||!e&&this.pathGenerators.has(t))&&(this.pathGenerators.set(t,i),!0)}alive(){return!this._duration||this._lifeTime<=this._duration}clearClickHandlers(){if(F(this)){for(const[t,i]of this._clickHandlers)this.interactivity.element?.removeEventListener(t,i);this._clickHandlers.clear()}}destroy(t=!0){if(F(this)){this.stop(),this.clearClickHandlers(),this.particles.destroy(),this.canvas.destroy();for(const t of this.effectDrawers.values())t.destroy?.(this);for(const t of this.shapeDrawers.values())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);if(this._engine.clearPlugins(this),this.destroyed=!0,t){const t=this._engine.items,i=t.findIndex((t=>t===this));i>=n.vF&&t.splice(i,n.JC)}this._engine.dispatchEvent(_.B.containerDestroyed,{container:this})}}draw(t){if(!F(this))return;let i=t;const e=t=>{i&&(this._lastFrameTime=void 0,i=!1),this._nextFrame(t)};this._drawAnimationFrame=(0,s.i0)((t=>{e(t)}))}async export(t,i={}){for(const e of this.plugins.values()){if(!e.export)continue;const s=await e.export(t,i);if(s.supported)return s.blob}(0,D.t)().error(`Export plugin with type ${t} not found`)}handleClickMode(t){if(F(this)){this.particles.handleClickMode(t);for(const i of this.plugins.values())i.handleClickMode?.(t)}}async init(){if(!F(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=L(this._engine,this,this._initialSourceOptions,this.sourceOptions),this.actualOptions=L(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(),this.canvas.init(),this.updateActualOptions(),this.canvas.initBackground(),this.canvas.resize();const{delay:o,duration:a,fpsLimit:r,hdr:h,smooth:c,zLayers:l}=this.actualOptions;this.hdr=h,this.zLayers=l,this._duration=(0,s.VG)(a)*n.Xu,this._delay=(0,s.VG)(o)*n.Xu,this._lifeTime=0,this.fpsLimit=r>n.DN?r:n.i8,this._smooth=c;for(const t of this.effectDrawers.values())await(t.init?.(this));for(const t of this.shapeDrawers.values())await(t.init?.(this));for(const t of this.plugins.values())await(t.init?.());this._engine.dispatchEvent(_.B.containerInit,{container:this}),await this.particles.init(),this.particles.setDensity();for(const t of this.plugins.values())t.particlesSetup?.();this._engine.dispatchEvent(_.B.particlesSetup,{container:this})}async loadTheme(t){F(this)&&(this._currentTheme=t,await this.refresh())}pause(){if(F(this)&&(void 0!==this._drawAnimationFrame&&((0,s.px)(this._drawAnimationFrame),delete this._drawAnimationFrame),!this._paused)){for(const t of this.plugins.values())t.pause?.();this.pageHidden||(this._paused=!0),this._engine.dispatchEvent(_.B.containerPaused,{container:this})}}play(t){if(!F(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.values())t.play&&t.play();this._engine.dispatchEvent(_.B.containerPlay,{container:this}),this.draw(i??!1)}else this._firstStart=!1}async refresh(){if(F(this))return this.stop(),this.start()}async reset(t){if(F(this))return this._initialSourceOptions=t,this._sourceOptions=t,this._options=L(this._engine,this,this._initialSourceOptions,this.sourceOptions),this.actualOptions=L(this._engine,this,this._options),this.refresh()}async start(){F(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.values())await(t.start?.());this._engine.dispatchEvent(_.B.containerStarted,{container:this}),this.play(),t()};this._delayTimeout=setTimeout((()=>{i()}),this._delay)})))}stop(){if(F(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.values())t.stop?.();for(const t of this.plugins.keys())this.plugins.delete(t);this._sourceOptions=this._options,this._engine.dispatchEvent(_.B.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)}}}}]);
|
|
2
|
+
(this.webpackChunk_tsparticles_pjs=this.webpackChunk_tsparticles_pjs||[]).push([[571],{7571(t,i,e){e.d(i,{Container:()=>A});var s=e(4400),n=e(1546),a=e(3618),o=e(9470),r=e(4975);function h(t,i,e){const s=i[e];void 0!==s&&(t[e]=(t[e]??n.zs)*s)}function c(t,i,e=!1){if(!i)return;const s=t.style,n=new Set;for(let t=0;t<s.length;t++){const i=s.item(t);i&&n.add(i)}for(let t=0;t<i.length;t++){const e=i.item(t);e&&n.add(e)}for(const t of n){const n=i.getPropertyValue(t);n?s.setProperty(t,n,e?"important":""):s.removeProperty(t)}}class l{constructor(t,i){this.container=t,this._reusableColorStyles={},this._reusablePluginColors=[void 0,void 0],this._reusableTransform={},this._applyPostDrawUpdaters=t=>{for(const i of this._postDrawUpdaters)i.afterDraw?.(t)},this._applyPreDrawUpdaters=(t,i,e,s,n,a)=>{for(const o of this._preDrawUpdaters){if(o.getColorStyles){const{fill:a,stroke:r}=o.getColorStyles(i,t,e,s);a&&(n.fill=a),r&&(n.stroke=r)}if(o.getTransformValues){const t=o.getTransformValues(i);for(const i in t)h(a,t,i)}o.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,r.R5)(this._engine,s.particleFillColor(t))),!e&&s.particleStrokeColor&&(e=(0,r.R5)(this._engine,s.particleStrokeColor(t))),i&&e)break;return this._reusablePluginColors[0]=i,this._reusablePluginColors[1]=e,this._reusablePluginColors},this._initStyle=()=>{const t=this.element,i=this.container.actualOptions;if(t){this._fullScreen?this._setFullScreenStyle():this._resetOriginalStyle();for(const e in i.style){if(!e||!Object.hasOwn(i.style,e))continue;const s=i.style[e];s&&t.style.setProperty(e,s,"important")}}},this._repairStyle=()=>{const t=this.element;if(!t)return;this._safeMutationObserver((t=>{t.disconnect()})),this._initStyle(),this.initBackground();const i=this._pointerEvents;t.style.pointerEvents=i,t.setAttribute("pointer-events",i),this._safeMutationObserver((i=>{t instanceof Node&&i.observe(t,{attributes:!0})}))},this._resetOriginalStyle=()=>{const t=this.element,i=this._originalStyle;t&&i&&c(t,i,!0)},this._safeMutationObserver=t=>{this._mutationObserver&&t(this._mutationObserver)},this._setFullScreenStyle=()=>{const t=this.element;t&&c(t,(0,o.hJ)(this.container.actualOptions.fullScreen.zIndex),!0)},this._engine=i,this._standardSize={height:0,width:0};const e=t.retina.pixelRatio,s=this._standardSize;this.size={height:s.height*e,width:s.width*e},this._context=null,this._generated=!1,this._preDrawUpdaters=[],this._postDrawUpdaters=[],this._resizePlugins=[],this._colorPlugins=[],this._pointerEvents="none"}get _fullScreen(){return this.container.actualOptions.fullScreen.enable}canvasClear(){this.container.actualOptions.clear&&this.draw((t=>{(0,a.IU)(t,this.size)}))}clear(){let t=!1;for(const i of this.container.plugins.values())!t&&i.canvasClear&&(t=i.canvasClear());t||this.canvasClear()}clearDrawPlugin(t,i){this.draw((e=>{(0,a.l7)(e,t,i)}))}destroy(){if(this.stop(),this._generated){const t=this.element;t?.remove(),this.element=void 0}else this._resetOriginalStyle();this._preDrawUpdaters=[],this._postDrawUpdaters=[],this._resizePlugins=[],this._colorPlugins=[]}draw(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<=n.w2)return;const s=t.getFillColor(),o=t.getStrokeColor()??s;let[h,c]=this._getPluginParticleColors(t);if(h??=s,c??=o,!h&&!c)return;const l=this.container,d=t.options.zIndex,u=n.RV-t.zIndexFactor,{opacity:p,strokeOpacity:f}=t.getOpacity(),_=this._reusableTransform,g=this._reusableColorStyles,v=h?(0,r.LC)(h,l.hdr,p):void 0,m=c?(0,r.LC)(c,l.hdr,f):v;_.a=_.b=_.c=_.d=void 0,g.fill=v,g.stroke=m,this.draw((s=>{this._applyPreDrawUpdaters(s,t,e,p,g,_),(0,a.p0)({container:l,context:s,particle:t,delta:i,colorStyles:g,radius:e*u**d.sizeRate,opacity:p,transform:_})})),this._applyPostDrawUpdaters(t)}drawParticlePlugin(t,i,e){this.draw((s=>{(0,a.Wb)(s,t,i,e)}))}drawParticles(t){const{particles:i,plugins:e}=this.container;this.clear(),i.update(t);for(const i of e.values())this.drawPlugin(i,t);this.draw((()=>{i.drawParticles(t)}));for(const i of e.values())this.clearDrawPlugin(i,t)}drawPlugin(t,i){this.draw((e=>{(0,a.e_)(e,t,i)}))}init(){this._safeMutationObserver((t=>{t.disconnect()})),this._mutationObserver=(0,o.tG)((t=>{for(const i of t)"attributes"===i.type&&"style"===i.attributeName&&this._repairStyle()})),this.resize(),this._initStyle(),this.initBackground(),this._safeMutationObserver((t=>{this.element&&this.element instanceof Node&&t.observe(this.element,{attributes:!0})})),this.initUpdaters(),this.initPlugins(),this.paint()}initBackground(){const{container:t}=this,i=t.actualOptions.background,e=this.element;if(!e)return;const s=e.style,n=(0,r.BN)(this._engine,i.color);s.backgroundColor=n?(0,r.xx)(n,t.hdr,i.opacity):"",s.backgroundImage=i.image||"",s.backgroundPosition=i.position||"",s.backgroundRepeat=i.repeat||"",s.backgroundSize=i.size||""}initPlugins(){this._resizePlugins=[];for(const t of this.container.plugins.values())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();const i=this.container;this._generated=n.eb in t.dataset?"true"===t.dataset[n.eb]:this._generated,this.element=t,this.element.ariaHidden="true",this._originalStyle=(0,o.td)(this.element.style);const e=this._standardSize;e.height=t.offsetHeight,e.width=t.offsetWidth;const s=this.container.retina.pixelRatio,a=this.size;t.height=a.height=e.height*s,t.width=a.width=e.width*s;const r=(0,o.lV)("(color-gamut: p3)");this._context=this.element.getContext("2d",{alpha:!0,colorSpace:r?.matches&&i.hdr?"display-p3":"srgb",desynchronized:!0,willReadFrequently:!1}),this._safeMutationObserver((t=>{t.disconnect()})),i.retina.init(),this.initBackground(),this._safeMutationObserver((t=>{this.element&&this.element instanceof Node&&t.observe(this.element,{attributes:!0})}))}paint(){let t=!1;for(const i of this.container.plugins.values()){if(t)break;t=i.canvasPaint?.()??!1}t||this.paintBase()}paintBase(t){this.draw((i=>{(0,a.Sn)(i,this.size,t)}))}paintImage(t,i){this.draw((e=>{(0,a.Md)(e,this.size,t,i)}))}resize(){if(!this.element)return!1;const t=this.container,i=t.canvas._standardSize,e={width:this.element.offsetWidth,height:this.element.offsetHeight},s=t.retina.pixelRatio,n={width:e.width*s,height:e.height*s};if(e.height===i.height&&e.width===i.width&&n.height===this.element.height&&n.width===this.element.width)return!1;const a={...i};i.height=e.height,i.width=e.width;const o=this.size;return this.element.width=o.width=n.width,this.element.height=o.height=n.height,this.container.started&&t.particles.setResizeFactor({width:i.width/a.width,height:i.height/a.height}),!0}setPointerEvents(t){this.element&&(this._pointerEvents=t,this._repairStyle())}stop(){this._safeMutationObserver((t=>{t.disconnect()})),this._mutationObserver=void 0,this.draw((t=>{(0,a.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 d=e(8980),u=e(998);function p(t,i,e,s,n){if(s){let s={passive:!0};(0,u.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 f{constructor(t){this.container=t,this._canPush=!0,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=Date.now();const n=e.interactivity.events.onClick;(0,o.wJ)(n.mode,(t=>{this.container.handleClickMode(t)}))}"touchend"===t.type&&setTimeout((()=>{this._mouseTouchFinish()}),n.pH)},this._handleThemeChange=t=>{const i=t,e=this.container,s=e.options,n=s.defaultThemes,a=i.matches?n.dark:n.light,o=s.themes.find((t=>t.name===a));o?.default.auto&&e.loadTheme(a)},this._handleVisibilityChange=()=>{const t=this.container,i=t.actualOptions;this._mouseTouchFinish(),i.pauseOnBlur&&((0,o.T5)().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*n.Xu)},this._manageInteractivityListeners=(t,i)=>{const e=this._handlers,s=this.container,a=s.actualOptions,o=s.interactivity.element;if(!o)return;const r=o,h=s.canvas;h.setPointerEvents(r===h.element?"initial":"none"),(a.interactivity.events.onHover.enable||a.interactivity.events.onClick.enable)&&(p(o,n.Rb,e.mouseMove,i),p(o,n.s7,e.touchStart,i),p(o,n.DG,e.touchMove,i),a.interactivity.events.onClick.enable?(p(o,n.Bp,e.touchEndClick,i),p(o,n.vo,e.mouseUp,i),p(o,n.ms,e.mouseDown,i)):p(o,n.Bp,e.touchEnd,i),p(o,t,e.mouseLeave,i),p(o,n.G3,e.touchCancel,i))},this._manageListeners=t=>{const i=this._handlers,e=this.container,s=e.actualOptions.interactivity.detectsOn,a=e.canvas.element;let o=n.Z0;s===d.h.window?(e.interactivity.element=window,o=n.sf):s===d.h.parent&&a?e.interactivity.element=a.parentElement??a.parentNode:e.interactivity.element=a,this._manageMediaMatch(t),this._manageResize(t),this._manageInteractivityListeners(o,t),p(document,n.nK,i.visibilityChange,t,!1)},this._manageMediaMatch=t=>{const i=this._handlers;this._matchMedia&&p(this._matchMedia,"change",i.themeChange,t)},this._manageResize=t=>{const i=this._handlers,e=this.container;if(!e.actualOptions.interactivity.events.resize.enable)return;if("undefined"==typeof ResizeObserver)return void p(globalThis,n.NF,i.resize,t);const s=e.canvas.element;this._resizeObserver&&!t?(s&&this._resizeObserver.unobserve(s),this._resizeObserver.disconnect(),delete this._resizeObserver):!this._resizeObserver&&t&&s&&(this._resizeObserver=new ResizeObserver((t=>{t.find((t=>t.target===s))&&this._handleWindowResize()})),this._resizeObserver.observe(s))},this._mouseDown=()=>{const{interactivity:t}=this.container,{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 a=s.position;if(a&&e.interactivity.events.onClick.enable){for(const t of i.plugins.values())if(t.clickPositionValid&&(n=t.clickPositionValid(a),n))break;n||this._doMouseTouchClick(t),s.clicking=!1}},this._mouseTouchFinish=()=>{const{interactivity:t}=this.container,{mouse:i}=t;delete i.position,delete i.clickPosition,delete i.downPosition,t.status=n.Z0,i.inside=!1,i.clicking=!1},this._mouseTouchMove=t=>{const i=this.container,e=i.actualOptions,s=i.interactivity,a=i.canvas.element;if(!s.element)return;let o;if(s.mouse.inside=!0,t.type.startsWith("pointer")){this._canPush=!0;const i=t;if(s.element===window){if(a){const t=a.getBoundingClientRect();o={x:i.clientX-t.left,y:i.clientY-t.top}}}else if(e.interactivity.detectsOn===d.h.parent){const t=i.target,e=i.currentTarget;if(a){const s=t.getBoundingClientRect(),r=e.getBoundingClientRect(),h=a.getBoundingClientRect();o={x:i.offsetX+n.gd*s.left-(r.left+h.left),y:i.offsetY+n.gd*s.top-(r.top+h.top)}}else o={x:i.offsetX,y:i.offsetY}}else i.target===a&&(o={x:i.offsetX,y:i.offsetY})}else if(this._canPush="touchmove"!==t.type,a){const i=t,e=i.touches[i.touches.length-n.K3],s=a.getBoundingClientRect();if(!e)return;o={x:e.clientX-s.left,y:e.clientY-s.top}}const r=i.retina.pixelRatio;o&&(o.x*=r,o.y*=r),s.mouse.position=o,s.status=n.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._matchMedia=(0,o.lV)("(prefers-color-scheme: dark)"),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 _=e(622),g=e(4805),v=e(4723);class m{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 v.e.external:this._externalInteractors.push(t);break;case v.e.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 y=e(5511),w=e(7023),b=e(5368),z=e(6657),P=e(1176),x=e(5608),C=e(1896);function k(t){if(!(0,o.hn)(t.outMode,t.checkModes))return;const i=t.radius*n.gd;t.coord>t.maxCoord-i?t.setCb(-t.radius):t.coord<i&&t.setCb(t.radius)}class O{constructor(t,i){this.container=i,this._cachedOpacityData={opacity:n.hv,strokeOpacity:n.hv},this._cachedPosition=w.p.origin,this._cachedRotateData={sin:0,cos:0},this._cachedTransform={a:1,b:0,c:0,d:1},this._calcPosition=(t,i)=>{let e=n.rq,a=t?w.p.create(t.x,t.y,i):void 0;const o=this.container,r=Array.from(o.plugins.values()),h=this.options.move.outModes,c=this.getRadius(),l=o.canvas.size,d=new AbortController,{signal:u}=d;for(;!u.aborted;){for(const t of r){const e=t.particlePosition?.(a,this);if(e)return w.p.create(e.x,e.y,i)}const t=(0,s.Nx)({size:l,position:a}),o=w.p.create(t.x,t.y,i);this._fixHorizontal(o,c,h.left??h.default),this._fixHorizontal(o,c,h.right??h.default),this._fixVertical(o,c,h.top??h.default),this._fixVertical(o,c,h.bottom??h.default);let d=!0;for(const t of r)if(d=t.checkParticlePosition?.(this,o,e)??!0,!d)break;if(d)return o;e+=n.Eo,a=void 0}return a},this._calculateVelocity=()=>{const t=(0,s.$m)(this.direction).copy(),i=this.options.move;if(i.direction===z.F.inside||i.direction===z.F.outside)return t;const e=(0,s.pu)((0,s.VG)(i.angle.value)),a=(0,s.pu)((0,s.VG)(i.angle.offset)),o={left:a-e*n.MX,right:a+e*n.MX};return i.straight||(t.angle+=(0,s.vE)((0,s.DT)(o.left,o.right))),i.random&&"number"==typeof i.speed&&(t.length*=(0,s.G0)()),t},this._fixHorizontal=(t,i,e)=>{k({outMode:e,checkModes:[P.Y.bounce],coord:t.x,maxCoord:this.container.canvas.size.width,setCb:i=>t.x+=i,radius:i})},this._fixVertical=(t,i,e)=>{k({outMode:e,checkModes:[P.Y.bounce],coord:t.y,maxCoord:this.container.canvas.size.height,setCb:i=>t.y+=i,radius:i})},this._getRollColor=t=>{if(!t||!this.roll||!this.backColor&&!this.roll.alter)return t;const i=this.roll.horizontal&&this.roll.vertical?n.gd*n.l:n.l,e=this.roll.horizontal?Math.PI*n.MX:n.dv;return Math.floor((this.roll.angle+e)/(Math.PI/i))%n.gd?this.backColor?this.backColor:this.roll.alter?(0,a.yx)(t,this.roll.alter.type,this.roll.alter.value):t:t},this._initPosition=t=>{const i=this.container,e=(0,s.VG)(this.options.zIndex.value),a=this._calcPosition(t,(0,s.qE)(e,n.X_,i.zLayers));if(!a)throw new Error("a valid position cannot be found for particle");this.position=a,this.initialPosition=this.position.copy();const r=i.canvas.size;switch(this.moveCenter={...(0,o.E9)(this.options.move.center,r),radius:this.options.move.center.radius,mode:this.options.move.center.mode},this.direction=(0,s.JY)(this.options.move.direction,this.position,this.moveCenter),this.options.move.direction){case z.F.inside:this.outType=x.x.inside;break;case z.F.outside:this.outType=x.x.outside}this.offset=w.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=this.shape?i.shapeDrawers.get(this.shape):void 0;s?.particleDestroy?.(this);for(const e of i.plugins.values())e.particleDestroyed?.(this,t);for(const e of i.particles.updaters)e.particleDestroyed?.(this,t);e?.reset(this),this._engine.dispatchEvent(_.B.particleDestroyed,{container:this.container,data:{particle:this}})}draw(t){const i=this.container,e=i.canvas;for(const s of i.plugins.values())e.drawParticlePlugin(s,this,t);e.drawParticle(this,t)}getAngle(){return this.rotation+(this.pathRotation?this.velocity.angle:n.tA)}getFillColor(){return this._getRollColor(this.bubble.color??(0,r.O_)(this.color))}getMass(){return this.getRadius()**n.dm*Math.PI*n.MX}getOpacity(){const t=this.options.zIndex,i=(n.RV-this.zIndexFactor)**t.opacityRate,e=this.bubble.opacity??(0,s.VG)(this.opacity?.value??n.hv),a=this.strokeOpacity??e;return this._cachedOpacityData.opacity=e*i,this._cachedOpacityData.strokeOpacity=a*i,this._cachedOpacityData}getPosition(){return this._cachedPosition.x=this.position.x+this.offset.x,this._cachedPosition.y=this.position.y+this.offset.y,this._cachedPosition.z=this.position.z,this._cachedPosition}getRadius(){return this.bubble.radius??this.size.value}getRotateData(){const t=this.getAngle();return this._cachedRotateData.sin=Math.sin(t),this._cachedRotateData.cos=Math.cos(t),this._cachedRotateData}getStrokeColor(){return this._getRollColor(this.bubble.color??(0,r.O_)(this.strokeColor))}getTransformData(t){const i=this.getRotateData(),e=this.isRotating;return this._cachedTransform.a=i.cos*(t.a??n.Ug.a),this._cachedTransform.b=e?i.sin*(t.b??n.D_):t.b??n.Ug.b,this._cachedTransform.c=e?-i.sin*(t.c??n.D_):t.c??n.Ug.c,this._cachedTransform.d=i.cos*(t.d??n.Ug.d),this._cachedTransform}init(t,i,e,a){const r=this.container,h=this._engine;this.id=t,this.group=a,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.isRotating=!1,this.rotation=0,this.misplaced=!1,this.retina={maxDistance:{}},this.outType=x.x.normal,this.ignoresResizeRatio=!0;const c=r.retina.pixelRatio,l=r.actualOptions,d=(0,C.y)(this._engine,r,l.particles),u=d.reduceDuplicates,p=d.effect.type,f=d.shape.type;this.effect=(0,o.TA)(p,this.id,u),this.shape=(0,o.TA)(f,this.id,u);const _=d.effect,g=d.shape;if(e){if(e.effect?.type){const t=e.effect.type,i=(0,o.TA)(t,this.id,u);i&&(this.effect=i,_.load(e.effect))}if(e.shape?.type){const t=e.shape.type,i=(0,o.TA)(t,this.id,u);i&&(this.shape=i,g.load(e.shape))}}if(this.effect===n.mR){const t=[...this.container.effectDrawers.keys()];this.effect=t[Math.floor((0,s.G0)()*t.length)]}if(this.shape===n.mR){const t=[...this.container.shapeDrawers.keys()];this.shape=t[Math.floor((0,s.G0)()*t.length)]}this.effectData=this.effect?function(t,i,e,s){const n=i.options[t];return(0,o.zw)({close:i.close,fill:i.fill},(0,o.TA)(n,e,s))}(this.effect,_,this.id,u):void 0,this.shapeData=this.shape?function(t,i,e,s){const n=i.options[t];return(0,o.zw)({close:i.close,fill:i.fill},(0,o.TA)(n,e,s))}(this.shape,g,this.id,u):void 0,d.load(e);const v=this.effectData;v&&d.load(v.particles);const m=this.shapeData;m&&d.load(m.particles);const y=new b.k(h,r);y.load(r.actualOptions.interactivity),y.load(d.interactivity),this.interactivity=y,this.effectFill=v?.fill??d.effect.fill,this.effectClose=v?.close??d.effect.close,this.shapeFill=m?.fill??d.shape.fill,this.shapeClose=m?.close??d.shape.close,this.options=d;const w=this.options.move.path;this.pathDelay=(0,s.VG)(w.delay.value)*n.Xu,w.generator&&(this.pathGenerator=this._engine.getPathGenerator(w.generator),this.pathGenerator&&r.addPath(w.generator,this.pathGenerator)&&this.pathGenerator.init(r)),r.retina.initParticle(this),this.size=(0,o.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=n.WH-(0,s.VG)(this.options.move.decay);const z=r.particles;let P,k;z.setLastZIndex(this.position.z),this.zIndexFactor=this.position.z/r.zLayers,this.sides=24,this.effect&&(P=r.effectDrawers.get(this.effect),P||(P=this._engine.getEffectDrawer(this.effect),P&&r.effectDrawers.set(this.effect,P))),P?.loadEffect&&P.loadEffect(this),this.shape&&(k=r.shapeDrawers.get(this.shape),k||(k=this._engine.getShapeDrawer(this.shape),k&&r.shapeDrawers.set(this.shape,k))),k?.loadShape&&k.loadShape(this);const O=k?.getSidesCount;O&&(this.sides=O(this)),this.spawning=!1;for(const t of z.updaters)t.init(this);for(const t of z.movers)t.init(this);P?.particleInit?.(r,this),k?.particleInit?.(r,this);for(const t of r.plugins.values())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 M=e(1989),T=e(5189);class D{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:a}=this;for(let o=0;o<n.Pg;o++){const r=o%n.gd;this._subs.push(new D(new T.M_(t+e*n.MX*r,i+s*n.MX*(Math.round(o*n.MX)-r),e*n.MX,s*n.MX),a))}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 n of this._points)!t.contains(n.position)&&(0,s.Yf)(t.position,n.position)>n.particle.getRadius()&&(!i||i(n.particle))||e.push(n.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 T.jl(t.x,t.y,i),e)}queryRectangle(t,i,e){return this.query(new T.M_(t.x,t.y,i.width,i.height),e)}}var R=e(7452);const S=t=>{const{height:i,width:e}=t;return new T.M_(n.un*e,n.un*i,n.Rh*e,n.Rh*i)};class I{constructor(t,i){this._addToPool=(...t)=>{this._pool.push(...t)},this._applyDensity=(t,i,e,s)=>{const a=t.number;if(!a.density.enable)return void(void 0===e?this._limit=a.limit.value:(s?.number.limit.value??a.limit.value)&&this._groupLimits.set(e,s?.number.limit.value??a.limit.value));const o=this._initDensityFactor(a.density),r=a.value,h=a.limit.value>n.ou?a.limit.value:r,c=Math.min(r,h)*o+i,l=Math.min(this.count,this.filter((t=>t.group===e)).length);void 0===e?this._limit=a.limit.value*o:this._groupLimits.set(e,a.limit.value*o),l<c?this.push(Math.abs(c-l),void 0,t,e):l>c&&this.removeQuantity(l-c,e)},this._initDensityFactor=t=>{const i=this._container;if(!i.canvas.element||!t.enable)return n.lA;const e=i.canvas.element,s=i.retina.pixelRatio;return e.width*e.height/(t.height*t.width*s**n.dm)},this._pushParticle=(t,i,e,s)=>{try{const n=this._pool.pop()??new O(this._engine,this._container);n.init(this._nextId,t,i,e);let a=!0;if(s&&(a=s(n)),!a)return;return this._array.push(n),this._zArray.push(n),this._nextId++,this._engine.dispatchEvent(_.B.particleAdded,{container:this._container,data:{particle:n}}),n}catch(t){(0,R.t)().warning(`error adding particle: ${t}`)}},this._removeParticle=(t,i,e)=>{const s=this._array[t];if(!s)return!1;if(s.group!==i)return!1;const a=this._zArray.indexOf(s);return this._array.splice(t,n.LD),this._zArray.splice(a,n.LD),s.destroy(e),this._engine.dispatchEvent(_.B.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 m(t,i),this._pluginsInitialized=!1;const e=i.canvas.size;this.quadTree=new D(S(e),n.Kw),this.movers=[],this.updaters=[]}get count(){return this._array.length}addManualParticles(){const t=this._container;t.actualOptions.manualParticles.forEach((i=>this.addParticle(i.position?(0,o.E9)(i.position,t.canvas.size):void 0,i.options)))}addParticle(t,i,e,s){const a=this._container.actualOptions.particles.number.limit.mode,o=void 0===e?this._limit:this._groupLimits.get(e)??this._limit,r=this.count;if(o>n.ou)switch(a){case y.d.delete:{const t=r+n.nq-o;t>n.wM&&this.removeQuantity(t);break}case y.d.wait:if(r>=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=[]}drawParticles(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.values())if(e=i.particlesInitialization?.()??e,e)break;if(this.addManualParticles(),!e){const t=i.particles,e=t.groups;for(const i in e){const s=e[i];if(s)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.values())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._container.canvas.drawParticles({value:0,factor:0})}remove(t,i,e){this.removeAt(this._array.indexOf(t),void 0,i,e)}removeAt(t,i=n.xd,e,s){if(t<n.z9||t>this.count)return;let a=0;for(let n=t;a<i&&n<this.count;n++)this._removeParticle(n,e,s)&&(n--,a++)}removeQuantity(t,i){this.removeAt(n.z9,t,i)}setDensity(){const t=this._container.actualOptions,i=t.particles.groups,e=t.manualParticles.length;for(const t in i){const s=i[t];if(!s)continue;const n=(0,C.y)(this._engine,this._container,s);this._applyDensity(n,e,t)}this._applyDensity(t.particles,e)}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 D(S(i.canvas.size),n.Kw);for(const t of i.pathGenerators.values())t.update();for(const e of i.plugins.values())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.values()){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 M.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(_.B.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=t[t.length-n.K3];if(!i)return;this._lastZIndex=i.position.z,this._needsSort=!1}}}class E{constructor(t){this.container=t,this.pixelRatio=n.$x,this.reduceFactor=n.Zp}init(){const t=this.container,i=t.actualOptions;this.pixelRatio=i.detectRetina?devicePixelRatio:n.$x,this.reduceFactor=n.Zp;const e=this.pixelRatio,a=t.canvas;if(a.element){const t=a.element;a.size.width=t.offsetWidth*e,a.size.height=t.offsetHeight*e}const o=i.particles,r=o.move;this.maxSpeed=(0,s.VG)(r.gravity.maxSpeed)*e,this.sizeAnimationSpeed=(0,s.VG)(o.size.animation.speed)*e}initParticle(t){const i=t.options,e=this.pixelRatio,n=i.move,a=n.distance,o=t.retina;o.moveDrift=(0,s.VG)(n.drift)*e,o.moveSpeed=(0,s.VG)(n.speed)*e,o.sizeAnimationSpeed=(0,s.VG)(i.size.animation.speed)*e;const r=o.maxDistance;r.horizontal=void 0!==a.horizontal?a.horizontal*e:void 0,r.vertical=void 0!==a.vertical?a.vertical*e:void 0,o.maxSpeed=(0,s.VG)(n.gravity.maxSpeed)*e}}function F(t){return!t.destroyed}function L(t,i,...e){const s=new g.J(t,i);return(0,C.Z)(s,...e),s}class A{constructor(t,i,e){this._delta={value:0,factor:0},this._intersectionManager=t=>{if(F(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+n.Xu/this.fpsLimit)return void this.draw(!1);if(this._lastFrameTime??=t,function(t,i,e=n.z$,s=!1){t.value=i,t.factor=s?n.z$/e:n.z$*i/n.Xu}(this._delta,t-this._lastFrameTime,this.fpsLimit,this._smooth),this.addLifeTime(this._delta.value),this._lastFrameTime=t,this._delta.value>n.Xu)return void this.draw(!1);if(this.canvas.drawParticles(this._delta),!this.alive())return void this.destroy();this.animationStatus&&this.draw(!1)}catch(t){(0,R.t)().error("error in animation loop",t)}},this._engine=t,this.id=Symbol(i),this.fpsLimit=120,this.hdr=!1,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._clickHandlers=new Map,this._sourceOptions=e,this._initialSourceOptions=e,this.retina=new E(this),this.canvas=new l(this,this._engine),this.particles=new I(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=L(this._engine,this),this.actualOptions=L(this._engine,this),this._eventListeners=new f(this),this._intersectionObserver=(0,o.BR)((t=>{this._intersectionManager(t)})),this._engine.dispatchEvent(_.B.containerBuilt,{container:this})}get animationStatus(){return!this._paused&&!this.pageHidden&&F(this)}get options(){return this._options}get sourceOptions(){return this._sourceOptions}addClickHandler(t){if(!F(this))return;const i=this.interactivity.element;if(!i)return;const e=(i,e,s)=>{if(!F(this))return;const n=this.retina.pixelRatio,a={x:e.x*n,y:e.y*n},o=this.particles.quadTree.queryCircle(a,s*n);t(i,o)};let s=!1,a=!1;this._clickHandlers.set("click",(t=>{if(!F(this))return;const i=t,s={x:i.offsetX||i.clientX,y:i.offsetY||i.clientY};e(t,s,n.FS)})),this._clickHandlers.set("touchstart",(()=>{F(this)&&(s=!0,a=!1)})),this._clickHandlers.set("touchmove",(()=>{F(this)&&(a=!0)})),this._clickHandlers.set("touchend",(t=>{if(F(this)){if(s&&!a){const i=t,s=i.touches[i.touches.length-n.KZ];if(!s)return;const a=this.canvas.element,o=a?a.getBoundingClientRect():void 0,r={x:s.clientX-(o?o.left:n.TL),y:s.clientY-(o?o.top:n.TL)};e(t,r,Math.max(s.radiusX,s.radiusY))}s=!1,a=!1}})),this._clickHandlers.set("touchcancel",(()=>{F(this)&&(s=!1,a=!1)}));for(const[t,e]of this._clickHandlers)i.addEventListener(t,e)}addLifeTime(t){this._lifeTime+=t}addPath(t,i,e=!1){return!(!F(this)||!e&&this.pathGenerators.has(t))&&(this.pathGenerators.set(t,i),!0)}alive(){return!this._duration||this._lifeTime<=this._duration}clearClickHandlers(){if(F(this)){for(const[t,i]of this._clickHandlers)this.interactivity.element?.removeEventListener(t,i);this._clickHandlers.clear()}}destroy(t=!0){if(F(this)){this.stop(),this.clearClickHandlers(),this.particles.destroy(),this.canvas.destroy();for(const t of this.effectDrawers.values())t.destroy?.(this);this.effectDrawers.clear();for(const t of this.shapeDrawers.values())t.destroy?.(this);if(this.shapeDrawers.clear(),this._engine.clearPlugins(this),this.destroyed=!0,t){const t=this._engine.items,i=t.findIndex((t=>t===this));i>=n.vF&&t.splice(i,n.JC)}this._engine.dispatchEvent(_.B.containerDestroyed,{container:this})}}draw(t){if(!F(this))return;let i=t;const e=t=>{i&&(this._lastFrameTime=void 0,i=!1),this._nextFrame(t)};this._drawAnimationFrame=(0,s.i0)((t=>{e(t)}))}async export(t,i={}){for(const e of this.plugins.values()){if(!e.export)continue;const s=await e.export(t,i);if(s.supported)return s.blob}(0,R.t)().error(`Export plugin with type ${t} not found`)}handleClickMode(t){if(F(this)){this.particles.handleClickMode(t);for(const i of this.plugins.values())i.handleClickMode?.(t)}}async init(){if(!F(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=L(this._engine,this,this._initialSourceOptions,this.sourceOptions),this.actualOptions=L(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(),this.canvas.init(),this.updateActualOptions(),this.canvas.initBackground(),this.canvas.resize();const{delay:a,duration:o,fpsLimit:r,hdr:h,smooth:c,zLayers:l}=this.actualOptions;this.hdr=h,this.zLayers=l,this._duration=(0,s.VG)(o)*n.Xu,this._delay=(0,s.VG)(a)*n.Xu,this._lifeTime=0,this.fpsLimit=r>n.DN?r:n.i8,this._smooth=c;for(const t of this.effectDrawers.values())await(t.init?.(this));for(const t of this.shapeDrawers.values())await(t.init?.(this));for(const t of this.plugins.values())await(t.init?.());this._engine.dispatchEvent(_.B.containerInit,{container:this}),await this.particles.init(),this.particles.setDensity();for(const t of this.plugins.values())t.particlesSetup?.();this._engine.dispatchEvent(_.B.particlesSetup,{container:this})}async loadTheme(t){F(this)&&(this._currentTheme=t,await this.refresh())}pause(){if(F(this)&&(void 0!==this._drawAnimationFrame&&((0,s.px)(this._drawAnimationFrame),delete this._drawAnimationFrame),!this._paused)){for(const t of this.plugins.values())t.pause?.();this.pageHidden||(this._paused=!0),this._engine.dispatchEvent(_.B.containerPaused,{container:this})}}play(t){if(!F(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.values())t.play&&t.play();this._engine.dispatchEvent(_.B.containerPlay,{container:this}),this.draw(i??!1)}else this._firstStart=!1}async refresh(){if(F(this))return this.stop(),this.start()}async reset(t){if(F(this))return this._initialSourceOptions=t,this._sourceOptions=t,this._options=L(this._engine,this,this._initialSourceOptions,this.sourceOptions),this.actualOptions=L(this._engine,this,this._options),this.refresh()}async start(){F(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.values())await(t.start?.());this._engine.dispatchEvent(_.B.containerStarted,{container:this}),this.play(),t()};this._delayTimeout=setTimeout((()=>{i()}),this._delay)})))}stop(){if(F(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.values())t.stop?.();for(const t of this.plugins.keys())this.plugins.delete(t);this._sourceOptions=this._options,this._engine.dispatchEvent(_.B.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/571.min.js.LICENSE.txt
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
/*! tsParticles Particles.js v4.0.0-alpha.
|
|
1
|
+
/*! tsParticles Particles.js v4.0.0-alpha.3 by Matteo Bruni */
|
package/browser/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { MBParticles } from "./marcbruederlin/Particles.js";
|
|
2
2
|
import { initParticlesJS } from "./VincentGarreau/particles.js";
|
|
3
3
|
const initPjs = (engine) => {
|
|
4
|
-
engine.checkVersion("4.0.0-alpha.
|
|
4
|
+
engine.checkVersion("4.0.0-alpha.3");
|
|
5
5
|
const { particlesJS, pJSDom } = initParticlesJS(engine);
|
|
6
6
|
globalThis.particlesJS = particlesJS;
|
|
7
7
|
globalThis.pJSDom = pJSDom;
|
package/cjs/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { MBParticles } from "./marcbruederlin/Particles.js";
|
|
2
2
|
import { initParticlesJS } from "./VincentGarreau/particles.js";
|
|
3
3
|
const initPjs = (engine) => {
|
|
4
|
-
engine.checkVersion("4.0.0-alpha.
|
|
4
|
+
engine.checkVersion("4.0.0-alpha.3");
|
|
5
5
|
const { particlesJS, pJSDom } = initParticlesJS(engine);
|
|
6
6
|
globalThis.particlesJS = particlesJS;
|
|
7
7
|
globalThis.pJSDom = pJSDom;
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
* Demo / Generator : https://particles.js.org/
|
|
5
5
|
* GitHub : https://www.github.com/matteobruni/tsparticles
|
|
6
6
|
* How to use? : Check the GitHub README
|
|
7
|
-
* v4.0.0-alpha.
|
|
7
|
+
* v4.0.0-alpha.3
|
|
8
8
|
*/
|
|
9
9
|
"use strict";
|
|
10
10
|
/*
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
\************************************************/
|
|
24
24
|
(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
|
|
25
25
|
|
|
26
|
-
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_Constants_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Utils/Constants.js */ \"../../engine/dist/browser/Core/Utils/Constants.js\");\n/* harmony import */ var _Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../Utils/ColorUtils.js */ \"../../engine/dist/browser/Utils/ColorUtils.js\");\n\n\n\n\nfunction setTransformValue(factor, newFactor, key) {\n const newValue = newFactor[key];\n if (newValue !== undefined) {\n factor[key] = (factor[key] ?? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.defaultTransformValue) * newValue;\n }\n}\nfunction setStyle(canvas, style, important = false) {\n if (!style) {\n return;\n }\n const element = canvas,\n elementStyle = element.style,\n keys = new Set();\n for (let i = 0; i < elementStyle.length; i++) {\n const key = elementStyle.item(i);\n if (!key) {\n continue;\n }\n keys.add(key);\n }\n for (let i = 0; i < style.length; i++) {\n const key = style.item(i);\n if (!key) {\n continue;\n }\n keys.add(key);\n }\n for (const key of keys) {\n const value = style.getPropertyValue(key);\n if (value) {\n elementStyle.setProperty(key, value, important ? \"important\" : \"\");\n } else {\n elementStyle.removeProperty(key);\n }\n }\n}\nclass Canvas {\n constructor(container, engine) {\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_3__.rangeColorToHsl)(this._engine, plugin.particleFillColor(particle));\n }\n if (!sColor && plugin.particleStrokeColor) {\n sColor = (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_3__.rangeColorToHsl)(this._engine, plugin.particleStrokeColor(particle));\n }\n if (fColor && sColor) {\n break;\n }\n }\n return [fColor, sColor];\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._setFullScreenStyle();\n } else {\n this._resetOriginalStyle();\n }\n for (const key in options.style) {\n if (!key || !Object.prototype.hasOwnProperty.call(options.style, key)) {\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._repairStyle = () => {\n const element = this.element;\n if (!element) {\n return;\n }\n this._safeMutationObserver(observer => {\n observer.disconnect();\n });\n this._initStyle();\n this.initBackground();\n const pointerEvents = this._pointerEvents;\n element.style.pointerEvents = pointerEvents;\n element.setAttribute(\"pointer-events\", pointerEvents);\n this._safeMutationObserver(observer => {\n if (!(element instanceof Node)) {\n return;\n }\n observer.observe(element, {\n attributes: true\n });\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, true);\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 setStyle(element, (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_1__.getFullScreenStyle)(this.container.actualOptions.fullScreen.zIndex), true);\n };\n this._engine = engine;\n this._standardSize = {\n height: 0,\n width: 0\n };\n const pxRatio = container.retina.pixelRatio,\n stdSize = this._standardSize;\n this.size = {\n height: stdSize.height * pxRatio,\n width: stdSize.width * pxRatio\n };\n this._context = null;\n this._generated = false;\n this._preDrawUpdaters = [];\n this._postDrawUpdaters = [];\n this._resizePlugins = [];\n this._colorPlugins = [];\n this._pointerEvents = \"none\";\n }\n get _fullScreen() {\n return this.container.actualOptions.fullScreen.enable;\n }\n canvasClear() {\n if (!this.container.actualOptions.clear) {\n return;\n }\n this.draw(ctx => {\n (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__.clear)(ctx, this.size);\n });\n }\n clear() {\n let pluginHandled = false;\n for (const plugin of this.container.plugins.values()) {\n if (!pluginHandled && plugin.canvasClear) {\n pluginHandled = plugin.canvasClear();\n }\n }\n if (pluginHandled) {\n return;\n }\n this.canvasClear();\n }\n clearDrawPlugin(plugin, delta) {\n this.draw(ctx => {\n (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__.clearDrawPlugin)(ctx, plugin, delta);\n });\n }\n destroy() {\n this.stop();\n if (this._generated) {\n const element = this.element;\n element?.remove();\n this.element = undefined;\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 drawParticle(particle, delta) {\n if (particle.spawning || particle.destroyed) {\n return;\n }\n const radius = particle.getRadius();\n if (radius <= _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.minimumSize) {\n return;\n }\n const pfColor = particle.getFillColor(),\n psColor = particle.getStrokeColor() ?? pfColor;\n let [fColor, sColor] = this._getPluginParticleColors(particle);\n fColor ??= pfColor;\n sColor ??= psColor;\n if (!fColor && !sColor) {\n return;\n }\n const container = this.container,\n zIndexOptions = particle.options.zIndex,\n zIndexFactor = _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.zIndexFactorOffset - particle.zIndexFactor,\n zOpacityFactor = zIndexFactor ** zIndexOptions.opacityRate,\n opacity = particle.bubble.opacity ?? particle.opacity?.value ?? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.defaultOpacity,\n strokeOpacity = particle.strokeOpacity ?? opacity,\n zOpacity = opacity * zOpacityFactor,\n zStrokeOpacity = strokeOpacity * zOpacityFactor,\n transform = {},\n getFillStyle = () => {\n if (!fColor) {\n return;\n }\n return (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_3__.getStyleFromHsl)(fColor, container.hdr, zOpacity);\n },\n colorStyles = {\n fill: getFillStyle()\n },\n getStrokestyle = () => {\n if (!sColor) {\n return colorStyles.fill;\n }\n return (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_3__.getStyleFromHsl)(sColor, container.hdr, zStrokeOpacity);\n };\n colorStyles.stroke = getStrokestyle();\n this.draw(context => {\n this._applyPreDrawUpdaters(context, particle, radius, zOpacity, colorStyles, transform);\n (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__.drawParticle)({\n container,\n context,\n particle,\n delta,\n colorStyles,\n radius: radius * zIndexFactor ** zIndexOptions.sizeRate,\n opacity: zOpacity,\n transform\n });\n });\n this._applyPostDrawUpdaters(particle);\n }\n drawParticlePlugin(plugin, particle, delta) {\n this.draw(ctx => {\n (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__.drawParticlePlugin)(ctx, plugin, particle, delta);\n });\n }\n drawParticles(delta) {\n const {\n particles,\n plugins\n } = this.container;\n this.clear();\n particles.update(delta);\n for (const plugin of plugins.values()) {\n this.drawPlugin(plugin, delta);\n }\n this.draw(() => {\n particles.drawParticles(delta);\n });\n for (const plugin of plugins.values()) {\n this.clearDrawPlugin(plugin, delta);\n }\n }\n drawPlugin(plugin, delta) {\n this.draw(ctx => {\n (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__.drawPlugin)(ctx, plugin, delta);\n });\n }\n init() {\n this._safeMutationObserver(obs => {\n obs.disconnect();\n });\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 this.initBackground();\n this._safeMutationObserver(obs => {\n if (!this.element || !(this.element instanceof Node)) {\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 {\n container\n } = this,\n options = container.actualOptions,\n background = options.background,\n element = this.element;\n if (!element) {\n return;\n }\n const elementStyle = element.style,\n color = (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_3__.rangeColorToRgb)(this._engine, background.color);\n if (color) {\n elementStyle.backgroundColor = (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_3__.getStyleFromRgb)(color, container.hdr, 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.values()) {\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 const container = this.container;\n this._generated = _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.generatedAttribute in canvas.dataset ? canvas.dataset[_Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.generatedAttribute] === \"true\" : this._generated;\n this.element = canvas;\n this.element.ariaHidden = \"true\";\n this._originalStyle = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_1__.cloneStyle)(this.element.style);\n const standardSize = this._standardSize;\n standardSize.height = canvas.offsetHeight;\n standardSize.width = canvas.offsetWidth;\n const pxRatio = this.container.retina.pixelRatio,\n retinaSize = this.size;\n canvas.height = retinaSize.height = standardSize.height * pxRatio;\n canvas.width = retinaSize.width = standardSize.width * pxRatio;\n const canSupportHdrQuery = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_1__.safeMatchMedia)(\"(color-gamut: p3)\");\n this._context = this.element.getContext(\"2d\", {\n alpha: true,\n colorSpace: canSupportHdrQuery?.matches && container.hdr ? \"display-p3\" : \"srgb\",\n desynchronized: true,\n willReadFrequently: false\n });\n this._safeMutationObserver(obs => {\n obs.disconnect();\n });\n container.retina.init();\n this.initBackground();\n this._safeMutationObserver(obs => {\n if (!this.element || !(this.element instanceof Node)) {\n return;\n }\n obs.observe(this.element, {\n attributes: true\n });\n });\n }\n paint() {\n let handled = false;\n for (const plugin of this.container.plugins.values()) {\n if (handled) {\n break;\n }\n handled = plugin.canvasPaint?.() ?? false;\n }\n if (handled) {\n return;\n }\n this.paintBase();\n }\n paintBase(baseColor) {\n this.draw(ctx => {\n (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__.paintBase)(ctx, this.size, baseColor);\n });\n }\n paintImage(image, opacity) {\n this.draw(ctx => {\n (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__.paintImage)(ctx, this.size, image, opacity);\n });\n }\n resize() {\n if (!this.element) {\n return false;\n }\n const container = this.container,\n currentSize = container.canvas._standardSize,\n newSize = {\n width: this.element.offsetWidth,\n height: this.element.offsetHeight\n },\n pxRatio = container.retina.pixelRatio,\n retinaSize = {\n width: newSize.width * pxRatio,\n height: newSize.height * pxRatio\n };\n if (newSize.height === currentSize.height && newSize.width === currentSize.width && retinaSize.height === this.element.height && retinaSize.width === this.element.width) {\n return false;\n }\n const oldSize = {\n ...currentSize\n };\n currentSize.height = newSize.height;\n currentSize.width = newSize.width;\n const canvasSize = this.size;\n this.element.width = canvasSize.width = retinaSize.width;\n this.element.height = canvasSize.height = retinaSize.height;\n if (this.container.started) {\n container.particles.setResizeFactor({\n width: currentSize.width / oldSize.width,\n height: currentSize.height / oldSize.height\n });\n }\n return true;\n }\n setPointerEvents(type) {\n const element = this.element;\n if (!element) {\n return;\n }\n this._pointerEvents = type;\n this._repairStyle();\n }\n stop() {\n this._safeMutationObserver(obs => {\n obs.disconnect();\n });\n this._mutationObserver = undefined;\n this.draw(ctx => {\n (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__.clear)(ctx, this.size);\n });\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?\n}");
|
|
26
|
+
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_Constants_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Utils/Constants.js */ \"../../engine/dist/browser/Core/Utils/Constants.js\");\n/* harmony import */ var _Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../Utils/ColorUtils.js */ \"../../engine/dist/browser/Utils/ColorUtils.js\");\n\n\n\n\nconst fColorIndex = 0,\n sColorIndex = 1;\nfunction setTransformValue(factor, newFactor, key) {\n const newValue = newFactor[key];\n if (newValue !== undefined) {\n factor[key] = (factor[key] ?? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.defaultTransformValue) * newValue;\n }\n}\nfunction setStyle(canvas, style, important = false) {\n if (!style) {\n return;\n }\n const element = canvas,\n elementStyle = element.style,\n keys = new Set();\n for (let i = 0; i < elementStyle.length; i++) {\n const key = elementStyle.item(i);\n if (!key) {\n continue;\n }\n keys.add(key);\n }\n for (let i = 0; i < style.length; i++) {\n const key = style.item(i);\n if (!key) {\n continue;\n }\n keys.add(key);\n }\n for (const key of keys) {\n const value = style.getPropertyValue(key);\n if (value) {\n elementStyle.setProperty(key, value, important ? \"important\" : \"\");\n } else {\n elementStyle.removeProperty(key);\n }\n }\n}\nclass Canvas {\n constructor(container, engine) {\n this.container = container;\n this._reusableColorStyles = {};\n this._reusablePluginColors = [undefined, undefined];\n this._reusableTransform = {};\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_3__.rangeColorToHsl)(this._engine, plugin.particleFillColor(particle));\n }\n if (!sColor && plugin.particleStrokeColor) {\n sColor = (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_3__.rangeColorToHsl)(this._engine, plugin.particleStrokeColor(particle));\n }\n if (fColor && sColor) {\n break;\n }\n }\n this._reusablePluginColors[fColorIndex] = fColor;\n this._reusablePluginColors[sColorIndex] = sColor;\n return this._reusablePluginColors;\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._setFullScreenStyle();\n } else {\n this._resetOriginalStyle();\n }\n for (const key in options.style) {\n if (!key || !Object.hasOwn(options.style, key)) {\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._repairStyle = () => {\n const element = this.element;\n if (!element) {\n return;\n }\n this._safeMutationObserver(observer => {\n observer.disconnect();\n });\n this._initStyle();\n this.initBackground();\n const pointerEvents = this._pointerEvents;\n element.style.pointerEvents = pointerEvents;\n element.setAttribute(\"pointer-events\", pointerEvents);\n this._safeMutationObserver(observer => {\n if (!(element instanceof Node)) {\n return;\n }\n observer.observe(element, {\n attributes: true\n });\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, true);\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 setStyle(element, (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_1__.getFullScreenStyle)(this.container.actualOptions.fullScreen.zIndex), true);\n };\n this._engine = engine;\n this._standardSize = {\n height: 0,\n width: 0\n };\n const pxRatio = container.retina.pixelRatio,\n stdSize = this._standardSize;\n this.size = {\n height: stdSize.height * pxRatio,\n width: stdSize.width * pxRatio\n };\n this._context = null;\n this._generated = false;\n this._preDrawUpdaters = [];\n this._postDrawUpdaters = [];\n this._resizePlugins = [];\n this._colorPlugins = [];\n this._pointerEvents = \"none\";\n }\n get _fullScreen() {\n return this.container.actualOptions.fullScreen.enable;\n }\n canvasClear() {\n if (!this.container.actualOptions.clear) {\n return;\n }\n this.draw(ctx => {\n (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__.clear)(ctx, this.size);\n });\n }\n clear() {\n let pluginHandled = false;\n for (const plugin of this.container.plugins.values()) {\n if (!pluginHandled && plugin.canvasClear) {\n pluginHandled = plugin.canvasClear();\n }\n }\n if (pluginHandled) {\n return;\n }\n this.canvasClear();\n }\n clearDrawPlugin(plugin, delta) {\n this.draw(ctx => {\n (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__.clearDrawPlugin)(ctx, plugin, delta);\n });\n }\n destroy() {\n this.stop();\n if (this._generated) {\n const element = this.element;\n element?.remove();\n this.element = undefined;\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 drawParticle(particle, delta) {\n if (particle.spawning || particle.destroyed) {\n return;\n }\n const radius = particle.getRadius();\n if (radius <= _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.minimumSize) {\n return;\n }\n const pfColor = particle.getFillColor(),\n psColor = particle.getStrokeColor() ?? pfColor;\n let [fColor, sColor] = this._getPluginParticleColors(particle);\n fColor ??= pfColor;\n sColor ??= psColor;\n if (!fColor && !sColor) {\n return;\n }\n const container = this.container,\n zIndexOptions = particle.options.zIndex,\n zIndexFactor = _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.zIndexFactorOffset - particle.zIndexFactor,\n {\n opacity,\n strokeOpacity\n } = particle.getOpacity(),\n transform = this._reusableTransform,\n colorStyles = this._reusableColorStyles,\n fill = fColor ? (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_3__.getStyleFromHsl)(fColor, container.hdr, opacity) : undefined,\n stroke = sColor ? (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_3__.getStyleFromHsl)(sColor, container.hdr, strokeOpacity) : fill;\n transform.a = transform.b = transform.c = transform.d = undefined;\n colorStyles.fill = fill;\n colorStyles.stroke = stroke;\n this.draw(context => {\n this._applyPreDrawUpdaters(context, particle, radius, opacity, colorStyles, transform);\n (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__.drawParticle)({\n container,\n context,\n particle,\n delta,\n colorStyles,\n radius: radius * zIndexFactor ** zIndexOptions.sizeRate,\n opacity: opacity,\n transform\n });\n });\n this._applyPostDrawUpdaters(particle);\n }\n drawParticlePlugin(plugin, particle, delta) {\n this.draw(ctx => {\n (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__.drawParticlePlugin)(ctx, plugin, particle, delta);\n });\n }\n drawParticles(delta) {\n const {\n particles,\n plugins\n } = this.container;\n this.clear();\n particles.update(delta);\n for (const plugin of plugins.values()) {\n this.drawPlugin(plugin, delta);\n }\n this.draw(() => {\n particles.drawParticles(delta);\n });\n for (const plugin of plugins.values()) {\n this.clearDrawPlugin(plugin, delta);\n }\n }\n drawPlugin(plugin, delta) {\n this.draw(ctx => {\n (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__.drawPlugin)(ctx, plugin, delta);\n });\n }\n init() {\n this._safeMutationObserver(obs => {\n obs.disconnect();\n });\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 this.initBackground();\n this._safeMutationObserver(obs => {\n if (!this.element || !(this.element instanceof Node)) {\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 {\n container\n } = this,\n options = container.actualOptions,\n background = options.background,\n element = this.element;\n if (!element) {\n return;\n }\n const elementStyle = element.style,\n color = (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_3__.rangeColorToRgb)(this._engine, background.color);\n if (color) {\n elementStyle.backgroundColor = (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_3__.getStyleFromRgb)(color, container.hdr, 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.values()) {\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 const container = this.container;\n this._generated = _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.generatedAttribute in canvas.dataset ? canvas.dataset[_Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.generatedAttribute] === \"true\" : this._generated;\n this.element = canvas;\n this.element.ariaHidden = \"true\";\n this._originalStyle = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_1__.cloneStyle)(this.element.style);\n const standardSize = this._standardSize;\n standardSize.height = canvas.offsetHeight;\n standardSize.width = canvas.offsetWidth;\n const pxRatio = this.container.retina.pixelRatio,\n retinaSize = this.size;\n canvas.height = retinaSize.height = standardSize.height * pxRatio;\n canvas.width = retinaSize.width = standardSize.width * pxRatio;\n const canSupportHdrQuery = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_1__.safeMatchMedia)(\"(color-gamut: p3)\");\n this._context = this.element.getContext(\"2d\", {\n alpha: true,\n colorSpace: canSupportHdrQuery?.matches && container.hdr ? \"display-p3\" : \"srgb\",\n desynchronized: true,\n willReadFrequently: false\n });\n this._safeMutationObserver(obs => {\n obs.disconnect();\n });\n container.retina.init();\n this.initBackground();\n this._safeMutationObserver(obs => {\n if (!this.element || !(this.element instanceof Node)) {\n return;\n }\n obs.observe(this.element, {\n attributes: true\n });\n });\n }\n paint() {\n let handled = false;\n for (const plugin of this.container.plugins.values()) {\n if (handled) {\n break;\n }\n handled = plugin.canvasPaint?.() ?? false;\n }\n if (handled) {\n return;\n }\n this.paintBase();\n }\n paintBase(baseColor) {\n this.draw(ctx => {\n (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__.paintBase)(ctx, this.size, baseColor);\n });\n }\n paintImage(image, opacity) {\n this.draw(ctx => {\n (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__.paintImage)(ctx, this.size, image, opacity);\n });\n }\n resize() {\n if (!this.element) {\n return false;\n }\n const container = this.container,\n currentSize = container.canvas._standardSize,\n newSize = {\n width: this.element.offsetWidth,\n height: this.element.offsetHeight\n },\n pxRatio = container.retina.pixelRatio,\n retinaSize = {\n width: newSize.width * pxRatio,\n height: newSize.height * pxRatio\n };\n if (newSize.height === currentSize.height && newSize.width === currentSize.width && retinaSize.height === this.element.height && retinaSize.width === this.element.width) {\n return false;\n }\n const oldSize = {\n ...currentSize\n };\n currentSize.height = newSize.height;\n currentSize.width = newSize.width;\n const canvasSize = this.size;\n this.element.width = canvasSize.width = retinaSize.width;\n this.element.height = canvasSize.height = retinaSize.height;\n if (this.container.started) {\n container.particles.setResizeFactor({\n width: currentSize.width / oldSize.width,\n height: currentSize.height / oldSize.height\n });\n }\n return true;\n }\n setPointerEvents(type) {\n const element = this.element;\n if (!element) {\n return;\n }\n this._pointerEvents = type;\n this._repairStyle();\n }\n stop() {\n this._safeMutationObserver(obs => {\n obs.disconnect();\n });\n this._mutationObserver = undefined;\n this.draw(ctx => {\n (0,_Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_0__.clear)(ctx, this.size);\n });\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?\n}");
|
|
27
27
|
|
|
28
28
|
/***/ },
|
|
29
29
|
|
|
@@ -33,7 +33,7 @@ eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpa
|
|
|
33
33
|
\***************************************************/
|
|
34
34
|
(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
|
|
35
35
|
|
|
36
|
-
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_MathUtils_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../Utils/MathUtils.js */ \"../../engine/dist/browser/Utils/MathUtils.js\");\n/* harmony import */ var _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Utils/Constants.js */ \"../../engine/dist/browser/Core/Utils/Constants.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 _Enums_Types_EventType_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../Enums/Types/EventType.js */ \"../../engine/dist/browser/Enums/Types/EventType.js\");\n/* harmony import */ var _Options_Classes_Options_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../Options/Classes/Options.js */ \"../../engine/dist/browser/Options/Classes/Options.js\");\n/* harmony import */ var _Particles_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./Particles.js */ \"../../engine/dist/browser/Core/Particles.js\");\n/* harmony import */ var _Retina_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./Retina.js */ \"../../engine/dist/browser/Core/Retina.js\");\n/* harmony import */ var _Utils_LogUtils_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../Utils/LogUtils.js */ \"../../engine/dist/browser/Utils/LogUtils.js\");\n/* harmony import */ var _Utils_OptionsUtils_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../Utils/OptionsUtils.js */ \"../../engine/dist/browser/Utils/OptionsUtils.js\");\n/* harmony import */ var _Utils_Utils_js__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../Utils/Utils.js */ \"../../engine/dist/browser/Utils/Utils.js\");\n\n\n\n\n\n\n\n\n\n\n\nfunction guardCheck(container) {\n return !container.destroyed;\n}\nfunction initDelta(value, fpsLimit = _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_1__.defaultFps, smooth = false) {\n return {\n value,\n factor: smooth ? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_1__.defaultFps / fpsLimit : _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_1__.defaultFps * value / _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_1__.millisecondsToSeconds\n };\n}\nfunction loadContainerOptions(engine, container, ...sourceOptionsArr) {\n const options = new _Options_Classes_Options_js__WEBPACK_IMPORTED_MODULE_5__.Options(engine, container);\n (0,_Utils_OptionsUtils_js__WEBPACK_IMPORTED_MODULE_9__.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 = timestamp => {\n try {\n if (!this._smooth && this._lastFrameTime !== undefined && timestamp < this._lastFrameTime + _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_1__.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_1__.millisecondsToSeconds) {\n this.draw(false);\n return;\n }\n this.canvas.drawParticles(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_LogUtils_js__WEBPACK_IMPORTED_MODULE_8__.getLogger)().error(\"error in animation loop\", e);\n }\n };\n this._engine = engine;\n this.id = Symbol(id);\n this.fpsLimit = 120;\n this.hdr = false;\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._clickHandlers = new Map();\n this._sourceOptions = sourceOptions;\n this._initialSourceOptions = sourceOptions;\n this.retina = new _Retina_js__WEBPACK_IMPORTED_MODULE_7__.Retina(this);\n this.canvas = new _Canvas_js__WEBPACK_IMPORTED_MODULE_2__.Canvas(this, this._engine);\n this.particles = new _Particles_js__WEBPACK_IMPORTED_MODULE_6__.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_10__.safeIntersectionObserver)(entries => {\n this._intersectionManager(entries);\n });\n this._engine.dispatchEvent(_Enums_Types_EventType_js__WEBPACK_IMPORTED_MODULE_4__.EventType.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 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 clickOrTouchHandler(e, pos, _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_1__.clickRadius);\n },\n touchStartHandler = () => {\n if (!guardCheck(this)) {\n return;\n }\n touched = true;\n touchMoved = false;\n },\n touchMoveHandler = () => {\n if (!guardCheck(this)) {\n return;\n }\n touchMoved = true;\n },\n touchEndHandler = e => {\n if (!guardCheck(this)) {\n return;\n }\n if (touched && !touchMoved) {\n const touchEvent = e,\n lastTouch = touchEvent.touches[touchEvent.touches.length - _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_1__.touchEndLengthOffset];\n if (!lastTouch) {\n return;\n }\n const element = this.canvas.element,\n canvasRect = element ? element.getBoundingClientRect() : undefined,\n pos = {\n x: lastTouch.clientX - (canvasRect ? canvasRect.left : _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_1__.minCoordinate),\n y: lastTouch.clientY - (canvasRect ? canvasRect.top : _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_1__.minCoordinate)\n };\n clickOrTouchHandler(e, pos, Math.max(lastTouch.radiusX, lastTouch.radiusY));\n }\n touched = false;\n touchMoved = false;\n },\n touchCancelHandler = () => {\n if (!guardCheck(this)) {\n return;\n }\n touched = false;\n touchMoved = false;\n };\n let touched = false,\n touchMoved = false;\n this._clickHandlers.set(\"click\", clickHandler);\n this._clickHandlers.set(\"touchstart\", touchStartHandler);\n this._clickHandlers.set(\"touchmove\", touchMoveHandler);\n this._clickHandlers.set(\"touchend\", touchEndHandler);\n this._clickHandlers.set(\"touchcancel\", touchCancelHandler);\n for (const [key, handler] of this._clickHandlers) {\n el.addEventListener(key, handler);\n }\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 clearClickHandlers() {\n if (!guardCheck(this)) {\n return;\n }\n for (const [key, handler] of this._clickHandlers) {\n this.interactivity.element?.removeEventListener(key, handler);\n }\n this._clickHandlers.clear();\n }\n destroy(remove = true) {\n if (!guardCheck(this)) {\n return;\n }\n this.stop();\n this.clearClickHandlers();\n this.particles.destroy();\n this.canvas.destroy();\n for (const effectDrawer of this.effectDrawers.values()) {\n effectDrawer.destroy?.(this);\n }\n for (const shapeDrawer of this.shapeDrawers.values()) {\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 if (remove) {\n const mainArr = this._engine.items,\n idx = mainArr.findIndex(t => t === this);\n if (idx >= _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_1__.removeMinIndex) {\n mainArr.splice(idx, _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_1__.removeDeleteCount);\n }\n }\n this._engine.dispatchEvent(_Enums_Types_EventType_js__WEBPACK_IMPORTED_MODULE_4__.EventType.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 = (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_0__.animate)(timestamp => {\n frame(timestamp);\n });\n }\n async export(type, options = {}) {\n for (const plugin of this.plugins.values()) {\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_LogUtils_js__WEBPACK_IMPORTED_MODULE_8__.getLogger)().error(`Export plugin with type ${type} not found`);\n return undefined;\n }\n handleClickMode(mode) {\n if (!guardCheck(this)) {\n return;\n }\n this.particles.handleClickMode(mode);\n for (const plugin of this.plugins.values()) {\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 this.canvas.init();\n this.updateActualOptions();\n this.canvas.initBackground();\n this.canvas.resize();\n const {\n delay,\n duration,\n fpsLimit,\n hdr,\n smooth,\n zLayers\n } = this.actualOptions;\n this.hdr = hdr;\n this.zLayers = zLayers;\n this._duration = (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_0__.getRangeValue)(duration) * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_1__.millisecondsToSeconds;\n this._delay = (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_0__.getRangeValue)(delay) * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_1__.millisecondsToSeconds;\n this._lifeTime = 0;\n this.fpsLimit = fpsLimit > _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_1__.minFpsLimit ? fpsLimit : _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_1__.defaultFpsLimit;\n this._smooth = smooth;\n for (const drawer of this.effectDrawers.values()) {\n await drawer.init?.(this);\n }\n for (const drawer of this.shapeDrawers.values()) {\n await drawer.init?.(this);\n }\n for (const plugin of this.plugins.values()) {\n await plugin.init?.();\n }\n this._engine.dispatchEvent(_Enums_Types_EventType_js__WEBPACK_IMPORTED_MODULE_4__.EventType.containerInit, {\n container: this\n });\n await this.particles.init();\n this.particles.setDensity();\n for (const plugin of this.plugins.values()) {\n plugin.particlesSetup?.();\n }\n this._engine.dispatchEvent(_Enums_Types_EventType_js__WEBPACK_IMPORTED_MODULE_4__.EventType.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 (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_0__.cancelAnimation)(this._drawAnimationFrame);\n delete this._drawAnimationFrame;\n }\n if (this._paused) {\n return;\n }\n for (const plugin of this.plugins.values()) {\n plugin.pause?.();\n }\n if (!this.pageHidden) {\n this._paused = true;\n }\n this._engine.dispatchEvent(_Enums_Types_EventType_js__WEBPACK_IMPORTED_MODULE_4__.EventType.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.values()) {\n if (plugin.play) {\n plugin.play();\n }\n }\n }\n this._engine.dispatchEvent(_Enums_Types_EventType_js__WEBPACK_IMPORTED_MODULE_4__.EventType.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(sourceOptions) {\n if (!guardCheck(this)) {\n return;\n }\n this._initialSourceOptions = sourceOptions;\n this._sourceOptions = sourceOptions;\n this._options = loadContainerOptions(this._engine, this, this._initialSourceOptions, this.sourceOptions);\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.values()) {\n await plugin.start?.();\n }\n this._engine.dispatchEvent(_Enums_Types_EventType_js__WEBPACK_IMPORTED_MODULE_4__.EventType.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.values()) {\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(_Enums_Types_EventType_js__WEBPACK_IMPORTED_MODULE_4__.EventType.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?\n}");
|
|
36
|
+
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_MathUtils_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../Utils/MathUtils.js */ \"../../engine/dist/browser/Utils/MathUtils.js\");\n/* harmony import */ var _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Utils/Constants.js */ \"../../engine/dist/browser/Core/Utils/Constants.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 _Enums_Types_EventType_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../Enums/Types/EventType.js */ \"../../engine/dist/browser/Enums/Types/EventType.js\");\n/* harmony import */ var _Options_Classes_Options_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../Options/Classes/Options.js */ \"../../engine/dist/browser/Options/Classes/Options.js\");\n/* harmony import */ var _Particles_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./Particles.js */ \"../../engine/dist/browser/Core/Particles.js\");\n/* harmony import */ var _Retina_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./Retina.js */ \"../../engine/dist/browser/Core/Retina.js\");\n/* harmony import */ var _Utils_LogUtils_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../Utils/LogUtils.js */ \"../../engine/dist/browser/Utils/LogUtils.js\");\n/* harmony import */ var _Utils_OptionsUtils_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../Utils/OptionsUtils.js */ \"../../engine/dist/browser/Utils/OptionsUtils.js\");\n/* harmony import */ var _Utils_Utils_js__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../Utils/Utils.js */ \"../../engine/dist/browser/Utils/Utils.js\");\n\n\n\n\n\n\n\n\n\n\n\nfunction guardCheck(container) {\n return !container.destroyed;\n}\nfunction updateDelta(delta, value, fpsLimit = _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_1__.defaultFps, smooth = false) {\n delta.value = value;\n delta.factor = smooth ? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_1__.defaultFps / fpsLimit : _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_1__.defaultFps * value / _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_1__.millisecondsToSeconds;\n}\nfunction loadContainerOptions(engine, container, ...sourceOptionsArr) {\n const options = new _Options_Classes_Options_js__WEBPACK_IMPORTED_MODULE_5__.Options(engine, container);\n (0,_Utils_OptionsUtils_js__WEBPACK_IMPORTED_MODULE_9__.loadOptions)(options, ...sourceOptionsArr);\n return options;\n}\nclass Container {\n constructor(engine, id, sourceOptions) {\n this._delta = {\n value: 0,\n factor: 0\n };\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 = timestamp => {\n try {\n if (!this._smooth && this._lastFrameTime !== undefined && timestamp < this._lastFrameTime + _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_1__.millisecondsToSeconds / this.fpsLimit) {\n this.draw(false);\n return;\n }\n this._lastFrameTime ??= timestamp;\n updateDelta(this._delta, timestamp - this._lastFrameTime, this.fpsLimit, this._smooth);\n this.addLifeTime(this._delta.value);\n this._lastFrameTime = timestamp;\n if (this._delta.value > _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_1__.millisecondsToSeconds) {\n this.draw(false);\n return;\n }\n this.canvas.drawParticles(this._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_LogUtils_js__WEBPACK_IMPORTED_MODULE_8__.getLogger)().error(\"error in animation loop\", e);\n }\n };\n this._engine = engine;\n this.id = Symbol(id);\n this.fpsLimit = 120;\n this.hdr = false;\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._clickHandlers = new Map();\n this._sourceOptions = sourceOptions;\n this._initialSourceOptions = sourceOptions;\n this.retina = new _Retina_js__WEBPACK_IMPORTED_MODULE_7__.Retina(this);\n this.canvas = new _Canvas_js__WEBPACK_IMPORTED_MODULE_2__.Canvas(this, this._engine);\n this.particles = new _Particles_js__WEBPACK_IMPORTED_MODULE_6__.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_10__.safeIntersectionObserver)(entries => {\n this._intersectionManager(entries);\n });\n this._engine.dispatchEvent(_Enums_Types_EventType_js__WEBPACK_IMPORTED_MODULE_4__.EventType.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 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 clickOrTouchHandler(e, pos, _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_1__.clickRadius);\n },\n touchStartHandler = () => {\n if (!guardCheck(this)) {\n return;\n }\n touched = true;\n touchMoved = false;\n },\n touchMoveHandler = () => {\n if (!guardCheck(this)) {\n return;\n }\n touchMoved = true;\n },\n touchEndHandler = e => {\n if (!guardCheck(this)) {\n return;\n }\n if (touched && !touchMoved) {\n const touchEvent = e,\n lastTouch = touchEvent.touches[touchEvent.touches.length - _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_1__.touchEndLengthOffset];\n if (!lastTouch) {\n return;\n }\n const element = this.canvas.element,\n canvasRect = element ? element.getBoundingClientRect() : undefined,\n pos = {\n x: lastTouch.clientX - (canvasRect ? canvasRect.left : _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_1__.minCoordinate),\n y: lastTouch.clientY - (canvasRect ? canvasRect.top : _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_1__.minCoordinate)\n };\n clickOrTouchHandler(e, pos, Math.max(lastTouch.radiusX, lastTouch.radiusY));\n }\n touched = false;\n touchMoved = false;\n },\n touchCancelHandler = () => {\n if (!guardCheck(this)) {\n return;\n }\n touched = false;\n touchMoved = false;\n };\n let touched = false,\n touchMoved = false;\n this._clickHandlers.set(\"click\", clickHandler);\n this._clickHandlers.set(\"touchstart\", touchStartHandler);\n this._clickHandlers.set(\"touchmove\", touchMoveHandler);\n this._clickHandlers.set(\"touchend\", touchEndHandler);\n this._clickHandlers.set(\"touchcancel\", touchCancelHandler);\n for (const [key, handler] of this._clickHandlers) {\n el.addEventListener(key, handler);\n }\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 clearClickHandlers() {\n if (!guardCheck(this)) {\n return;\n }\n for (const [key, handler] of this._clickHandlers) {\n this.interactivity.element?.removeEventListener(key, handler);\n }\n this._clickHandlers.clear();\n }\n destroy(remove = true) {\n if (!guardCheck(this)) {\n return;\n }\n this.stop();\n this.clearClickHandlers();\n this.particles.destroy();\n this.canvas.destroy();\n for (const effectDrawer of this.effectDrawers.values()) {\n effectDrawer.destroy?.(this);\n }\n this.effectDrawers.clear();\n for (const shapeDrawer of this.shapeDrawers.values()) {\n shapeDrawer.destroy?.(this);\n }\n this.shapeDrawers.clear();\n this._engine.clearPlugins(this);\n this.destroyed = true;\n if (remove) {\n const mainArr = this._engine.items,\n idx = mainArr.findIndex(t => t === this);\n if (idx >= _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_1__.removeMinIndex) {\n mainArr.splice(idx, _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_1__.removeDeleteCount);\n }\n }\n this._engine.dispatchEvent(_Enums_Types_EventType_js__WEBPACK_IMPORTED_MODULE_4__.EventType.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 = (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_0__.animate)(timestamp => {\n frame(timestamp);\n });\n }\n async export(type, options = {}) {\n for (const plugin of this.plugins.values()) {\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_LogUtils_js__WEBPACK_IMPORTED_MODULE_8__.getLogger)().error(`Export plugin with type ${type} not found`);\n return undefined;\n }\n handleClickMode(mode) {\n if (!guardCheck(this)) {\n return;\n }\n this.particles.handleClickMode(mode);\n for (const plugin of this.plugins.values()) {\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 this.canvas.init();\n this.updateActualOptions();\n this.canvas.initBackground();\n this.canvas.resize();\n const {\n delay,\n duration,\n fpsLimit,\n hdr,\n smooth,\n zLayers\n } = this.actualOptions;\n this.hdr = hdr;\n this.zLayers = zLayers;\n this._duration = (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_0__.getRangeValue)(duration) * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_1__.millisecondsToSeconds;\n this._delay = (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_0__.getRangeValue)(delay) * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_1__.millisecondsToSeconds;\n this._lifeTime = 0;\n this.fpsLimit = fpsLimit > _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_1__.minFpsLimit ? fpsLimit : _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_1__.defaultFpsLimit;\n this._smooth = smooth;\n for (const drawer of this.effectDrawers.values()) {\n await drawer.init?.(this);\n }\n for (const drawer of this.shapeDrawers.values()) {\n await drawer.init?.(this);\n }\n for (const plugin of this.plugins.values()) {\n await plugin.init?.();\n }\n this._engine.dispatchEvent(_Enums_Types_EventType_js__WEBPACK_IMPORTED_MODULE_4__.EventType.containerInit, {\n container: this\n });\n await this.particles.init();\n this.particles.setDensity();\n for (const plugin of this.plugins.values()) {\n plugin.particlesSetup?.();\n }\n this._engine.dispatchEvent(_Enums_Types_EventType_js__WEBPACK_IMPORTED_MODULE_4__.EventType.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 (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_0__.cancelAnimation)(this._drawAnimationFrame);\n delete this._drawAnimationFrame;\n }\n if (this._paused) {\n return;\n }\n for (const plugin of this.plugins.values()) {\n plugin.pause?.();\n }\n if (!this.pageHidden) {\n this._paused = true;\n }\n this._engine.dispatchEvent(_Enums_Types_EventType_js__WEBPACK_IMPORTED_MODULE_4__.EventType.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.values()) {\n if (plugin.play) {\n plugin.play();\n }\n }\n }\n this._engine.dispatchEvent(_Enums_Types_EventType_js__WEBPACK_IMPORTED_MODULE_4__.EventType.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(sourceOptions) {\n if (!guardCheck(this)) {\n return;\n }\n this._initialSourceOptions = sourceOptions;\n this._sourceOptions = sourceOptions;\n this._options = loadContainerOptions(this._engine, this, this._initialSourceOptions, this.sourceOptions);\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.values()) {\n await plugin.start?.();\n }\n this._engine.dispatchEvent(_Enums_Types_EventType_js__WEBPACK_IMPORTED_MODULE_4__.EventType.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.values()) {\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(_Enums_Types_EventType_js__WEBPACK_IMPORTED_MODULE_4__.EventType.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?\n}");
|
|
37
37
|
|
|
38
38
|
/***/ },
|
|
39
39
|
|
|
@@ -43,7 +43,7 @@ eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpa
|
|
|
43
43
|
\**************************************************/
|
|
44
44
|
(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
|
|
45
45
|
|
|
46
|
-
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_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Utils/MathUtils.js */ \"../../engine/dist/browser/Utils/MathUtils.js\");\n/* harmony import */ var _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Utils/Constants.js */ \"../../engine/dist/browser/Core/Utils/Constants.js\");\n/* harmony import */ var _Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../Utils/Utils.js */ \"../../engine/dist/browser/Utils/Utils.js\");\n/* harmony import */ var _Enums_Types_EventType_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../Enums/Types/EventType.js */ \"../../engine/dist/browser/Enums/Types/EventType.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 _Enums_Directions_MoveDirection_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../Enums/Directions/MoveDirection.js */ \"../../engine/dist/browser/Enums/Directions/MoveDirection.js\");\n/* harmony import */ var _Enums_Modes_OutMode_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../Enums/Modes/OutMode.js */ \"../../engine/dist/browser/Enums/Modes/OutMode.js\");\n/* harmony import */ var _Enums_Types_ParticleOutType_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../Enums/Types/ParticleOutType.js */ \"../../engine/dist/browser/Enums/Types/ParticleOutType.js\");\n/* harmony import */ var _Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../Utils/CanvasUtils.js */ \"../../engine/dist/browser/Utils/CanvasUtils.js\");\n/* harmony import */ var _Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../Utils/ColorUtils.js */ \"../../engine/dist/browser/Utils/ColorUtils.js\");\n/* harmony import */ var _Utils_OptionsUtils_js__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../Utils/OptionsUtils.js */ \"../../engine/dist/browser/Utils/OptionsUtils.js\");\n\n\n\n\n\n\n\n\n\n\n\n\nfunction loadEffectData(effect, effectOptions, id, reduceDuplicates) {\n const effectData = effectOptions.options[effect];\n return (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.deepExtend)({\n close: effectOptions.close,\n fill: effectOptions.fill\n }, (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.itemFromSingleOrMultiple)(effectData, id, reduceDuplicates));\n}\nfunction loadShapeData(shape, shapeOptions, id, reduceDuplicates) {\n const shapeData = shapeOptions.options[shape];\n return (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.deepExtend)({\n close: shapeOptions.close,\n fill: shapeOptions.fill\n }, (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.itemFromSingleOrMultiple)(shapeData, id, reduceDuplicates));\n}\nfunction fixOutMode(data) {\n if (!(0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.isInArray)(data.outMode, data.checkModes)) {\n return;\n }\n const diameter = data.radius * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.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 = _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.defaultRetryCount) => {\n const plugins = container.plugins.values();\n for (const plugin of plugins) {\n const pluginPos = plugin.particlePosition?.(position, this);\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_MathUtils_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: [_Enums_Modes_OutMode_js__WEBPACK_IMPORTED_MODULE_7__.OutMode.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: [_Enums_Modes_OutMode_js__WEBPACK_IMPORTED_MODULE_7__.OutMode.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 let isValidPosition = true;\n for (const plugin of plugins) {\n isValidPosition = plugin.checkParticlePosition?.(this, pos, tryCount);\n if (isValidPosition === false) {\n break;\n }\n }\n if (!isValidPosition) {\n return this._calcPosition(container, undefined, zIndex, tryCount + _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.tryCountIncrement);\n }\n return pos;\n };\n this._calculateVelocity = () => {\n const baseVelocity = (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.getParticleBaseVelocity)(this.direction),\n res = baseVelocity.copy(),\n moveOptions = this.options.move;\n if (moveOptions.direction === _Enums_Directions_MoveDirection_js__WEBPACK_IMPORTED_MODULE_6__.MoveDirection.inside || moveOptions.direction === _Enums_Directions_MoveDirection_js__WEBPACK_IMPORTED_MODULE_6__.MoveDirection.outside) {\n return res;\n }\n const rad = (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.degToRad)((0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.getRangeValue)(moveOptions.angle.value)),\n radOffset = (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.degToRad)((0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.getRangeValue)(moveOptions.angle.offset)),\n range = {\n left: radOffset - rad * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.half,\n right: radOffset + rad * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.half\n };\n if (!moveOptions.straight) {\n res.angle += (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.randomInRangeValue)((0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.setRangeValue)(range.left, range.right));\n }\n if (moveOptions.random && typeof moveOptions.speed === \"number\") {\n res.length *= (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.getRandom)();\n }\n return res;\n };\n this._getRollColor = color => {\n if (!color || !this.roll || !this.backColor && !this.roll.alter) {\n return color;\n }\n const backFactor = this.roll.horizontal && this.roll.vertical ? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.double * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.rollFactor : _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.rollFactor,\n backSum = this.roll.horizontal ? Math.PI * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.half : _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.none,\n rolled = Math.floor((this.roll.angle + backSum) / (Math.PI / backFactor)) % _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.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_9__.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_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.getRangeValue)(this.options.zIndex.value);\n this.position = this._calcPosition(container, position, (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.clamp)(zIndexValue, _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.minZ, container.zLayers));\n this.initialPosition = this.position.copy();\n const canvasSize = container.canvas.size;\n this.moveCenter = {\n ...(0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.getPosition)(this.options.move.center, canvasSize),\n radius: this.options.move.center.radius,\n mode: this.options.move.center.mode\n };\n this.direction = (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.getParticleDirectionAngle)(this.options.move.direction, this.position, this.moveCenter);\n switch (this.options.move.direction) {\n case _Enums_Directions_MoveDirection_js__WEBPACK_IMPORTED_MODULE_6__.MoveDirection.inside:\n this.outType = _Enums_Types_ParticleOutType_js__WEBPACK_IMPORTED_MODULE_8__.ParticleOutType.inside;\n break;\n case _Enums_Directions_MoveDirection_js__WEBPACK_IMPORTED_MODULE_6__.MoveDirection.outside:\n this.outType = _Enums_Types_ParticleOutType_js__WEBPACK_IMPORTED_MODULE_8__.ParticleOutType.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 = this.shape ? container.shapeDrawers.get(this.shape) : undefined;\n shapeDrawer?.particleDestroy?.(this);\n for (const plugin of container.plugins.values()) {\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(_Enums_Types_EventType_js__WEBPACK_IMPORTED_MODULE_4__.EventType.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.values()) {\n canvas.drawParticlePlugin(plugin, this, delta);\n }\n canvas.drawParticle(this, delta);\n }\n getAngle() {\n return this.rotation + (this.pathRotation ? this.velocity.angle : _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.defaultAngle);\n }\n getFillColor() {\n return this._getRollColor(this.bubble.color ?? (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_10__.getHslFromAnimation)(this.color));\n }\n getMass() {\n return this.getRadius() ** _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.squareExp * Math.PI * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.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_10__.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.isRotating = false;\n this.rotation = 0;\n this.misplaced = false;\n this.retina = {\n maxDistance: {}\n };\n this.outType = _Enums_Types_ParticleOutType_js__WEBPACK_IMPORTED_MODULE_8__.ParticleOutType.normal;\n this.ignoresResizeRatio = true;\n const pxRatio = container.retina.pixelRatio,\n mainOptions = container.actualOptions,\n particlesOptions = (0,_Utils_OptionsUtils_js__WEBPACK_IMPORTED_MODULE_11__.loadParticlesOptions)(this._engine, container, mainOptions.particles),\n reduceDuplicates = particlesOptions.reduceDuplicates,\n effectType = particlesOptions.effect.type,\n shapeType = particlesOptions.shape.type;\n this.effect = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.itemFromSingleOrMultiple)(effectType, this.id, reduceDuplicates);\n this.shape = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.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_3__.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_3__.itemFromSingleOrMultiple)(overrideShapeType, this.id, reduceDuplicates);\n if (shape) {\n this.shape = shape;\n shapeOptions.load(overrideOptions.shape);\n }\n }\n }\n if (this.effect === _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.randomColorValue) {\n const availableEffects = [...this.container.effectDrawers.keys()];\n this.effect = availableEffects[Math.floor((0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.getRandom)() * availableEffects.length)];\n }\n if (this.shape === _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.randomColorValue) {\n const availableShapes = [...this.container.shapeDrawers.keys()];\n this.shape = availableShapes[Math.floor((0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.getRandom)() * availableShapes.length)];\n }\n this.effectData = this.effect ? loadEffectData(this.effect, effectOptions, this.id, reduceDuplicates) : undefined;\n this.shapeData = this.shape ? loadShapeData(this.shape, shapeOptions, this.id, reduceDuplicates) : undefined;\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_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.getRangeValue)(pathOptions.delay.value) * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.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_3__.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 this.moveDecay = _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.decayOffset - (0,_Utils_MathUtils_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, shapeDrawer;\n if (this.effect) {\n 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 }\n if (effectDrawer?.loadEffect) {\n effectDrawer.loadEffect(this);\n }\n if (this.shape) {\n 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 }\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 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.values()) {\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?\n}");
|
|
46
|
+
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_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Utils/MathUtils.js */ \"../../engine/dist/browser/Utils/MathUtils.js\");\n/* harmony import */ var _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Utils/Constants.js */ \"../../engine/dist/browser/Core/Utils/Constants.js\");\n/* harmony import */ var _Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../Utils/Utils.js */ \"../../engine/dist/browser/Utils/Utils.js\");\n/* harmony import */ var _Enums_Types_EventType_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../Enums/Types/EventType.js */ \"../../engine/dist/browser/Enums/Types/EventType.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 _Enums_Directions_MoveDirection_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../Enums/Directions/MoveDirection.js */ \"../../engine/dist/browser/Enums/Directions/MoveDirection.js\");\n/* harmony import */ var _Enums_Modes_OutMode_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../Enums/Modes/OutMode.js */ \"../../engine/dist/browser/Enums/Modes/OutMode.js\");\n/* harmony import */ var _Enums_Types_ParticleOutType_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../Enums/Types/ParticleOutType.js */ \"../../engine/dist/browser/Enums/Types/ParticleOutType.js\");\n/* harmony import */ var _Utils_CanvasUtils_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../Utils/CanvasUtils.js */ \"../../engine/dist/browser/Utils/CanvasUtils.js\");\n/* harmony import */ var _Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../Utils/ColorUtils.js */ \"../../engine/dist/browser/Utils/ColorUtils.js\");\n/* harmony import */ var _Utils_OptionsUtils_js__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../Utils/OptionsUtils.js */ \"../../engine/dist/browser/Utils/OptionsUtils.js\");\n\n\n\n\n\n\n\n\n\n\n\n\nfunction loadEffectData(effect, effectOptions, id, reduceDuplicates) {\n const effectData = effectOptions.options[effect];\n return (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.deepExtend)({\n close: effectOptions.close,\n fill: effectOptions.fill\n }, (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.itemFromSingleOrMultiple)(effectData, id, reduceDuplicates));\n}\nfunction loadShapeData(shape, shapeOptions, id, reduceDuplicates) {\n const shapeData = shapeOptions.options[shape];\n return (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.deepExtend)({\n close: shapeOptions.close,\n fill: shapeOptions.fill\n }, (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.itemFromSingleOrMultiple)(shapeData, id, reduceDuplicates));\n}\nfunction fixOutMode(data) {\n if (!(0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.isInArray)(data.outMode, data.checkModes)) {\n return;\n }\n const diameter = data.radius * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.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._cachedOpacityData = {\n opacity: _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.defaultOpacity,\n strokeOpacity: _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.defaultOpacity\n };\n this._cachedPosition = _Utils_Vectors_js__WEBPACK_IMPORTED_MODULE_0__.Vector3d.origin;\n this._cachedRotateData = {\n sin: 0,\n cos: 0\n };\n this._cachedTransform = {\n a: 1,\n b: 0,\n c: 0,\n d: 1\n };\n this._calcPosition = (position, zIndex) => {\n let tryCount = _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.defaultRetryCount,\n posVec = position ? _Utils_Vectors_js__WEBPACK_IMPORTED_MODULE_0__.Vector3d.create(position.x, position.y, zIndex) : undefined;\n const container = this.container,\n plugins = Array.from(container.plugins.values()),\n outModes = this.options.move.outModes,\n radius = this.getRadius(),\n canvasSize = container.canvas.size,\n abortController = new AbortController(),\n {\n signal\n } = abortController;\n while (!signal.aborted) {\n for (const plugin of plugins) {\n const pluginPos = plugin.particlePosition?.(posVec, this);\n if (pluginPos) {\n return _Utils_Vectors_js__WEBPACK_IMPORTED_MODULE_0__.Vector3d.create(pluginPos.x, pluginPos.y, zIndex);\n }\n }\n const exactPosition = (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.calcExactPositionOrRandomFromSize)({\n size: canvasSize,\n position: posVec\n }),\n pos = _Utils_Vectors_js__WEBPACK_IMPORTED_MODULE_0__.Vector3d.create(exactPosition.x, exactPosition.y, zIndex);\n this._fixHorizontal(pos, radius, outModes.left ?? outModes.default);\n this._fixHorizontal(pos, radius, outModes.right ?? outModes.default);\n this._fixVertical(pos, radius, outModes.top ?? outModes.default);\n this._fixVertical(pos, radius, outModes.bottom ?? outModes.default);\n let isValidPosition = true;\n for (const plugin of plugins) {\n isValidPosition = plugin.checkParticlePosition?.(this, pos, tryCount) ?? true;\n if (!isValidPosition) {\n break;\n }\n }\n if (isValidPosition) {\n return pos;\n }\n tryCount += _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.tryCountIncrement;\n posVec = undefined;\n }\n return posVec;\n };\n this._calculateVelocity = () => {\n const baseVelocity = (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.getParticleBaseVelocity)(this.direction),\n res = baseVelocity.copy(),\n moveOptions = this.options.move;\n if (moveOptions.direction === _Enums_Directions_MoveDirection_js__WEBPACK_IMPORTED_MODULE_6__.MoveDirection.inside || moveOptions.direction === _Enums_Directions_MoveDirection_js__WEBPACK_IMPORTED_MODULE_6__.MoveDirection.outside) {\n return res;\n }\n const rad = (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.degToRad)((0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.getRangeValue)(moveOptions.angle.value)),\n radOffset = (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.degToRad)((0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.getRangeValue)(moveOptions.angle.offset)),\n range = {\n left: radOffset - rad * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.half,\n right: radOffset + rad * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.half\n };\n if (!moveOptions.straight) {\n res.angle += (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.randomInRangeValue)((0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.setRangeValue)(range.left, range.right));\n }\n if (moveOptions.random && typeof moveOptions.speed === \"number\") {\n res.length *= (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.getRandom)();\n }\n return res;\n };\n this._fixHorizontal = (pos, radius, outMode) => {\n fixOutMode({\n outMode,\n checkModes: [_Enums_Modes_OutMode_js__WEBPACK_IMPORTED_MODULE_7__.OutMode.bounce],\n coord: pos.x,\n maxCoord: this.container.canvas.size.width,\n setCb: value => pos.x += value,\n radius\n });\n };\n this._fixVertical = (pos, radius, outMode) => {\n fixOutMode({\n outMode,\n checkModes: [_Enums_Modes_OutMode_js__WEBPACK_IMPORTED_MODULE_7__.OutMode.bounce],\n coord: pos.y,\n maxCoord: this.container.canvas.size.height,\n setCb: value => pos.y += value,\n radius\n });\n };\n this._getRollColor = color => {\n if (!color || !this.roll || !this.backColor && !this.roll.alter) {\n return color;\n }\n const backFactor = this.roll.horizontal && this.roll.vertical ? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.double * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.rollFactor : _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.rollFactor,\n backSum = this.roll.horizontal ? Math.PI * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.half : _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.none,\n rolled = Math.floor((this.roll.angle + backSum) / (Math.PI / backFactor)) % _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.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_9__.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_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.getRangeValue)(this.options.zIndex.value);\n const initialPosition = this._calcPosition(position, (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.clamp)(zIndexValue, _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.minZ, container.zLayers));\n if (!initialPosition) {\n throw new Error(\"a valid position cannot be found for particle\");\n }\n this.position = initialPosition;\n this.initialPosition = this.position.copy();\n const canvasSize = container.canvas.size;\n this.moveCenter = {\n ...(0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.getPosition)(this.options.move.center, canvasSize),\n radius: this.options.move.center.radius,\n mode: this.options.move.center.mode\n };\n this.direction = (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.getParticleDirectionAngle)(this.options.move.direction, this.position, this.moveCenter);\n switch (this.options.move.direction) {\n case _Enums_Directions_MoveDirection_js__WEBPACK_IMPORTED_MODULE_6__.MoveDirection.inside:\n this.outType = _Enums_Types_ParticleOutType_js__WEBPACK_IMPORTED_MODULE_8__.ParticleOutType.inside;\n break;\n case _Enums_Directions_MoveDirection_js__WEBPACK_IMPORTED_MODULE_6__.MoveDirection.outside:\n this.outType = _Enums_Types_ParticleOutType_js__WEBPACK_IMPORTED_MODULE_8__.ParticleOutType.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 = this.shape ? container.shapeDrawers.get(this.shape) : undefined;\n shapeDrawer?.particleDestroy?.(this);\n for (const plugin of container.plugins.values()) {\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(_Enums_Types_EventType_js__WEBPACK_IMPORTED_MODULE_4__.EventType.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.values()) {\n canvas.drawParticlePlugin(plugin, this, delta);\n }\n canvas.drawParticle(this, delta);\n }\n getAngle() {\n return this.rotation + (this.pathRotation ? this.velocity.angle : _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.defaultAngle);\n }\n getFillColor() {\n return this._getRollColor(this.bubble.color ?? (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_10__.getHslFromAnimation)(this.color));\n }\n getMass() {\n return this.getRadius() ** _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.squareExp * Math.PI * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.half;\n }\n getOpacity() {\n const zIndexOptions = this.options.zIndex,\n zIndexFactor = _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.zIndexFactorOffset - this.zIndexFactor,\n zOpacityFactor = zIndexFactor ** zIndexOptions.opacityRate,\n opacity = this.bubble.opacity ?? (0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.getRangeValue)(this.opacity?.value ?? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.defaultOpacity),\n strokeOpacity = this.strokeOpacity ?? opacity;\n this._cachedOpacityData.opacity = opacity * zOpacityFactor;\n this._cachedOpacityData.strokeOpacity = strokeOpacity * zOpacityFactor;\n return this._cachedOpacityData;\n }\n getPosition() {\n this._cachedPosition.x = this.position.x + this.offset.x;\n this._cachedPosition.y = this.position.y + this.offset.y;\n this._cachedPosition.z = this.position.z;\n return this._cachedPosition;\n }\n getRadius() {\n return this.bubble.radius ?? this.size.value;\n }\n getRotateData() {\n const angle = this.getAngle();\n this._cachedRotateData.sin = Math.sin(angle);\n this._cachedRotateData.cos = Math.cos(angle);\n return this._cachedRotateData;\n }\n getStrokeColor() {\n return this._getRollColor(this.bubble.color ?? (0,_Utils_ColorUtils_js__WEBPACK_IMPORTED_MODULE_10__.getHslFromAnimation)(this.strokeColor));\n }\n getTransformData(externalTransform) {\n const rotateData = this.getRotateData(),\n rotating = this.isRotating;\n this._cachedTransform.a = rotateData.cos * (externalTransform.a ?? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.defaultTransform.a);\n this._cachedTransform.b = rotating ? rotateData.sin * (externalTransform.b ?? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.identity) : externalTransform.b ?? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.defaultTransform.b;\n this._cachedTransform.c = rotating ? -rotateData.sin * (externalTransform.c ?? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.identity) : externalTransform.c ?? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.defaultTransform.c;\n this._cachedTransform.d = rotateData.cos * (externalTransform.d ?? _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.defaultTransform.d);\n return this._cachedTransform;\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.isRotating = false;\n this.rotation = 0;\n this.misplaced = false;\n this.retina = {\n maxDistance: {}\n };\n this.outType = _Enums_Types_ParticleOutType_js__WEBPACK_IMPORTED_MODULE_8__.ParticleOutType.normal;\n this.ignoresResizeRatio = true;\n const pxRatio = container.retina.pixelRatio,\n mainOptions = container.actualOptions,\n particlesOptions = (0,_Utils_OptionsUtils_js__WEBPACK_IMPORTED_MODULE_11__.loadParticlesOptions)(this._engine, container, mainOptions.particles),\n reduceDuplicates = particlesOptions.reduceDuplicates,\n effectType = particlesOptions.effect.type,\n shapeType = particlesOptions.shape.type;\n this.effect = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.itemFromSingleOrMultiple)(effectType, this.id, reduceDuplicates);\n this.shape = (0,_Utils_Utils_js__WEBPACK_IMPORTED_MODULE_3__.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_3__.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_3__.itemFromSingleOrMultiple)(overrideShapeType, this.id, reduceDuplicates);\n if (shape) {\n this.shape = shape;\n shapeOptions.load(overrideOptions.shape);\n }\n }\n }\n if (this.effect === _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.randomColorValue) {\n const availableEffects = [...this.container.effectDrawers.keys()];\n this.effect = availableEffects[Math.floor((0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.getRandom)() * availableEffects.length)];\n }\n if (this.shape === _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.randomColorValue) {\n const availableShapes = [...this.container.shapeDrawers.keys()];\n this.shape = availableShapes[Math.floor((0,_Utils_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.getRandom)() * availableShapes.length)];\n }\n this.effectData = this.effect ? loadEffectData(this.effect, effectOptions, this.id, reduceDuplicates) : undefined;\n this.shapeData = this.shape ? loadShapeData(this.shape, shapeOptions, this.id, reduceDuplicates) : undefined;\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_MathUtils_js__WEBPACK_IMPORTED_MODULE_1__.getRangeValue)(pathOptions.delay.value) * _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.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_3__.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 this.moveDecay = _Utils_Constants_js__WEBPACK_IMPORTED_MODULE_2__.decayOffset - (0,_Utils_MathUtils_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, shapeDrawer;\n if (this.effect) {\n 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 }\n if (effectDrawer?.loadEffect) {\n effectDrawer.loadEffect(this);\n }\n if (this.shape) {\n 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 }\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 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.values()) {\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?\n}");
|
|
47
47
|
|
|
48
48
|
/***/ },
|
|
49
49
|
|
package/esm/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { MBParticles } from "./marcbruederlin/Particles.js";
|
|
2
2
|
import { initParticlesJS } from "./VincentGarreau/particles.js";
|
|
3
3
|
const initPjs = (engine) => {
|
|
4
|
-
engine.checkVersion("4.0.0-alpha.
|
|
4
|
+
engine.checkVersion("4.0.0-alpha.3");
|
|
5
5
|
const { particlesJS, pJSDom } = initParticlesJS(engine);
|
|
6
6
|
globalThis.particlesJS = particlesJS;
|
|
7
7
|
globalThis.pJSDom = pJSDom;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tsparticles/pjs",
|
|
3
|
-
"version": "4.0.0-alpha.
|
|
3
|
+
"version": "4.0.0-alpha.3",
|
|
4
4
|
"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.",
|
|
5
5
|
"homepage": "https://particles.js.org",
|
|
6
6
|
"repository": {
|
|
@@ -99,7 +99,7 @@
|
|
|
99
99
|
"./package.json": "./package.json"
|
|
100
100
|
},
|
|
101
101
|
"dependencies": {
|
|
102
|
-
"@tsparticles/engine": "4.0.0-alpha.
|
|
102
|
+
"@tsparticles/engine": "4.0.0-alpha.3"
|
|
103
103
|
},
|
|
104
104
|
"publishConfig": {
|
|
105
105
|
"access": "public"
|
package/report.html
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8"/>
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
|
6
|
-
<title>@tsparticles/pjs [
|
|
6
|
+
<title>@tsparticles/pjs [10 Jan 2026 at 19:11]</title>
|
|
7
7
|
<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" />
|
|
8
8
|
|
|
9
9
|
<script>
|