tsparticles 1.42.2 → 1.43.0

package/browser/index.js

@@ -1,17 +1,121 @@
 import { Engine } from "./engine";
 import { initPjs } from "./pjs";
 import { loadFull } from "./full";
+/**
+ * The exposed tsParticles instance
+ */
 const tsParticles = new Engine();
 tsParticles.init();
-const { particlesJS, pJSDom } = initPjs(tsParticles);
+const { 
+/**
+ * The particles.js compatibility instance
+ */
+particlesJS, 
+/**
+ * The particles.js compatibility dom array
+ */
+pJSDom, } = initPjs(tsParticles);
 loadFull(tsParticles);
-export * from "./Core";
+export * from "./Core/Interfaces/Colors";
+export * from "./Core/Interfaces/Gradients";
+export * from "./Core/Interfaces/IBounds";
+export * from "./Core/Interfaces/IBubbleParticleData";
+export * from "./Core/Interfaces/ICircleBouncer";
+export * from "./Core/Interfaces/IContainerInteractivity";
+export * from "./Core/Interfaces/IContainerPlugin";
+export * from "./Core/Interfaces/ICoordinates";
+export * from "./Core/Interfaces/IDelta";
+export * from "./Core/Interfaces/IDimension";
+export * from "./Core/Interfaces/IDistance";
+export * from "./Core/Interfaces/IExternalInteractor";
+export * from "./Core/Interfaces/IInteractor";
+export * from "./Core/Interfaces/IMouseData";
+export * from "./Core/Interfaces/IMovePathGenerator";
+export * from "./Core/Interfaces/IParticle";
+export * from "./Core/Interfaces/IParticleColorStyle";
+export * from "./Core/Interfaces/IParticleGravity";
+export * from "./Core/Interfaces/IParticleHslAnimation";
+export * from "./Core/Interfaces/IParticlesInteractor";
+export * from "./Core/Interfaces/IParticleLife";
+export * from "./Core/Interfaces/IParticleLoops";
+export * from "./Core/Interfaces/IParticleRetinaProps";
+export * from "./Core/Interfaces/IParticleRoll";
+export * from "./Core/Interfaces/IParticleSpin";
+export * from "./Core/Interfaces/IParticleUpdater";
+export * from "./Core/Interfaces/IParticleValueAnimation";
+export * from "./Core/Interfaces/IParticleWobble";
+export * from "./Core/Interfaces/IParticlesMover";
+export * from "./Core/Interfaces/IPlugin";
+export * from "./Core/Interfaces/IRangeValue";
+export * from "./Core/Interfaces/IRectSideResult";
+export * from "./Core/Interfaces/IShapeDrawer";
+export * from "./Core/Interfaces/IShapeValues";
+export * from "./Core/Utils/Circle";
+export * from "./Core/Utils/CircleWarp";
+export * from "./Core/Utils/Constants";
+export * from "./Core/Utils/EventListeners";
+export * from "./Core/Utils/ExternalInteractorBase";
+export * from "./Core/Utils/FrameManager";
+export * from "./Core/Utils/InteractionManager";
+export * from "./Core/Utils/ParticlesInteractorBase";
+export * from "./Core/Utils/Plugins";
+export * from "./Core/Utils/Point";
+export * from "./Core/Utils/QuadTree";
+export * from "./Core/Utils/Range";
+export * from "./Core/Utils/Rectangle";
+export * from "./Core/Utils/Vector";
+export * from "./Core/Utils/Vector3d";
+export * from "./Core/Canvas";
 export * from "./Core/Container";
-export * from "./Enums";
-export * from "./Plugins/Absorbers/Enums";
-export * from "./Plugins/Emitters/Enums";
-export * from "./Plugins/PolygonMask/Enums";
+export * from "./Core/Loader";
+export * from "./Core/Particle";
+export * from "./Core/Particles";
+export * from "./Core/Retina";
+export * from "./Enums/Directions/MoveDirection";
+export * from "./Enums/Directions/RotateDirection";
+export * from "./Enums/Directions/OutModeDirection";
+export * from "./Enums/Directions/TiltDirection";
+export * from "./Enums/Modes/ClickMode";
+export * from "./Enums/Modes/DestroyMode";
+export * from "./Enums/Modes/DivMode";
+export * from "./Enums/Modes/HoverMode";
+export * from "./Enums/Modes/CollisionMode";
+export * from "./Enums/Modes/OutMode";
+export * from "./Enums/Modes/RollMode";
+export * from "./Enums/Modes/SizeMode";
+export * from "./Enums/Modes/ThemeMode";
+export * from "./Enums/Modes/ResponsiveMode";
+export * from "./Enums/Types/AlterType";
+export * from "./Enums/Types/DestroyType";
+export * from "./Enums/Types/GradientType";
+export * from "./Enums/Types/InteractorType";
+export * from "./Enums/Types/ShapeType";
+export * from "./Enums/Types/StartValueType";
+export * from "./Enums/Types/DivType";
+export * from "./Enums/Types/EasingType";
+export * from "./Enums/AnimationStatus";
+export * from "./Enums/InteractivityDetect";
 export { Engine, Engine as Main };
