tsparticles 1.40.0 → 1.41.1

package/tsparticles.updater.tilt.js

@@ -544,20 +544,20 @@
           }
         }
       }
-      externalInteract(delta) {
+      async externalInteract(delta) {
         for (const interactor of this.externalInteractors) {
           if (interactor.isEnabled()) {
-            interactor.interact(delta);
+            await interactor.interact(delta);
           }
         }
       }
-      particlesInteract(particle, delta) {
+      async particlesInteract(particle, delta) {
         for (const interactor of this.externalInteractors) {
           interactor.reset(particle);
         }
         for (const interactor of this.particleInteractors) {
           if (interactor.isEnabled(particle)) {
-            interactor.interact(particle, delta);
+            await interactor.interact(particle, delta);
           }
         }
       }
@@ -2949,10 +2949,10 @@
         }
         container.pathGenerator.init(container);
       }
-      redraw() {
+      async redraw() {
         this.clear();
         this.init();
-        this.draw({
+        await this.draw({
           value: 0,
           factor: 0
         });
@@ -2977,7 +2977,7 @@
       remove(particle, group, override) {
         this.removeAt(this.array.indexOf(particle), undefined, group, override);
       }
-      update(delta) {
+      async update(delta) {
         const container = this.container;
         const particlesToDelete = [];
         container.pathGenerator.update();
@@ -3011,23 +3011,23 @@
         for (const particle of particlesToDelete) {
           this.remove(particle);
         }
-        this.interactionManager.externalInteract(delta);
+        await this.interactionManager.externalInteract(delta);
         for (const particle of container.particles.array) {
           for (const updater of this.updaters) {
             updater.update(particle, delta);
           }
           if (!particle.destroyed && !particle.spawning) {
-            this.interactionManager.particlesInteract(particle, delta);
+            await this.interactionManager.particlesInteract(particle, delta);
           }
         }
         delete container.canvas.resizeFactor;
       }
-      draw(delta) {
+      async draw(delta) {
         const container = this.container;
         container.canvas.clear();
         const canvasSize = this.container.canvas.size;
         this.quadTree = new QuadTree(new Rectangle(-canvasSize.width / 4, -canvasSize.height / 4, canvasSize.width * 3 / 2, canvasSize.height * 3 / 2), 4);
-        this.update(delta);
+        await this.update(delta);
         if (this.needsSort) {
           this.zArray.sort(((a, b) => b.position.z - a.position.z || a.id - b.id));
           this.lastZIndex = this.zArray[this.zArray.length - 1].position.z;
@@ -3388,12 +3388,12 @@
       }
       draw(force) {
         let refreshTime = force;
-        this.drawAnimationFrame = animate()((timestamp => {
+        this.drawAnimationFrame = animate()((async timestamp => {
           if (refreshTime) {
             this.lastFrameTime = undefined;
             refreshTime = false;
           }
-          this.drawer.nextFrame(timestamp);
+          await this.drawer.nextFrame(timestamp);
         }));
       }
       getAnimationStatus() {
@@ -3403,6 +3403,7 @@
         this.setPath(noiseOrGenerator, init, update);
       }
       setPath(pathOrGenerator, init, update) {
+        var _a, _b, _c;
         if (!pathOrGenerator) {
           return;
         }
@@ -3415,15 +3416,11 @@
             this.pathGenerator.update = update;
           }
         } else {
-          if (pathOrGenerator.generate) {
-            this.pathGenerator.generate = pathOrGenerator.generate;
-          }
-          if (pathOrGenerator.init) {
-            this.pathGenerator.init = pathOrGenerator.init;
-          }
-          if (pathOrGenerator.update) {
-            this.pathGenerator.update = pathOrGenerator.update;
-          }
+          const oldGenerator = this.pathGenerator;
+          this.pathGenerator = pathOrGenerator;
+          (_a = this.pathGenerator).generate || (_a.generate = oldGenerator.generate);
+          (_b = this.pathGenerator).init || (_b.init = oldGenerator.init);
+          (_c = this.pathGenerator).update || (_c.update = oldGenerator.update);
         }
       }
       destroy() {
@@ -3637,18 +3634,7 @@
         }
         const pathOptions = this.actualOptions.particles.move.path;
         if (pathOptions.generator) {
-          const customGenerator = Container_classPrivateFieldGet(this, _Container_engine, "f").plugins.getPathGenerator(pathOptions.generator);
-          if (customGenerator) {
-            if (customGenerator.init) {
-              this.pathGenerator.init = customGenerator.init;
-            }
-            if (customGenerator.generate) {
-              this.pathGenerator.generate = customGenerator.generate;
-            }
-            if (customGenerator.update) {
-              this.pathGenerator.update = customGenerator.update;
-            }
-          }
+          this.setPath(Container_classPrivateFieldGet(this, _Container_engine, "f").plugins.getPathGenerator(pathOptions.generator));
         }
         this.particles.init();
         this.particles.setDensity();

package/tsparticles.updater.tilt.min.js

@@ -1,2 +1,2 @@
-/*! tsParticles v1.40.0 by Matteo Bruni */
+/*! tsParticles v1.41.1 by Matteo Bruni */
 !function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var o=t();for(var n in o)("object"==typeof exports?exports:e)[n]=o[n]}}(window,(function(){return function(){"use strict";var e={d:function(t,o){for(var n in o)e.o(o,n)&&!e.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:o[n]})},o:function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r:function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};e.r(t),e.d(t,{loadTiltUpdater:function(){return u}});class o{}o.generatedAttribute="generated",o.randomColorValue="random",o.midColorValue="mid",o.touchEndEvent="touchend",o.mouseDownEvent="mousedown",o.mouseUpEvent="mouseup",o.mouseMoveEvent="mousemove",o.touchStartEvent="touchstart",o.touchMoveEvent="touchmove",o.mouseLeaveEvent="mouseleave",o.mouseOutEvent="mouseout",o.touchCancelEvent="touchcancel",o.resizeEvent="resize",o.visibilityChangeEvent="visibilitychange",o.noPolygonDataLoaded="No polygon data loaded.",o.noPolygonFound="No polygon found, you need to specify SVG url in config.";new WeakMap;new WeakMap;new WeakMap,new WeakSet;new WeakMap;new WeakMap;new WeakMap;function n(e){return"number"==typeof e?e:function(e){const t=i(e);let o=a(e);return t===o&&(o=0),Math.random()*(t-o)+o}(e)}function a(e){return"number"==typeof e?e:e.min}function i(e){return"number"==typeof e?e:e.max}new WeakMap;class r{constructor(e){this.container=e}init(e){const t=e.options.tilt;e.tilt={enable:t.enable,value:n(t.value)*Math.PI/180,sinDirection:Math.random()>=.5?1:-1,cosDirection:Math.random()>=.5?1:-1};let o=t.direction;if("random"===o){o=Math.floor(2*Math.random())>0?"counter-clockwise":"clockwise"}switch(o){case"counter-clockwise":case"counterClockwise":e.tilt.status=1;break;case"clockwise":e.tilt.status=0}const a=e.options.tilt.animation;a.enable&&(e.tilt.velocity=a.speed/360*this.container.retina.reduceFactor,a.sync||(e.tilt.velocity*=Math.random()))}isEnabled(e){const t=e.options.tilt.animation;return!e.destroyed&&!e.spawning&&t.enable}update(e,t){this.isEnabled(e)&&function(e,t){var o;if(!e.tilt)return;const n=e.options.tilt.animation,a=(null!==(o=e.tilt.velocity)&&void 0!==o?o:0)*t.factor,i=2*Math.PI;if(n.enable)switch(e.tilt.status){case 0:e.tilt.value+=a,e.tilt.value>i&&(e.tilt.value-=i);break;case 1:default:e.tilt.value-=a,e.tilt.value<0&&(e.tilt.value+=i)}}(e,t)}}async function u(e){await e.addParticleUpdater("tilt",(e=>new r(e)))}return t}()}));

package/tsparticles.updater.wobble.js

@@ -544,20 +544,20 @@
           }
         }
       }
-      externalInteract(delta) {
+      async externalInteract(delta) {
         for (const interactor of this.externalInteractors) {
           if (interactor.isEnabled()) {
-            interactor.interact(delta);
+            await interactor.interact(delta);
           }
         }
       }
-      particlesInteract(particle, delta) {
+      async particlesInteract(particle, delta) {
         for (const interactor of this.externalInteractors) {
           interactor.reset(particle);
         }
         for (const interactor of this.particleInteractors) {
           if (interactor.isEnabled(particle)) {
-            interactor.interact(particle, delta);
+            await interactor.interact(particle, delta);
           }
         }
       }
@@ -2949,10 +2949,10 @@
         }
         container.pathGenerator.init(container);
       }
-      redraw() {
+      async redraw() {
         this.clear();
         this.init();
-        this.draw({
+        await this.draw({
           value: 0,
           factor: 0
         });
@@ -2977,7 +2977,7 @@
       remove(particle, group, override) {
         this.removeAt(this.array.indexOf(particle), undefined, group, override);
       }
-      update(delta) {
+      async update(delta) {
         const container = this.container;
         const particlesToDelete = [];
         container.pathGenerator.update();
@@ -3011,23 +3011,23 @@
         for (const particle of particlesToDelete) {
           this.remove(particle);
         }
-        this.interactionManager.externalInteract(delta);
+        await this.interactionManager.externalInteract(delta);
         for (const particle of container.particles.array) {
           for (const updater of this.updaters) {
             updater.update(particle, delta);
           }
           if (!particle.destroyed && !particle.spawning) {
-            this.interactionManager.particlesInteract(particle, delta);
+            await this.interactionManager.particlesInteract(particle, delta);
           }
         }
         delete container.canvas.resizeFactor;
       }
-      draw(delta) {
+      async draw(delta) {
         const container = this.container;
         container.canvas.clear();
         const canvasSize = this.container.canvas.size;
         this.quadTree = new QuadTree(new Rectangle(-canvasSize.width / 4, -canvasSize.height / 4, canvasSize.width * 3 / 2, canvasSize.height * 3 / 2), 4);
-        this.update(delta);
+        await this.update(delta);
         if (this.needsSort) {
           this.zArray.sort(((a, b) => b.position.z - a.position.z || a.id - b.id));
           this.lastZIndex = this.zArray[this.zArray.length - 1].position.z;
@@ -3388,12 +3388,12 @@
       }
       draw(force) {
         let refreshTime = force;
-        this.drawAnimationFrame = animate()((timestamp => {
+        this.drawAnimationFrame = animate()((async timestamp => {
           if (refreshTime) {
             this.lastFrameTime = undefined;
             refreshTime = false;
           }
-          this.drawer.nextFrame(timestamp);
+          await this.drawer.nextFrame(timestamp);
         }));
       }
       getAnimationStatus() {
@@ -3403,6 +3403,7 @@
         this.setPath(noiseOrGenerator, init, update);
       }
       setPath(pathOrGenerator, init, update) {
+        var _a, _b, _c;
         if (!pathOrGenerator) {
           return;
         }
@@ -3415,15 +3416,11 @@
             this.pathGenerator.update = update;
           }
         } else {
-          if (pathOrGenerator.generate) {
-            this.pathGenerator.generate = pathOrGenerator.generate;
-          }
-          if (pathOrGenerator.init) {
-            this.pathGenerator.init = pathOrGenerator.init;
-          }
-          if (pathOrGenerator.update) {
-            this.pathGenerator.update = pathOrGenerator.update;
-          }
+          const oldGenerator = this.pathGenerator;
+          this.pathGenerator = pathOrGenerator;
+          (_a = this.pathGenerator).generate || (_a.generate = oldGenerator.generate);
+          (_b = this.pathGenerator).init || (_b.init = oldGenerator.init);
+          (_c = this.pathGenerator).update || (_c.update = oldGenerator.update);
         }
       }
       destroy() {
@@ -3637,18 +3634,7 @@
         }
         const pathOptions = this.actualOptions.particles.move.path;
         if (pathOptions.generator) {
-          const customGenerator = Container_classPrivateFieldGet(this, _Container_engine, "f").plugins.getPathGenerator(pathOptions.generator);
-          if (customGenerator) {
-            if (customGenerator.init) {
-              this.pathGenerator.init = customGenerator.init;
-            }
-            if (customGenerator.generate) {
-              this.pathGenerator.generate = customGenerator.generate;
-            }
-            if (customGenerator.update) {
-              this.pathGenerator.update = customGenerator.update;
-            }
-          }
+          this.setPath(Container_classPrivateFieldGet(this, _Container_engine, "f").plugins.getPathGenerator(pathOptions.generator));
         }
         this.particles.init();
         this.particles.setDensity();

package/tsparticles.updater.wobble.min.js

@@ -1,2 +1,2 @@
-/*! tsParticles v1.40.0 by Matteo Bruni */
+/*! tsParticles v1.41.1 by Matteo Bruni */
 !function(e,o){if("object"==typeof exports&&"object"==typeof module)module.exports=o();else if("function"==typeof define&&define.amd)define([],o);else{var n=o();for(var t in n)("object"==typeof exports?exports:e)[t]=n[t]}}(window,(function(){return function(){"use strict";var e={d:function(o,n){for(var t in n)e.o(n,t)&&!e.o(o,t)&&Object.defineProperty(o,t,{enumerable:!0,get:n[t]})},o:function(e,o){return Object.prototype.hasOwnProperty.call(e,o)},r:function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},o={};e.r(o),e.d(o,{loadWobbleUpdater:function(){return u}});class n{}n.generatedAttribute="generated",n.randomColorValue="random",n.midColorValue="mid",n.touchEndEvent="touchend",n.mouseDownEvent="mousedown",n.mouseUpEvent="mouseup",n.mouseMoveEvent="mousemove",n.touchStartEvent="touchstart",n.touchMoveEvent="touchmove",n.mouseLeaveEvent="mouseleave",n.mouseOutEvent="mouseout",n.touchCancelEvent="touchcancel",n.resizeEvent="resize",n.visibilityChangeEvent="visibilitychange",n.noPolygonDataLoaded="No polygon data loaded.",n.noPolygonFound="No polygon found, you need to specify SVG url in config.";new WeakMap;new WeakMap;new WeakMap,new WeakSet;new WeakMap;new WeakMap;new WeakMap;function t(e){return"number"==typeof e?e:function(e){const o=i(e);let n=a(e);return o===n&&(n=0),Math.random()*(o-n)+n}(e)}function a(e){return"number"==typeof e?e:e.min}function i(e){return"number"==typeof e?e:e.max}new WeakMap;class r{constructor(e){this.container=e}init(e){const o=e.options.wobble;o.enable?e.wobble={angle:Math.random()*Math.PI*2,speed:t(o.speed)/360}:e.wobble={angle:0,speed:0},e.retina.wobbleDistance=t(o.distance)*this.container.retina.pixelRatio}isEnabled(e){return!e.destroyed&&!e.spawning&&e.options.wobble.enable}update(e,o){this.isEnabled(e)&&function(e,o){var n;if(!e.options.wobble.enable||!e.wobble)return;const t=e.wobble.speed*o.factor,a=(null!==(n=e.retina.wobbleDistance)&&void 0!==n?n:0)*o.factor/(1e3/60),i=2*Math.PI;e.wobble.angle+=t,e.wobble.angle>i&&(e.wobble.angle-=i),e.position.x+=a*Math.cos(e.wobble.angle),e.position.y+=a*Math.abs(Math.sin(e.wobble.angle))}(e,o)}}async function u(e){await e.addParticleUpdater("wobble",(e=>new r(e)))}return o}()}));

package/umd/Core/Canvas.d.ts

@@ -0,0 +1,35 @@
+import type { IContainerPlugin, ICoordinates, IDelta, IDimension, IParticle, IRgb } from "./Interfaces";
+import type { Container } from "./Container";
+import type { Particle } from "./Particle";
+export declare class Canvas {
+    private readonly container;
+    element?: HTMLCanvasElement;
+    readonly size: IDimension;
+    resizeFactor?: IDimension;
+    private context;
+    private generatedCanvas;
+    private coverColor?;
+    private trailFillColor?;
+    private originalStyle?;
+    constructor(container: Container);
+    init(): void;
+    loadCanvas(canvas: HTMLCanvasElement): void;
+    destroy(): void;
+    paint(): void;
+    clear(): void;
+    windowResize(): Promise<void>;
+    resize(): void;
+    drawConnectLine(p1: IParticle, p2: IParticle): void;
+    drawGrabLine(particle: IParticle, lineColor: IRgb, opacity: number, mousePos: ICoordinates): void;
+    drawParticle(particle: Particle, delta: IDelta): void;
+    drawPlugin(plugin: IContainerPlugin, delta: IDelta): void;
+    drawParticlePlugin(plugin: IContainerPlugin, particle: Particle, delta: IDelta): void;
+    initBackground(): void;
+    draw<T>(cb: (context: CanvasRenderingContext2D) => T): T | undefined;
+    private initCover;
+    private initTrail;
+    private getPluginParticleColors;
+    private initStyle;
+    private paintBase;
+    private lineStyle;
+}

package/umd/Core/Canvas.js

@@ -0,0 +1,328 @@
+(function (factory) {
+    if (typeof module === "object" && typeof module.exports === "object") {
+        var v = factory(require, exports);
+        if (v !== undefined) module.exports = v;
+    }
+    else if (typeof define === "function" && define.amd) {
+        define(["require", "exports", "../Utils", "./Utils"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.Canvas = void 0;
+    const Utils_1 = require("../Utils");
+    const Utils_2 = require("./Utils");
+    class Canvas {
+        constructor(container) {
+            this.container = container;
+            this.size = {
+                height: 0,
+                width: 0,
+            };
+            this.context = null;
+            this.generatedCanvas = false;
+        }
+        init() {
+            this.resize();
+            this.initStyle();
+            this.initCover();
+            this.initTrail();
+            this.initBackground();
+            this.paint();
+        }
+        loadCanvas(canvas) {
+            var _a;
+            if (this.generatedCanvas) {
+                (_a = this.element) === null || _a === void 0 ? void 0 : _a.remove();
+            }
+            this.generatedCanvas =
+                canvas.dataset && Utils_2.Constants.generatedAttribute in canvas.dataset
+                    ? canvas.dataset[Utils_2.Constants.generatedAttribute] === "true"
+                    : this.generatedCanvas;
+            this.element = canvas;
+            this.originalStyle = (0, Utils_1.deepExtend)({}, this.element.style);
+            this.size.height = canvas.offsetHeight;
+            this.size.width = canvas.offsetWidth;
+            this.context = this.element.getContext("2d");
+            this.container.retina.init();
+            this.initBackground();
+        }
+        destroy() {
+            var _a;
+            if (this.generatedCanvas) {
+                (_a = this.element) === null || _a === void 0 ? void 0 : _a.remove();
+            }
+            this.draw((ctx) => {
+                (0, Utils_1.clear)(ctx, this.size);
+            });
+        }
+        paint() {
+            const options = this.container.actualOptions;
+            this.draw((ctx) => {
+                if (options.backgroundMask.enable && options.backgroundMask.cover && this.coverColor) {
+                    (0, Utils_1.clear)(ctx, this.size);
+                    this.paintBase((0, Utils_1.getStyleFromRgb)(this.coverColor, this.coverColor.a));
+                }
+                else {
+                    this.paintBase();
+                }
+            });
+        }
+        clear() {
+            const options = this.container.actualOptions;
+            const trail = options.particles.move.trail;
+            if (options.backgroundMask.enable) {
+                this.paint();
+            }
+            else if (trail.enable && trail.length > 0 && this.trailFillColor) {
+                this.paintBase((0, Utils_1.getStyleFromRgb)(this.trailFillColor, 1 / trail.length));
+            }
+            else {
+                this.draw((ctx) => {
+                    (0, Utils_1.clear)(ctx, this.size);
+                });
+            }
+        }
+        async windowResize() {
+            if (!this.element) {
+                return;
+            }
+            const container = this.container;
+            this.resize();
+            const needsRefresh = container.updateActualOptions();
+            container.particles.setDensity();
+            for (const [, plugin] of container.plugins) {
+                if (plugin.resize !== undefined) {
+                    plugin.resize();
+                }
+            }
+            if (needsRefresh) {
+                await container.refresh();
+            }
+        }
+        resize() {
+            if (!this.element) {
+                return;
+            }
+            const container = this.container;
+            const pxRatio = container.retina.pixelRatio;
+            const size = container.canvas.size;
+            const oldSize = {
+                width: size.width,
+                height: size.height,
+            };
+            size.width = this.element.offsetWidth * pxRatio;
+            size.height = this.element.offsetHeight * pxRatio;
+            this.element.width = size.width;
+            this.element.height = size.height;
+            if (this.container.started) {
+                this.resizeFactor = {
+                    width: size.width / oldSize.width,
+                    height: size.height / oldSize.height,
+                };
+            }
+        }
+        drawConnectLine(p1, p2) {
+            this.draw((ctx) => {
+                var _a;
+                const lineStyle = this.lineStyle(p1, p2);
+                if (!lineStyle) {
+                    return;
+                }
+                const pos1 = p1.getPosition();
+                const pos2 = p2.getPosition();
+                (0, Utils_1.drawConnectLine)(ctx, (_a = p1.retina.linksWidth) !== null && _a !== void 0 ? _a : this.container.retina.linksWidth, lineStyle, pos1, pos2);
+            });
+        }
+        drawGrabLine(particle, lineColor, opacity, mousePos) {
+            const container = this.container;
+            this.draw((ctx) => {
+                var _a;
+                const beginPos = particle.getPosition();
+                (0, Utils_1.drawGrabLine)(ctx, (_a = particle.retina.linksWidth) !== null && _a !== void 0 ? _a : container.retina.linksWidth, beginPos, mousePos, lineColor, opacity);
+            });
+        }
+        drawParticle(particle, delta) {
+            var _a, _b, _c, _d, _e, _f;
+            if (particle.spawning || particle.destroyed) {
+                return;
+            }
+            const pfColor = particle.getFillColor();
+            const psColor = (_a = particle.getStrokeColor()) !== null && _a !== void 0 ? _a : pfColor;
+            if (!pfColor && !psColor) {
+                return;
+            }
+            let [fColor, sColor] = this.getPluginParticleColors(particle);
+            const pOptions = particle.options;
+            const twinkle = pOptions.twinkle.particles;
+            const twinkling = twinkle.enable && Math.random() < twinkle.frequency;
+            if (!fColor || !sColor) {
+                const twinkleRgb = (0, Utils_1.colorToHsl)(twinkle.color);
+                if (!fColor) {
+                    fColor = twinkling && twinkleRgb !== undefined ? twinkleRgb : pfColor ? pfColor : undefined;
+                }
+                if (!sColor) {
+                    sColor = twinkling && twinkleRgb !== undefined ? twinkleRgb : psColor ? psColor : undefined;
+                }
+            }
+            const options = this.container.actualOptions;
+            const zIndexOptions = particle.options.zIndex;
+            const zOpacityFactor = (1 - particle.zIndexFactor) ** zIndexOptions.opacityRate;
+            const radius = particle.getRadius();
+            const opacity = twinkling ? twinkle.opacity : (_d = (_b = particle.bubble.opacity) !== null && _b !== void 0 ? _b : (_c = particle.opacity) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : 1;
+            const strokeOpacity = (_f = (_e = particle.stroke) === null || _e === void 0 ? void 0 : _e.opacity) !== null && _f !== void 0 ? _f : opacity;
+            const zOpacity = opacity * zOpacityFactor;
+            const fillColorValue = fColor ? (0, Utils_1.getStyleFromHsl)(fColor, zOpacity) : undefined;
+            if (!fillColorValue && !sColor) {
+                return;
+            }
+            this.draw((ctx) => {
+                const zSizeFactor = (1 - particle.zIndexFactor) ** zIndexOptions.sizeRate;
+                const zStrokeOpacity = strokeOpacity * zOpacityFactor;
+                const strokeColorValue = sColor ? (0, Utils_1.getStyleFromHsl)(sColor, zStrokeOpacity) : fillColorValue;
+                if (radius <= 0) {
+                    return;
+                }
+                const container = this.container;
+                for (const updater of container.particles.updaters) {
+                    if (updater.beforeDraw) {
+                        updater.beforeDraw(particle);
+                    }
+                }
+                (0, Utils_1.drawParticle)(this.container, ctx, particle, delta, fillColorValue, strokeColorValue, options.backgroundMask.enable, options.backgroundMask.composite, radius * zSizeFactor, zOpacity, particle.options.shadow, particle.gradient);
+                for (const updater of container.particles.updaters) {
+                    if (updater.afterDraw) {
+                        updater.afterDraw(particle);
+                    }
+                }
+            });
+        }
+        drawPlugin(plugin, delta) {
+            this.draw((ctx) => {
+                (0, Utils_1.drawPlugin)(ctx, plugin, delta);
+            });
+        }
+        drawParticlePlugin(plugin, particle, delta) {
+            this.draw((ctx) => {
+                (0, Utils_1.drawParticlePlugin)(ctx, plugin, particle, delta);
+            });
+        }
+        initBackground() {
+            const options = this.container.actualOptions;
+            const background = options.background;
+            const element = this.element;
+            const elementStyle = element === null || element === void 0 ? void 0 : element.style;
+            if (!elementStyle) {
+                return;
+            }
+            if (background.color) {
+                const color = (0, Utils_1.colorToRgb)(background.color);
+                elementStyle.backgroundColor = color ? (0, Utils_1.getStyleFromRgb)(color, background.opacity) : "";
+            }
+            else {
+                elementStyle.backgroundColor = "";
+            }
+            elementStyle.backgroundImage = background.image || "";
+            elementStyle.backgroundPosition = background.position || "";
+            elementStyle.backgroundRepeat = background.repeat || "";
+            elementStyle.backgroundSize = background.size || "";
+        }
+        draw(cb) {
+            if (!this.context) {
+                return;
+            }
+            return cb(this.context);
+        }
+        initCover() {
+            const options = this.container.actualOptions;
+            const cover = options.backgroundMask.cover;
+            const color = cover.color;
+            const coverRgb = (0, Utils_1.colorToRgb)(color);
+            if (coverRgb) {
+                this.coverColor = {
+                    r: coverRgb.r,
+                    g: coverRgb.g,
+                    b: coverRgb.b,
+                    a: cover.opacity,
+                };
+            }
+        }
+        initTrail() {
+            const options = this.container.actualOptions;
+            const trail = options.particles.move.trail;
+            const fillColor = (0, Utils_1.colorToRgb)(trail.fillColor);
+            if (fillColor) {
+                const trail = options.particles.move.trail;
+                this.trailFillColor = {
+                    r: fillColor.r,
+                    g: fillColor.g,
+                    b: fillColor.b,
+                    a: 1 / trail.length,
+                };
+            }
+        }
+        getPluginParticleColors(particle) {
+            let fColor;
+            let sColor;
+            for (const [, plugin] of this.container.plugins) {
+                if (!fColor && plugin.particleFillColor) {
+                    fColor = (0, Utils_1.colorToHsl)(plugin.particleFillColor(particle));
+                }
+                if (!sColor && plugin.particleStrokeColor) {
+                    sColor = (0, Utils_1.colorToHsl)(plugin.particleStrokeColor(particle));
+                }
+                if (fColor && sColor) {
+                    break;
+                }
+            }
+            return [fColor, sColor];
+        }
+        initStyle() {
+            const element = this.element, options = this.container.actualOptions;
+            if (!element) {
+                return;
+            }
+            const originalStyle = this.originalStyle;
+            if (options.fullScreen.enable) {
+                this.originalStyle = (0, Utils_1.deepExtend)({}, element.style);
+                element.style.setProperty("position", "fixed", "important");
+                element.style.setProperty("z-index", options.fullScreen.zIndex.toString(10), "important");
+                element.style.setProperty("top", "0", "important");
+                element.style.setProperty("left", "0", "important");
+                element.style.setProperty("width", "100%", "important");
+                element.style.setProperty("height", "100%", "important");
+            }
+            else if (originalStyle) {
+                element.style.position = originalStyle.position;
+                element.style.zIndex = originalStyle.zIndex;
+                element.style.top = originalStyle.top;
+                element.style.left = originalStyle.left;
+                element.style.width = originalStyle.width;
+                element.style.height = originalStyle.height;
+            }
+            for (const key in options.style) {
+                if (!key || !options.style) {
+                    continue;
+                }
+                const value = options.style[key];
+                if (!value) {
+                    continue;
+                }
+                element.style.setProperty(key, value, "important");
+            }
+        }
+        paintBase(baseColor) {
+            this.draw((ctx) => {
+                (0, Utils_1.paintBase)(ctx, this.size, baseColor);
+            });
+        }
+        lineStyle(p1, p2) {
+            return this.draw((ctx) => {
+                const options = this.container.actualOptions;
+                const connectOptions = options.interactivity.modes.connect;
+                return (0, Utils_1.gradient)(ctx, p1, p2, connectOptions.links.opacity);
+            });
+        }
+    }
+    exports.Canvas = Canvas;
+});