tsparticles 1.40.2 → 1.41.3

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;
+});

package/umd/Core/Container.d.ts

@@ -0,0 +1,68 @@
+import { FrameManager, Vector } from "./Utils";
+import type { IAttract, IBubble, IContainerInteractivity, IContainerPlugin, IMovePathGenerator, IRepulse, IShapeDrawer } from "./Interfaces";
+import { Canvas } from "./Canvas";
+import type { Engine } from "../engine";
+import type { IOptions } from "../Options/Interfaces/IOptions";
+import { Options } from "../Options/Classes/Options";
+import { Particle } from "./Particle";
+import { Particles } from "./Particles";
+import type { RecursivePartial } from "../Types";
+import { Retina } from "./Retina";
+export declare class Container {
+    #private;
+    readonly id: string;
+    started: boolean;
+    destroyed: boolean;
+    density: number;
+    duration: number;
+    pageHidden: boolean;
+    lastFrameTime?: number;
+    lifeTime: number;
+    fpsLimit: number;
+    interactivity: IContainerInteractivity;
+    bubble: IBubble;
+    repulse: IRepulse;
+    attract: IAttract;
+    zLayers: number;
+    responsiveMaxWidth?: number;
+    get options(): Options;
+    get sourceOptions(): RecursivePartial<IOptions> | undefined;
+    actualOptions: Options;
+    readonly retina: Retina;
+    readonly canvas: Canvas;
+    readonly particles: Particles;
+    readonly drawer: FrameManager;
+    readonly drawers: Map<string, IShapeDrawer>;
+    readonly plugins: Map<string, IContainerPlugin>;
+    pathGenerator: IMovePathGenerator;
+    private _options;
+    private _sourceOptions;
+    private readonly _initialSourceOptions;
+    private paused;
+    private firstStart;
+    private currentTheme?;
+    private drawAnimationFrame?;
+    private readonly presets;
+    private readonly eventListeners;
+    private readonly intersectionObserver?;
+    constructor(engine: Engine, id: string, sourceOptions?: RecursivePartial<IOptions>, ...presets: string[]);
+    play(force?: boolean): void;
+    pause(): void;
+    draw(force: boolean): void;
+    getAnimationStatus(): boolean;
+    setNoise(noiseOrGenerator?: IMovePathGenerator | ((particle: Particle) => Vector), init?: () => void, update?: () => void): void;
+    setPath(pathOrGenerator?: IMovePathGenerator | ((particle: Particle) => Vector), init?: () => void, update?: () => void): void;
+    destroy(): void;
+    exportImg(callback: BlobCallback): void;
+    exportImage(callback: BlobCallback, type?: string, quality?: number): void;
+    exportConfiguration(): string;
+    refresh(): Promise<void>;
+    reset(): Promise<void>;
+    stop(): void;
+    loadTheme(name?: string): Promise<void>;
+    start(): Promise<void>;
+    addClickHandler(callback: (evt: Event, particles?: Particle[]) => void): void;
+    updateActualOptions(): boolean;
+    init(): Promise<void>;
+    private intersectionManager;
+}