-export * from "./Utils";
-export * from "./Types";
+export * from "./Options/Classes/Options";
+export * from "./Options/Classes/OptionsColor";
+export * from "./Options/Interfaces/IOptionLoader";
+export * from "./Types/RangeValue";
+export * from "./Types/RecursivePartial";
+export * from "./Types/ShapeData";
+export * from "./Types/ShapeDrawerFunctions";
+export * from "./Types/SingleOrMultiple";
+export * from "./Types/PathOptions";
+export * from "./Utils/CanvasUtils";
+export * from "./Utils/ColorUtils";
+export * from "./Utils/NumberUtils";
+export * from "./Utils/Utils";
+export { loadAbsorbersPlugin } from "./Plugins/Absorbers";
+export * from "./Plugins/Absorbers/Enums/AbsorberClickMode";
+export { loadEmittersPlugin } from "./Plugins/Emitters";
+export * from "./Plugins/Emitters/Enums/EmitterClickMode";
+export * from "./Plugins/Emitters/Enums/EmitterShapeType";
+export { loadPolygonMaskPlugin } from "./Plugins/PolygonMask";
+export * from "./Plugins/PolygonMask/Enums/PolygonMaskInlineArrangement";
+export * from "./Plugins/PolygonMask/Enums/PolygonMaskMoveType";
+export * from "./Plugins/PolygonMask/Enums/PolygonMaskType";
 export { particlesJS, pJSDom, tsParticles };

package/browser/index.slim.js

@@ -1,15 +1,112 @@
 import { Engine } from "./engine";
 import { initPjs } from "./pjs";
 import { loadSlim } from "./slim";
-/* ---------- tsParticles functions - start ------------ */
+/**
+ * The exposed tsParticles instance
+ */
 const tsParticles = new Engine();
 tsParticles.init();
-const { particlesJS, pJSDom } = initPjs(tsParticles);
+const { 
+/**
+ * The particles.js compatibility instance
+ */
+particlesJS, 
+/**
+ * The particles.js compatibility dom array
+ */
+pJSDom, } = initPjs(tsParticles);
 loadSlim(tsParticles);
-export * from "./Core";
+export * from "./Core/Interfaces/Colors";
+export * from "./Core/Interfaces/Gradients";
+export * from "./Core/Interfaces/IBounds";
+export * from "./Core/Interfaces/IBubbleParticleData";
+export * from "./Core/Interfaces/ICircleBouncer";
+export * from "./Core/Interfaces/IContainerInteractivity";
+export * from "./Core/Interfaces/IContainerPlugin";
+export * from "./Core/Interfaces/ICoordinates";
+export * from "./Core/Interfaces/IDelta";
+export * from "./Core/Interfaces/IDimension";
+export * from "./Core/Interfaces/IDistance";
+export * from "./Core/Interfaces/IExternalInteractor";
+export * from "./Core/Interfaces/IInteractor";
+export * from "./Core/Interfaces/IMouseData";
+export * from "./Core/Interfaces/IMovePathGenerator";
+export * from "./Core/Interfaces/IParticle";
+export * from "./Core/Interfaces/IParticleColorStyle";
+export * from "./Core/Interfaces/IParticleGravity";
+export * from "./Core/Interfaces/IParticleHslAnimation";
+export * from "./Core/Interfaces/IParticlesInteractor";
+export * from "./Core/Interfaces/IParticleLife";
+export * from "./Core/Interfaces/IParticleLoops";
+export * from "./Core/Interfaces/IParticleRetinaProps";
+export * from "./Core/Interfaces/IParticleRoll";
+export * from "./Core/Interfaces/IParticleSpin";
+export * from "./Core/Interfaces/IParticleUpdater";
+export * from "./Core/Interfaces/IParticleValueAnimation";
+export * from "./Core/Interfaces/IParticleWobble";
+export * from "./Core/Interfaces/IParticlesMover";
+export * from "./Core/Interfaces/IPlugin";
+export * from "./Core/Interfaces/IRangeValue";
+export * from "./Core/Interfaces/IRectSideResult";
+export * from "./Core/Interfaces/IShapeDrawer";
+export * from "./Core/Interfaces/IShapeValues";
+export * from "./Core/Utils/Circle";
+export * from "./Core/Utils/CircleWarp";
+export * from "./Core/Utils/Constants";
+export * from "./Core/Utils/EventListeners";
+export * from "./Core/Utils/ExternalInteractorBase";
+export * from "./Core/Utils/FrameManager";
+export * from "./Core/Utils/InteractionManager";
+export * from "./Core/Utils/ParticlesInteractorBase";
+export * from "./Core/Utils/Plugins";
+export * from "./Core/Utils/Point";
+export * from "./Core/Utils/QuadTree";
+export * from "./Core/Utils/Range";
+export * from "./Core/Utils/Rectangle";
+export * from "./Core/Utils/Vector";
+export * from "./Core/Utils/Vector3d";
+export * from "./Core/Canvas";
 export * from "./Core/Container";
