tsparticles 1.37.4 → 1.39.0

package/browser/Plugins/PolygonMask/pathseg.js

@@ -1,6 +1,5 @@
 "use strict";
 // SVGPathSeg API polyfill
-// https://github.com/progers/pathseg
 //
 // This is a drop-in replacement for the SVGPathSeg and SVGPathSegList APIs that were removed from
 // SVG2 (https://lists.w3.org/Archives/Public/www-svg/2015Jun/0044.html), including the latest spec
@@ -1049,9 +1048,9 @@
                 window.SVGPathElement.prototype.getPathSegAtLength = function (distance) {
                     if (distance === undefined || !isFinite(distance))
                         throw "Invalid arguments.";
-                    var measurementElement = document.createElementNS("http://www.w3.org/2000/svg", "path");
+                    const measurementElement = document.createElementNS("http://www.w3.org/2000/svg", "path");
                     measurementElement.setAttribute("d", this.getAttribute("d"));
-                    var lastPathSegment = measurementElement.pathSegList.numberOfItems - 1;
+                    let lastPathSegment = measurementElement.pathSegList.numberOfItems - 1;
                     // If the path is empty, return 0.
                     if (lastPathSegment <= 0)
                         return 0;
@@ -1134,7 +1133,7 @@
             window.SVGPathSegList.prototype._updateListFromPathMutations = function (mutationRecords) {
                 if (!this._pathElement)
                     return;
-                var hasPathMutations = false;
+                let hasPathMutations = false;
                 mutationRecords.forEach(function (record) {
                     if (record.attributeName == "d")
                         hasPathMutations = true;
@@ -1205,7 +1204,7 @@
             window.SVGPathSegList.prototype.removeItem = function (index) {
                 this._checkPathSynchronizedToList();
                 this._checkValidIndex(index);
-                var item = this._list[index];
+                const item = this._list[index];
                 this._list.splice(index, 1);
                 this._writeListToPath();
                 return item;
@@ -1223,8 +1222,8 @@
                 return newItem;
             };
             window.SVGPathSegList._pathSegArrayAsString = function (pathSegArray) {
-                var string = "";
-                var first = true;
+                let string = "";
+                let first = true;
                 pathSegArray.forEach(function (pathSeg) {
                     if (first) {
                         first = false;
@@ -1240,14 +1239,14 @@
             window.SVGPathSegList.prototype._parsePath = function (string) {
                 if (!string || string.length == 0)
                     return [];
-                var owningPathSegList = this;
-                var Builder = function () {
+                const owningPathSegList = this;
+                const Builder = function () {
                     this.pathSegList = [];
                 };
                 Builder.prototype.appendSegment = function (pathSeg) {
                     this.pathSegList.push(pathSeg);
                 };
-                var Source = function (string) {
+                const Source = function (string) {
                     this._string = string;
                     this._currentIndex = 0;
                     this._endIndex = this._string.length;
@@ -1255,9 +1254,13 @@
                     this._skipOptionalSpaces();
                 };
                 Source.prototype._isCurrentSpace = function () {
-                    var character = this._string[this._currentIndex];
+                    const character = this._string[this._currentIndex];
                     return (character <= " " &&
-                        (character == " " || character == "\n" || character == "\t" || character == "\r" || character == "\f"));
+                        (character == " " ||
+                            character == "\n" ||
+                            character == "\t" ||
+                            character == "\r" ||
+                            character == "\f"));
                 };
                 Source.prototype._skipOptionalSpaces = function () {
                     while (this._currentIndex < this._endIndex && this._isCurrentSpace())
@@ -1281,7 +1284,7 @@
                     return this._currentIndex < this._endIndex;
                 };
                 Source.prototype.peekSegmentType = function () {
-                    var lookahead = this._string[this._currentIndex];
+                    const lookahead = this._string[this._currentIndex];
                     return this._pathSegTypeFromChar(lookahead);
                 };
                 Source.prototype._pathSegTypeFromChar = function (lookahead) {
@@ -1331,7 +1334,10 @@
                 };
                 Source.prototype._nextCommandHelper = function (lookahead, previousCommand) {
                     // Check for remaining coordinates in the current command.
-                    if ((lookahead == "+" || lookahead == "-" || lookahead == "." || (lookahead >= "0" && lookahead <= "9")) &&
+                    if ((lookahead == "+" ||
+                        lookahead == "-" ||
+                        lookahead == "." ||
+                        (lookahead >= "0" && lookahead <= "9")) &&
                         previousCommand != window.SVGPathSeg.PATHSEG_CLOSEPATH) {
                         if (previousCommand == window.SVGPathSeg.PATHSEG_MOVETO_ABS)
                             return window.SVGPathSeg.PATHSEG_LINETO_ABS;
@@ -1345,20 +1351,21 @@
                     // If the path is empty it is still valid, so return true.
                     if (!this.hasMoreData())
                         return true;
-                    var command = this.peekSegmentType();
+                    const command = this.peekSegmentType();
                     // Path must start with moveTo.
-                    return command == window.SVGPathSeg.PATHSEG_MOVETO_ABS || command == window.SVGPathSeg.PATHSEG_MOVETO_REL;
+                    return (command == window.SVGPathSeg.PATHSEG_MOVETO_ABS ||
+                        command == window.SVGPathSeg.PATHSEG_MOVETO_REL);
                 };
                 // Parse a number from an SVG path. This very closely follows genericParseNumber(...) from Source/core/svg/SVGParserUtilities.cpp.
                 // Spec: http://www.w3.org/TR/SVG11/single-page.html#paths-PathDataBNF
                 Source.prototype._parseNumber = function () {
-                    var exponent = 0;
-                    var integer = 0;
-                    var frac = 1;
-                    var decimal = 0;
-                    var sign = 1;
-                    var expsign = 1;
-                    var startIndex = this._currentIndex;
+                    let exponent = 0;
+                    let integer = 0;
+                    let frac = 1;
+                    let decimal = 0;
+                    let sign = 1;
+                    let expsign = 1;
+                    const startIndex = this._currentIndex;
                     this._skipOptionalSpaces();
                     // Read the sign.
                     if (this._currentIndex < this._endIndex && this._string.charAt(this._currentIndex) == "+")
@@ -1368,19 +1375,20 @@
                         sign = -1;
                     }
                     if (this._currentIndex == this._endIndex ||
-                        ((this._string.charAt(this._currentIndex) < "0" || this._string.charAt(this._currentIndex) > "9") &&
+                        ((this._string.charAt(this._currentIndex) < "0" ||
+                            this._string.charAt(this._currentIndex) > "9") &&
                             this._string.charAt(this._currentIndex) != "."))
                         // The first character of a number must be one of [0-9+-.].
                         return undefined;
                     // Read the integer part, build right-to-left.
-                    var startIntPartIndex = this._currentIndex;
+                    const startIntPartIndex = this._currentIndex;
                     while (this._currentIndex < this._endIndex &&
                         this._string.charAt(this._currentIndex) >= "0" &&
                         this._string.charAt(this._currentIndex) <= "9")
                         this._currentIndex++; // Advance to first non-digit.
                     if (this._currentIndex != startIntPartIndex) {
-                        var scanIntPartIndex = this._currentIndex - 1;
-                        var multiplier = 1;
+                        let scanIntPartIndex = this._currentIndex - 1;
+                        let multiplier = 1;
                         while (scanIntPartIndex >= startIntPartIndex) {
                             integer += multiplier * (this._string.charAt(scanIntPartIndex--) - "0");
                             multiplier *= 10;
@@ -1405,7 +1413,8 @@
                     // Read the exponent part.
                     if (this._currentIndex != startIndex &&
                         this._currentIndex + 1 < this._endIndex &&
-                        (this._string.charAt(this._currentIndex) == "e" || this._string.charAt(this._currentIndex) == "E") &&
+                        (this._string.charAt(this._currentIndex) == "e" ||
+                            this._string.charAt(this._currentIndex) == "E") &&
                         this._string.charAt(this._currentIndex + 1) != "x" &&
                         this._string.charAt(this._currentIndex + 1) != "m") {
                         this._currentIndex++;
@@ -1430,7 +1439,7 @@
                             this._currentIndex++;
                         }
                     }
-                    var number = integer + decimal;
+                    let number = integer + decimal;
                     number *= sign;
                     if (exponent)
                         number *= Math.pow(10, expsign * exponent);
@@ -1442,8 +1451,8 @@
                 Source.prototype._parseArcFlag = function () {
                     if (this._currentIndex >= this._endIndex)
                         return undefined;
-                    var flag = false;
-                    var flagChar = this._string.charAt(this._currentIndex++);
+                    let flag = false;
+                    const flagChar = this._string.charAt(this._currentIndex++);
                     if (flagChar == "0")
                         flag = false;
                     else if (flagChar == "1")
@@ -1454,8 +1463,8 @@
                     return flag;
                 };
                 Source.prototype.parseSegment = function () {
-                    var lookahead = this._string[this._currentIndex];
-                    var command = this._pathSegTypeFromChar(lookahead);
+                    const lookahead = this._string[this._currentIndex];
+                    let command = this._pathSegTypeFromChar(lookahead);
                     if (command == window.SVGPathSeg.PATHSEG_UNKNOWN) {
                         // Possibly an implicit command. Not allowed if this is the first command.
                         if (this._previousCommand == window.SVGPathSeg.PATHSEG_UNKNOWN)
@@ -1468,6 +1477,7 @@
                         this._currentIndex++;
                     }
                     this._previousCommand = command;
+                    let points;
                     switch (command) {
                         case window.SVGPathSeg.PATHSEG_MOVETO_REL:
                             return new window.SVGPathSegMovetoRel(owningPathSegList, this._parseNumber(), this._parseNumber());
@@ -1489,7 +1499,7 @@
                             this._skipOptionalSpaces();
                             return new window.SVGPathSegClosePath(owningPathSegList);
                         case window.SVGPathSeg.PATHSEG_CURVETO_CUBIC_REL:
-                            var points = {
+                            points = {
                                 x1: this._parseNumber(),
                                 y1: this._parseNumber(),
                                 x2: this._parseNumber(),
@@ -1499,7 +1509,7 @@
                             };
                             return new window.SVGPathSegCurvetoCubicRel(owningPathSegList, points.x, points.y, points.x1, points.y1, points.x2, points.y2);
                         case window.SVGPathSeg.PATHSEG_CURVETO_CUBIC_ABS:
-                            var points = {
+                            points = {
                                 x1: this._parseNumber(),
                                 y1: this._parseNumber(),
                                 x2: this._parseNumber(),
@@ -1509,7 +1519,7 @@
                             };
                             return new window.SVGPathSegCurvetoCubicAbs(owningPathSegList, points.x, points.y, points.x1, points.y1, points.x2, points.y2);
                         case window.SVGPathSeg.PATHSEG_CURVETO_CUBIC_SMOOTH_REL:
-                            var points = {
+                            points = {
                                 x2: this._parseNumber(),
                                 y2: this._parseNumber(),
                                 x: this._parseNumber(),
@@ -1517,7 +1527,7 @@
                             };
                             return new window.SVGPathSegCurvetoCubicSmoothRel(owningPathSegList, points.x, points.y, points.x2, points.y2);
                         case window.SVGPathSeg.PATHSEG_CURVETO_CUBIC_SMOOTH_ABS:
-                            var points = {
+                            points = {
                                 x2: this._parseNumber(),
                                 y2: this._parseNumber(),
                                 x: this._parseNumber(),
@@ -1525,7 +1535,7 @@
                             };
                             return new window.SVGPathSegCurvetoCubicSmoothAbs(owningPathSegList, points.x, points.y, points.x2, points.y2);
                         case window.SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_REL:
-                            var points = {
+                            points = {
                                 x1: this._parseNumber(),
                                 y1: this._parseNumber(),
                                 x: this._parseNumber(),
@@ -1533,7 +1543,7 @@
                             };
                             return new window.SVGPathSegCurvetoQuadraticRel(owningPathSegList, points.x, points.y, points.x1, points.y1);
                         case window.SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_ABS:
-                            var points = {
+                            points = {
                                 x1: this._parseNumber(),
                                 y1: this._parseNumber(),
                                 x: this._parseNumber(),
@@ -1545,7 +1555,7 @@
                         case window.SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_SMOOTH_ABS:
                             return new window.SVGPathSegCurvetoQuadraticSmoothAbs(owningPathSegList, this._parseNumber(), this._parseNumber());
                         case window.SVGPathSeg.PATHSEG_ARC_REL:
-                            var points = {
+                            points = {
                                 x1: this._parseNumber(),
                                 y1: this._parseNumber(),
                                 arcAngle: this._parseNumber(),
@@ -1556,7 +1566,7 @@
                             };
                             return new window.SVGPathSegArcRel(owningPathSegList, points.x, points.y, points.x1, points.y1, points.arcAngle, points.arcLarge, points.arcSweep);
                         case window.SVGPathSeg.PATHSEG_ARC_ABS:
-                            var points = {
+                            points = {
                                 x1: this._parseNumber(),
                                 y1: this._parseNumber(),
                                 arcAngle: this._parseNumber(),
@@ -1570,12 +1580,12 @@
                             throw "Unknown path seg type.";
                     }
                 };
-                var builder = new Builder();
-                var source = new Source(string);
+                const builder = new Builder();
+                const source = new Source(string);
                 if (!source.initialCommandIsMoveTo())
                     return [];
                 while (source.hasMoreData()) {
-                    var pathSeg = source.parseSegment();
+                    const pathSeg = source.parseSegment();
                     if (!pathSeg)
                         return [];
                     builder.appendSegment(pathSeg);

package/browser/Shapes/Circle/CircleDrawer.d.ts

@@ -1,4 +1,4 @@
-import type { IParticle, IShapeDrawer } from "../../Core/Interfaces";
+import type { IParticle, IShapeDrawer } from "../../Core";
 /**
  * @category Shape Drawers
  */

package/browser/Shapes/Circle/index.d.ts

@@ -1,2 +1,2 @@
-import type { Main } from "../../main";
-export declare function loadCircleShape(tsParticles: Main): Promise<void>;
+import type { Engine } from "../../engine";
+export declare function loadCircleShape(tsParticles: Engine): Promise<void>;

package/browser/Shapes/Image/ImageDrawer.d.ts

@@ -1,7 +1,5 @@
-import type { IParticle, IShapeDrawer } from "../../Core/Interfaces";
-import type { Container } from "../../Core/Container";
-import type { IImage } from "./Utils";
-import { Particle } from "../../Core/Particle";
+import type { Container, IShapeDrawer, Particle } from "../../Core";
+import type { IImage, IImageParticle } from "./Utils";
 interface ContainerImage {
     id: string;
     images: IImage[];
@@ -15,11 +13,9 @@ export declare class ImageDrawer implements IShapeDrawer {
     getSidesCount(): number;
     getImages(container: Container): ContainerImage;
     addImage(container: Container, image: IImage): void;
-    init(container: Container): Promise<void>;
     destroy(): void;
-    private loadImagesFromParticlesOptions;
     private loadImageShape;
-    draw(context: CanvasRenderingContext2D, particle: IParticle, radius: number, opacity: number): void;
+    draw(context: CanvasRenderingContext2D, particle: IImageParticle, radius: number, opacity: number): void;
     loadShape(particle: Particle): void;
 }
 export {};

package/browser/Shapes/Image/ImageDrawer.js

@@ -10,9 +10,7 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
 var _ImageDrawer_images;
-import { isInArray } from "../../Utils";
-import { ShapeType } from "../../Enums";
-import { downloadSvgImage, loadImage, replaceColorSvg } from "./Utils";
+import { downloadSvgImage, loadImage, replaceImageColor } from "./Utils";
 /**
  * @category Shape Drawers
  */
@@ -41,86 +39,31 @@ export class ImageDrawer {
         const containerImages = this.getImages(container);
         containerImages === null || containerImages === void 0 ? void 0 : containerImages.images.push(image);
     }
-    async init(container) {
-        await this.loadImagesFromParticlesOptions(container, container.actualOptions.particles);
-        await this.loadImagesFromParticlesOptions(container, container.actualOptions.interactivity.modes.trail.particles);
-        for (const manualParticle of container.actualOptions.manualParticles) {
-            await this.loadImagesFromParticlesOptions(container, manualParticle.options);
-        }
-        const emitterOptions = container.actualOptions;
-        if (emitterOptions.emitters) {
-            if (emitterOptions.emitters instanceof Array) {
-                for (const emitter of emitterOptions.emitters) {
-                    await this.loadImagesFromParticlesOptions(container, emitter.particles);
-                }
-            }
-            else {
-                await this.loadImagesFromParticlesOptions(container, emitterOptions.emitters.particles);
-            }
-        }
-        const interactiveEmitters = emitterOptions.interactivity.modes.emitters;
-        if (interactiveEmitters) {
-            if (interactiveEmitters instanceof Array) {
-                for (const emitter of interactiveEmitters) {
-                    await this.loadImagesFromParticlesOptions(container, emitter.particles);
-                }
-            }
-            else {
-                await this.loadImagesFromParticlesOptions(container, interactiveEmitters.particles);
-            }
-        }
-    }
     destroy() {
         __classPrivateFieldSet(this, _ImageDrawer_images, [], "f");
     }
-    async loadImagesFromParticlesOptions(container, options) {
-        var _a, _b, _c;
-        const shapeOptions = options === null || options === void 0 ? void 0 : options.shape;
-        if (!(shapeOptions === null || shapeOptions === void 0 ? void 0 : shapeOptions.type) ||
-            !shapeOptions.options ||
-            (!isInArray(ShapeType.image, shapeOptions.type) && !isInArray(ShapeType.images, shapeOptions.type))) {
-            return;
-        }
-        const idx = __classPrivateFieldGet(this, _ImageDrawer_images, "f").findIndex((t) => t.id === container.id);
-        if (idx >= 0) {
-            __classPrivateFieldGet(this, _ImageDrawer_images, "f").splice(idx, 1);
-        }
-        const imageOptions = (_a = shapeOptions.options[ShapeType.images]) !== null && _a !== void 0 ? _a : shapeOptions.options[ShapeType.image];
-        if (imageOptions instanceof Array) {
-            for (const optionsImage of imageOptions) {
-                await this.loadImageShape(container, optionsImage);
-            }
-        }
-        else {
-            await this.loadImageShape(container, imageOptions);
-        }
-        if (options === null || options === void 0 ? void 0 : options.groups) {
-            for (const groupName in options.groups) {
-                const group = options.groups[groupName];
-                await this.loadImagesFromParticlesOptions(container, group);
-            }
-        }
-        if ((_c = (_b = options === null || options === void 0 ? void 0 : options.destroy) === null || _b === void 0 ? void 0 : _b.split) === null || _c === void 0 ? void 0 : _c.particles) {
-            await this.loadImagesFromParticlesOptions(container, options === null || options === void 0 ? void 0 : options.destroy.split.particles);
-        }
-    }
     async loadImageShape(container, imageShape) {
+        const source = imageShape.src;
+        if (!source) {
+            throw new Error("Error tsParticles - No image.src");
+        }
         try {
+            const image = {
+                source: source,
+                type: source.substr(source.length - 3),
+                error: false,
+                loading: true,
+            };
+            this.addImage(container, image);
             const imageFunc = imageShape.replaceColor ? downloadSvgImage : loadImage;
-            const image = await imageFunc(imageShape.src);
-            if (image) {
-                this.addImage(container, image);
-            }
+            await imageFunc(image);
         }
         catch (_a) {
-            console.warn(`tsParticles error - ${imageShape.src} not found`);
+            throw new Error(`tsParticles error - ${imageShape.src} not found`);
         }
     }
     draw(context, particle, radius, opacity) {
         var _a, _b;
-        if (!context) {
-            return;
-        }
         const image = particle.image;
         const element = (_a = image === null || image === void 0 ? void 0 : image.data) === null || _a === void 0 ? void 0 : _a.element;
         if (!element) {
@@ -140,67 +83,41 @@ export class ImageDrawer {
         }
     }
     loadShape(particle) {
-        var _a, _b, _c, _d, _e, _f, _g;
+        var _a, _b, _c;
         if (particle.shape !== "image" && particle.shape !== "images") {
             return;
         }
         const images = this.getImages(particle.container).images;
         const imageData = particle.shapeData;
-        const image = (_a = images.find((t) => t.source === imageData.src)) !== null && _a !== void 0 ? _a : images[0];
-        const color = particle.getFillColor();
+        const image = images.find((t) => t.source === imageData.src);
         let imageRes;
         if (!image) {
+            this.loadImageShape(particle.container, imageData).then(() => {
+                this.loadShape(particle);
+            });
             return;
         }
-        if (image.svgData !== undefined && imageData.replaceColor && color) {
-            const svgColoredData = replaceColorSvg(image, color, (_c = (_b = particle.opacity) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : 1);
-            /* prepare to create img with colored svg */
-            const svg = new Blob([svgColoredData], { type: "image/svg+xml" });
-            const domUrl = URL || window.URL || window.webkitURL || window;
-            const url = domUrl.createObjectURL(svg);
-            /* create particle img obj */
-            const img = new Image();
-            imageRes = {
-                data: Object.assign(Object.assign({}, image), { svgData: svgColoredData }),
-                ratio: imageData.width / imageData.height,
-                replaceColor: (_d = imageData.replaceColor) !== null && _d !== void 0 ? _d : imageData.replace_color,
-                source: imageData.src,
-            };
-            img.addEventListener("load", () => {
-                const pImage = particle.image;
-                if (pImage) {
-                    pImage.loaded = true;
-                    image.element = img;
-                }
-                domUrl.revokeObjectURL(url);
-            });
-            img.addEventListener("error", () => {
-                domUrl.revokeObjectURL(url);
-                // deepcode ignore PromiseNotCaughtGeneral: catch can be ignored
-                loadImage(imageData.src).then((img2) => {
-                    const pImage = particle.image;
-                    if (pImage) {
-                        image.element = img2 === null || img2 === void 0 ? void 0 : img2.element;
-                        pImage.loaded = true;
-                    }
-                });
-            });
-            img.src = url;
+        if (image.error) {
+            return;
+        }
+        const color = particle.getFillColor();
+        if (image.svgData && imageData.replaceColor && color) {
+            imageRes = replaceImageColor(image, imageData, color, particle);
         }
         else {
             imageRes = {
                 data: image,
                 loaded: true,
                 ratio: imageData.width / imageData.height,
-                replaceColor: (_e = imageData.replaceColor) !== null && _e !== void 0 ? _e : imageData.replace_color,
+                replaceColor: (_a = imageData.replaceColor) !== null && _a !== void 0 ? _a : imageData.replace_color,
                 source: imageData.src,
             };
         }
         if (!imageRes.ratio) {
             imageRes.ratio = 1;
         }
-        const fill = (_f = imageData.fill) !== null && _f !== void 0 ? _f : particle.fill;
-        const close = (_g = imageData.close) !== null && _g !== void 0 ? _g : particle.close;
+        const fill = (_b = imageData.fill) !== null && _b !== void 0 ? _b : particle.fill;
+        const close = (_c = imageData.close) !== null && _c !== void 0 ? _c : particle.close;
         const imageShape = {
             image: imageRes,
             fill,

package/browser/Shapes/Image/Utils.d.ts

@@ -1,12 +1,15 @@
 /**
  * @category Interfaces
  */
-import type { IHsl, IParticle } from "../../Core/Interfaces";
+import type { IHsl, IParticle, Particle } from "../../Core";
+import type { IImageShape } from "../../Options/Interfaces/Particles/Shape/IImageShape";
 export interface IImage {
     source: string;
     type: string;
     element?: HTMLImageElement;
     svgData?: string;
+    error: boolean;
+    loading: boolean;
 }
 export interface IParticleImage {
     source: string;
@@ -21,8 +24,8 @@ export interface ContainerImage {
     images: IImage[];
 }
 export declare type IImageParticle = IParticle & {
-    image: IParticleImage;
+    image?: IParticleImage;
 };
-export declare function loadImage(source: string): Promise<IImage | undefined>;
-export declare function downloadSvgImage(source: string): Promise<IImage | undefined>;
-export declare function replaceColorSvg(imageShape: IImage, color: IHsl, opacity: number): string;
+export declare function loadImage(image: IImage): Promise<void>;
+export declare function downloadSvgImage(image: IImage): Promise<void>;
+export declare function replaceImageColor(image: IImage, imageData: IImageShape, color: IHsl, particle: Particle): IParticleImage;