-export * from "./Enums";
+export * from "./Core/Loader";
+export * from "./Core/Particle";
+export * from "./Core/Particles";
+export * from "./Core/Retina";
+export * from "./Enums/Directions/MoveDirection";
+export * from "./Enums/Directions/RotateDirection";
+export * from "./Enums/Directions/OutModeDirection";
+export * from "./Enums/Directions/TiltDirection";
+export * from "./Enums/Modes/ClickMode";
+export * from "./Enums/Modes/DestroyMode";
+export * from "./Enums/Modes/DivMode";
+export * from "./Enums/Modes/HoverMode";
+export * from "./Enums/Modes/CollisionMode";
+export * from "./Enums/Modes/OutMode";
+export * from "./Enums/Modes/RollMode";
+export * from "./Enums/Modes/SizeMode";
+export * from "./Enums/Modes/ThemeMode";
+export * from "./Enums/Modes/ResponsiveMode";
+export * from "./Enums/Types/AlterType";
+export * from "./Enums/Types/DestroyType";
+export * from "./Enums/Types/GradientType";
+export * from "./Enums/Types/InteractorType";
+export * from "./Enums/Types/ShapeType";
+export * from "./Enums/Types/StartValueType";
+export * from "./Enums/Types/DivType";
+export * from "./Enums/Types/EasingType";
+export * from "./Enums/AnimationStatus";
+export * from "./Enums/InteractivityDetect";
 export { Engine, Engine as Main };
-export * from "./Utils";
-export * from "./Types";
+export * from "./Options/Classes/Options";
+export * from "./Options/Classes/OptionsColor";
+export * from "./Options/Interfaces/IOptionLoader";
+export * from "./Types/RangeValue";
+export * from "./Types/RecursivePartial";
+export * from "./Types/ShapeData";
+export * from "./Types/ShapeDrawerFunctions";
+export * from "./Types/SingleOrMultiple";
+export * from "./Types/PathOptions";
+export * from "./Utils/CanvasUtils";
+export * from "./Utils/ColorUtils";
+export * from "./Utils/NumberUtils";
+export * from "./Utils/Utils";
 export { tsParticles, particlesJS, pJSDom };

package/browser/pjs.js

@@ -1,3 +1,7 @@
+/**
+ * Initializes particles.js compatibility to the given engine
+ * @param engine the engine that requires particles.js compatibility
+ */
 const initPjs = (engine) => {
     /**
      * Loads the provided options to create a [[Container]] object.
@@ -29,7 +33,7 @@ const initPjs = (engine) => {
         });
     };
     /**
-     * Adds an additional click handler to all the loaded [[Container]] objects.
+     * Adds a click handler to all the loaded [[Container]] objects.
      * @deprecated this method is obsolete, please use the new tsParticles.setOnClickHandler
      * @param callback the function called after the click event is fired
      */
@@ -38,7 +42,7 @@ const initPjs = (engine) => {
     };
     /**
      * All the [[Container]] objects loaded
-     * @deprecated this method is obsolete, please use the new tsParticles.dom
+     * @deprecated this method is obsolete, please use the new [[tsParticles.dom]]
      */
     const pJSDom = engine.dom();
     return { particlesJS, pJSDom };

package/browser/slim.js

@@ -1,4 +1,5 @@
 import { loadAngleUpdater } from "./Updaters/Angle";
+import { loadBaseMover } from "./Movers/Base";
 import { loadCircleShape } from "./Shapes/Circle";
 import { loadColorUpdater } from "./Updaters/Color";
 import { loadExternalAttractInteraction } from "./Interactions/External/Attract";
@@ -6,12 +7,16 @@ import { loadExternalBounceInteraction } from "./Interactions/External/Bounce";
 import { loadExternalBubbleInteraction } from "./Interactions/External/Bubble";
 import { loadExternalConnectInteraction } from "./Interactions/External/Connect";
 import { loadExternalGrabInteraction } from "./Interactions/External/Grab";
+import { loadExternalPauseInteraction } from "./Interactions/External/Pause";
+import { loadExternalPushInteraction } from "./Interactions/External/Push";
+import { loadExternalRemoveInteraction } from "./Interactions/External/Remove";
 import { loadExternalRepulseInteraction } from "./Interactions/External/Repulse";
 import { loadImageShape } from "./Shapes/Image";
 import { loadLifeUpdater } from "./Updaters/Life";
 import { loadLineShape } from "./Shapes/Line";
 import { loadOpacityUpdater } from "./Updaters/Opacity";
 import { loadOutModesUpdater } from "./Updaters/OutModes";
+import { loadParallaxMover } from "./Movers/Parallax";
 import { loadParticlesAttractInteraction } from "./Interactions/Particles/Attract";
 import { loadParticlesCollisionsInteraction } from "./Interactions/Particles/Collisions";
 import { loadParticlesLinksInteraction } from "./Interactions/Particles/Links";
@@ -21,12 +26,21 @@ import { loadSquareShape } from "./Shapes/Square";
 import { loadStarShape } from "./Shapes/Star";
 import { loadStrokeColorUpdater } from "./Updaters/StrokeColor";
 import { loadTextShape } from "./Shapes/Text";
+/**
+ * Loads the slim tsParticles instance, containing only default tsParticles plugins for a lighter version
+ * @param engine the engine used to load all plugins
+ */
 export async function loadSlim(engine) {
+    await loadBaseMover(engine);
+    await loadParallaxMover(engine);
     await loadExternalAttractInteraction(engine);
     await loadExternalBounceInteraction(engine);
     await loadExternalBubbleInteraction(engine);
     await loadExternalConnectInteraction(engine);
     await loadExternalGrabInteraction(engine);
+    await loadExternalPauseInteraction(engine);
+    await loadExternalPushInteraction(engine);
+    await loadExternalRemoveInteraction(engine);
     await loadExternalRepulseInteraction(engine);
     await loadParticlesAttractInteraction(engine);
     await loadParticlesCollisionsInteraction(engine);

package/cjs/Core/Canvas.js

@@ -0,0 +1,306 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Canvas = void 0;
+const CanvasUtils_1 = require("../Utils/CanvasUtils");
+const ColorUtils_1 = require("../Utils/ColorUtils");
+const Constants_1 = require("./Utils/Constants");
+const Utils_1 = require("../Utils/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 && Constants_1.Constants.generatedAttribute in canvas.dataset
+                ? canvas.dataset[Constants_1.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, CanvasUtils_1.clear)(ctx, this.size);
+        });
+    }
+    paint() {
+        const options = this.container.actualOptions;
+        this.draw((ctx) => {
+            if (options.backgroundMask.enable && options.backgroundMask.cover) {
+                (0, CanvasUtils_1.clear)(ctx, this.size);
+                this.paintBase(this.coverColorStyle);
+            }
+            else {
+                this.paintBase();
+            }
+        });
+    }
+    clear() {
+        const options = this.container.actualOptions, trail = options.particles.move.trail;
+        if (options.backgroundMask.enable) {
+            this.paint();
+        }
+        else if (trail.enable && trail.length > 0 && this.trailFillColor) {
+            this.paintBase((0, ColorUtils_1.getStyleFromRgb)(this.trailFillColor, 1 / trail.length));
+        }
+        else {
+            this.draw((ctx) => {
+                (0, CanvasUtils_1.clear)(ctx, this.size);
+            });
+        }
+    }
+    async windowResize() {
+        if (!this.element) {
+            return;
+        }
+        this.resize();
+        const container = this.container, 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, pxRatio = container.retina.pixelRatio, size = container.canvas.size, newSize = {
+            width: this.element.offsetWidth * pxRatio,
+            height: this.element.offsetHeight * pxRatio,
+        };
+        if (newSize.height === size.height &&
+            newSize.width === size.width &&
+            newSize.height === this.element.height &&
+            newSize.width === this.element.width) {
+            return;
+        }
+        const oldSize = Object.assign({}, size);
+        this.element.width = size.width = this.element.offsetWidth * pxRatio;
+        this.element.height = size.height = this.element.offsetHeight * pxRatio;
+        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(), pos2 = p2.getPosition();
+            (0, CanvasUtils_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, CanvasUtils_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 radius = particle.getRadius();
+        if (radius <= 0) {
+            return;
+        }
+        const pfColor = particle.getFillColor(), psColor = (_a = particle.getStrokeColor()) !== null && _a !== void 0 ? _a : pfColor;
+        if (!pfColor && !psColor) {
+            return;
+        }
+        let [fColor, sColor] = this.getPluginParticleColors(particle);
+        if (!fColor || !sColor) {
+            if (!fColor) {
+                fColor = pfColor ? pfColor : undefined;
+            }
+            if (!sColor) {
+                sColor = psColor ? psColor : undefined;
+            }
+        }
+        const options = this.container.actualOptions, zIndexOptions = particle.options.zIndex, zOpacityFactor = (1 - particle.zIndexFactor) ** zIndexOptions.opacityRate, 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, strokeOpacity = (_f = (_e = particle.stroke) === null || _e === void 0 ? void 0 : _e.opacity) !== null && _f !== void 0 ? _f : opacity, zOpacity = opacity * zOpacityFactor, zStrokeOpacity = strokeOpacity * zOpacityFactor;
+        const colorStyles = {
+            fill: fColor ? (0, ColorUtils_1.getStyleFromHsl)(fColor, zOpacity) : undefined,
+        };
+        colorStyles.stroke = sColor ? (0, ColorUtils_1.getStyleFromHsl)(sColor, zStrokeOpacity) : colorStyles.fill;
+        this.draw((ctx) => {
+            const zSizeFactor = (1 - particle.zIndexFactor) ** zIndexOptions.sizeRate, container = this.container;
+            for (const updater of container.particles.updaters) {
+                if (updater.beforeDraw) {
+                    updater.beforeDraw(particle);
+                }
+                if (updater.getColorStyles) {
+                    const { fill, stroke } = updater.getColorStyles(particle, ctx, radius, zOpacity);
+                    if (fill) {
+                        colorStyles.fill = fill;
+                    }
+                    if (stroke) {
+                        colorStyles.stroke = stroke;
+                    }
+                }
+            }
+            (0, CanvasUtils_1.drawParticle)(container, ctx, particle, delta, colorStyles, options.backgroundMask.enable, options.backgroundMask.composite, radius * zSizeFactor, zOpacity, particle.options.shadow);
+            for (const updater of container.particles.updaters) {
+                if (updater.afterDraw) {
+                    updater.afterDraw(particle);
+                }
+            }
+        });
+    }
+    drawPlugin(plugin, delta) {
+        this.draw((ctx) => {
+            (0, CanvasUtils_1.drawPlugin)(ctx, plugin, delta);
+        });
+    }
+    drawParticlePlugin(plugin, particle, delta) {
+        this.draw((ctx) => {
+            (0, CanvasUtils_1.drawParticlePlugin)(ctx, plugin, particle, delta);
+        });
+    }
+    initBackground() {
+        const options = this.container.actualOptions, background = options.background, element = this.element, elementStyle = element === null || element === void 0 ? void 0 : element.style;
+        if (!elementStyle) {
+            return;
+        }
+        if (background.color) {
+            const color = (0, ColorUtils_1.colorToRgb)(background.color);
+            elementStyle.backgroundColor = color ? (0, ColorUtils_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, cover = options.backgroundMask.cover, color = cover.color, coverRgb = (0, ColorUtils_1.colorToRgb)(color);
+        if (coverRgb) {
+            const coverColor = {
+                r: coverRgb.r,
+                g: coverRgb.g,
+                b: coverRgb.b,
+                a: cover.opacity,
+            };
+            this.coverColorStyle = (0, ColorUtils_1.getStyleFromRgb)(coverColor, coverColor.a);
+        }
+    }
+    initTrail() {
+        const options = this.container.actualOptions, trail = options.particles.move.trail, fillColor = (0, ColorUtils_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, sColor;
+        for (const [, plugin] of this.container.plugins) {
+            if (!fColor && plugin.particleFillColor) {
+                fColor = (0, ColorUtils_1.colorToHsl)(plugin.particleFillColor(particle));
+            }
+            if (!sColor && plugin.particleStrokeColor) {
+                sColor = (0, ColorUtils_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, CanvasUtils_1.paintBase)(ctx, this.size, baseColor);
+        });
+    }
+    lineStyle(p1, p2) {
+        return this.draw((ctx) => {
+            const options = this.container.actualOptions, connectOptions = options.interactivity.modes.connect;
+            return (0, CanvasUtils_1.gradient)(ctx, p1, p2, connectOptions.links.opacity);
+        });
+    }
+}
+exports.Canvas = Canvas;