tsparticles 1.35.2 → 1.37.0

package/browser/Plugins/PolygonMask/Options/Interfaces/IDraw.d.ts

@@ -1,8 +1,17 @@
 import type { IDrawStroke } from "./IDrawStroke";
 import type { IColor } from "../../../../Core/Interfaces/Colors";
+/**
+ * @category Polygon Mask Plugin
+ */
 export interface IDraw {
     enable: boolean;
+    /**
+     * @deprecated the property lineColor is deprecated, please use the new stroke.color property
+     */
     lineColor: string | IColor;
+    /**
+     * @deprecated the property lineColor is deprecated, please use the new stroke.width property
+     */
     lineWidth: number;
     stroke: IDrawStroke;
 }

package/browser/Plugins/PolygonMask/Options/Interfaces/IDrawStroke.d.ts

@@ -1,4 +1,7 @@
 import type { IColor } from "../../../../Core/Interfaces/Colors";
+/**
+ * @category Polygon Mask Plugin
+ */
 export interface IDrawStroke {
     color: string | IColor;
     width: number;

package/browser/Plugins/PolygonMask/Options/Interfaces/IInline.d.ts

@@ -1,4 +1,7 @@
 import type { InlineArrangement, InlineArrangementAlt } from "../../Enums";
+/**
+ * @category Polygon Mask Plugin
+ */
 export interface IInline {
     arrangement: InlineArrangement | keyof typeof InlineArrangement | InlineArrangementAlt;
 }

package/browser/Plugins/PolygonMask/Options/Interfaces/ILocalSvg.d.ts

@@ -1,5 +1,8 @@
 import type { SingleOrMultiple } from "../../../../Types";
 import type { IDimension } from "../../../../Core/Interfaces/IDimension";
+/**
+ * @category Polygon Mask Plugin
+ */
 export interface ILocalSvg {
     path: SingleOrMultiple<string>;
     size: IDimension;

package/browser/Plugins/PolygonMask/Options/Interfaces/IMove.d.ts

@@ -1,4 +1,7 @@
 import type { MoveType } from "../../Enums";
+/**
+ * @category Polygon Mask Plugin
+ */
 export interface IMove {
     radius: number;
     type: MoveType | keyof typeof MoveType;

package/browser/Plugins/PolygonMask/Options/Interfaces/IPolygonMask.d.ts

@@ -5,10 +5,17 @@ import type { IInline } from "./IInline";
 import type { ICoordinates } from "../../../../Core/Interfaces/ICoordinates";
 import type { ILocalSvg } from "./ILocalSvg";
 import { Type } from "../../Enums";
+/**
+ * [[include:Options/Plugins/PolygonMask.md]]
+ * @category Polygon Mask Plugin
+ */
 export interface IPolygonMask {
     draw: IDraw;
     enable: boolean;
     inline: IInline;
+    /**
+     * @deprecated the inlineArrangement is deprecated, please use the new inline.arrangement property
+     */
     inlineArrangement: InlineArrangement | keyof typeof InlineArrangement | InlineArrangementAlt;
     move: IMove;
     position?: ICoordinates;

package/browser/Plugins/PolygonMask/Options/Interfaces/IPolygonMaskOptions.d.ts

@@ -1,4 +1,7 @@
 import type { IPolygonMask } from "./IPolygonMask";
+/**
+ * @category Polygon Mask Plugin
+ */
 export interface IPolygonMaskOptions {
     polygon: IPolygonMask;
 }

package/browser/Plugins/PolygonMask/PolygonMaskInstance.d.ts

@@ -6,6 +6,10 @@ import type { RecursivePartial } from "../../Types";
 import { PolygonMask } from "./Options/Classes/PolygonMask";
 import { OutModeDirection } from "../../Enums";
 import type { IPolygonMaskOptions } from "./types";
+/**
+ * Polygon Mask manager
+ * @category Polygon Mask Plugin
+ */
 export declare class PolygonMaskInstance implements IContainerPlugin {
     private readonly container;
     redrawTimeout?: number;
@@ -28,6 +32,14 @@ export declare class PolygonMaskInstance implements IContainerPlugin {
     private polygonBounce;
     private checkInsidePolygon;
     private parseSvgPath;
+    /**
+     * Deprecate SVGPathElement.getPathSegAtLength removed in:
+     * Chrome for desktop release 62
+     * Chrome for Android release 62
+     * Android WebView release 62
+     * Opera release 49
+     * Opera for Android release 49
+     */
     private downloadSvgPath;
     private drawPoints;
     private randomPoint;

package/browser/Plugins/PolygonMask/PolygonMaskInstance.js

@@ -3,6 +3,10 @@ import { Constants, deepExtend, getDistance, getDistances, itemFromArray } from
 import { PolygonMask } from "./Options/Classes/PolygonMask";
 import { OutModeDirection } from "../../Enums";
 import { calcClosestPtOnSegment, drawPolygonMask, drawPolygonMaskPath, parsePaths, segmentBounce } from "./utils";
+/**
+ * Polygon Mask manager
+ * @category Polygon Mask Plugin
+ */
 export class PolygonMaskInstance {
     constructor(container) {
         this.container = container;
@@ -18,6 +22,7 @@ export class PolygonMaskInstance {
         this.options.load(options === null || options === void 0 ? void 0 : options.polygon);
         const polygonMaskOptions = this.options;
         this.polygonMaskMoveRadius = polygonMaskOptions.move.radius * this.container.retina.pixelRatio;
+        /* If is set the url of svg element, load it and parse into raw polygon data */
         if (polygonMaskOptions.enable) {
             await this.initRawData();
         }
@@ -143,6 +148,9 @@ export class PolygonMaskInstance {
         if (!options.enable || options.type === Type.none || options.type === Type.inline) {
             return true;
         }
+        // https://github.com/substack/point-in-polygon
+        // ray-casting algorithm based on
+        // http://www.ecse.rpi.edu/Homepages/wrf/Research/Short_Notes/pnpoly.html
         if (!this.raw) {
             throw new Error(Constants.noPolygonFound);
         }
@@ -150,6 +158,9 @@ export class PolygonMaskInstance {
         const x = (_a = position === null || position === void 0 ? void 0 : position.x) !== null && _a !== void 0 ? _a : Math.random() * canvasSize.width;
         const y = (_b = position === null || position === void 0 ? void 0 : position.y) !== null && _b !== void 0 ? _b : Math.random() * canvasSize.height;
         let inside = false;
+        // if (this.path2DSupported && this.polygonPath && position) {
+        //     inside = container.canvas.isPointInPath(this.polygonPath, position);
+        // } else {
         for (let i = 0, j = this.raw.length - 1; i < this.raw.length; j = i++) {
             const pi = this.raw[i];
             const pj = this.raw[j];
@@ -158,6 +169,7 @@ export class PolygonMaskInstance {
                 inside = !inside;
             }
         }
+        // }
         return options.type === Type.inside ? inside : options.type === Type.outside ? !inside : false;
     }
     parseSvgPath(xml, force) {
@@ -193,16 +205,26 @@ export class PolygonMaskInstance {
             x: 50,
             y: 50,
         };
+        /* centering of the polygon mask */
         this.offset = {
             x: (container.canvas.size.width * position.x) / (100 * pxRatio) - this.dimension.width / 2,
             y: (container.canvas.size.height * position.y) / (100 * pxRatio) - this.dimension.height / 2,
         };
         return parsePaths(this.paths, scale, this.offset);
     }
+    /**
+     * Deprecate SVGPathElement.getPathSegAtLength removed in:
+     * Chrome for desktop release 62
+     * Chrome for Android release 62
+     * Android WebView release 62
+     * Opera release 49
+     * Opera for Android release 49
+     */
     async downloadSvgPath(svgUrl, force) {
         const options = this.options;
         const url = svgUrl || options.url;
         const forceDownload = force !== null && force !== void 0 ? force : false;
+        // Load SVG from file on server
         if (!url || (this.paths !== undefined && !forceDownload)) {
             return this.raw;
         }

package/browser/Plugins/PolygonMask/pathseg.js

@@ -1,10 +1,20 @@
 "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
+// changes which were implemented in Firefox 43 and Chrome 46.
 (function () {
     "use strict";
     try {
+        // The polyfill only applies to browser environments with a `window` object
+        // (i.e. not node.js, workers, etc.). If included in one of these
+        // environments (such as when using 'react-dom/server'), simply return out
         if (typeof window === "undefined")
             return;
         if (!("SVGPathSeg" in window)) {
+            // Spec: http://www.w3.org/TR/SVG11/single-page.html#paths-InterfaceSVGPathSeg
             window.SVGPathSeg = function (type, typeAsLetter, owningPathSegList) {
                 this.pathSegType = type;
                 this.pathSegTypeAsLetter = typeAsLetter;
@@ -31,6 +41,7 @@
             window.SVGPathSeg.PATHSEG_CURVETO_CUBIC_SMOOTH_REL = 17;
             window.SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_SMOOTH_ABS = 18;
             window.SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_SMOOTH_REL = 19;
+            // Notify owning PathSegList on any changes so they can be synchronized back to the path element.
             window.SVGPathSeg.prototype._segmentChanged = function () {
                 if (this._owningPathSegList)
                     this._owningPathSegList.segmentChanged(this);
@@ -972,6 +983,8 @@
                 },
                 enumerable: true,
             });
+            // Add createSVGPathSeg* functions to window.SVGPathElement.
+            // Spec: http://www.w3.org/TR/SVG11/single-page.html#paths-Interfacewindow.SVGPathElement.
             window.SVGPathElement.prototype.createSVGPathSegClosePath = function () {
                 return new window.SVGPathSegClosePath(undefined);
             };
@@ -1030,12 +1043,16 @@
                 return new window.SVGPathSegCurvetoQuadraticSmoothRel(undefined, x, y);
             };
             if (!("getPathSegAtLength" in window.SVGPathElement.prototype)) {
+                // Add getPathSegAtLength to SVGPathElement.
+                // Spec: https://www.w3.org/TR/SVG11/single-page.html#paths-__svg__SVGPathElement__getPathSegAtLength
+                // This polyfill requires SVGPathElement.getTotalLength to implement the distance-along-a-path algorithm.
                 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");
                     measurementElement.setAttribute("d", this.getAttribute("d"));
                     var lastPathSegment = measurementElement.pathSegList.numberOfItems - 1;
+                    // If the path is empty, return 0.
                     if (lastPathSegment <= 0)
                         return 0;
                     do {
@@ -1048,10 +1065,17 @@
                 };
             }
         }
+        // Checking for SVGPathSegList in window checks for the case of an implementation without the
+        // SVGPathSegList API.
+        // The second check for appendItem is specific to Firefox 59+ which removed only parts of the
+        // SVGPathSegList API (e.g., appendItem). In this case we need to re-implement the entire API
+        // so the polyfill data (i.e., _list) is used throughout.
         if (!("SVGPathSegList" in window) || !("appendItem" in window.SVGPathSegList.prototype)) {
+            // Spec: http://www.w3.org/TR/SVG11/single-page.html#paths-InterfaceSVGPathSegList
             window.SVGPathSegList = function (pathElement) {
                 this._pathElement = pathElement;
                 this._list = this._parsePath(this._pathElement.getAttribute("d"));
+                // Use a MutationObserver to catch changes to the path's "d" attribute.
                 this._mutationObserverConfig = { attributes: true, attributeFilter: ["d"] };
                 this._pathElementMutationObserver = new MutationObserver(this._updateListFromPathMutations.bind(this));
                 this._pathElementMutationObserver.observe(this._pathElement, this._mutationObserverConfig);
@@ -1064,6 +1088,7 @@
                 },
                 enumerable: true,
             });
+            // The length property was not specified but was in Firefox 58.
             Object.defineProperty(window.SVGPathSegList.prototype, "length", {
                 get: function () {
                     this._checkPathSynchronizedToList();
@@ -1071,6 +1096,8 @@
                 },
                 enumerable: true,
             });
+            // Add the pathSegList accessors to window.SVGPathElement.
+            // Spec: http://www.w3.org/TR/SVG11/single-page.html#paths-InterfaceSVGAnimatedPathData
             Object.defineProperty(window.SVGPathElement.prototype, "pathSegList", {
                 get: function () {
                     if (!this._pathSegList)
@@ -1079,6 +1106,7 @@
                 },
                 enumerable: true,
             });
+            // FIXME: The following are not implemented and simply return window.SVGPathElement.pathSegList.
             Object.defineProperty(window.SVGPathElement.prototype, "normalizedPathSegList", {
                 get: function () {
                     return this.pathSegList;
@@ -1097,6 +1125,9 @@
                 },
                 enumerable: true,
             });
+            // Process any pending mutations to the path element and update the list as needed.
+            // This should be the first call of all public functions and is needed because
+            // MutationObservers are not synchronous so we can have pending asynchronous mutations.
             window.SVGPathSegList.prototype._checkPathSynchronizedToList = function () {
                 this._updateListFromPathMutations(this._pathElementMutationObserver.takeRecords());
             };
@@ -1111,11 +1142,13 @@
                 if (hasPathMutations)
                     this._list = this._parsePath(this._pathElement.getAttribute("d"));
             };
+            // Serialize the list and update the path's 'd' attribute.
             window.SVGPathSegList.prototype._writeListToPath = function () {
                 this._pathElementMutationObserver.disconnect();
                 this._pathElement.setAttribute("d", window.SVGPathSegList._pathSegArrayAsString(this._list));
                 this._pathElementMutationObserver.observe(this._pathElement, this._mutationObserverConfig);
             };
+            // When a path segment changes the list needs to be synchronized back to the path element.
             window.SVGPathSegList.prototype.segmentChanged = function (pathSeg) {
                 this._writeListToPath();
             };
@@ -1145,9 +1178,11 @@
             };
             window.SVGPathSegList.prototype.insertItemBefore = function (newItem, index) {
                 this._checkPathSynchronizedToList();
+                // Spec: If the index is greater than or equal to numberOfItems, then the new item is appended to the end of the list.
                 if (index > this.numberOfItems)
                     index = this.numberOfItems;
                 if (newItem._owningPathSegList) {
+                    // SVG2 spec says to make a copy.
                     newItem = newItem.clone();
                 }
                 this._list.splice(index, 0, newItem);
@@ -1158,6 +1193,7 @@
             window.SVGPathSegList.prototype.replaceItem = function (newItem, index) {
                 this._checkPathSynchronizedToList();
                 if (newItem._owningPathSegList) {
+                    // SVG2 spec says to make a copy.
                     newItem = newItem.clone();
                 }
                 this._checkValidIndex(index);
@@ -1177,10 +1213,12 @@
             window.SVGPathSegList.prototype.appendItem = function (newItem) {
                 this._checkPathSynchronizedToList();
                 if (newItem._owningPathSegList) {
+                    // SVG2 spec says to make a copy.
                     newItem = newItem.clone();
                 }
                 this._list.push(newItem);
                 newItem._owningPathSegList = this;
+                // TODO: Optimize this to just append to the existing attribute.
                 this._writeListToPath();
                 return newItem;
             };
@@ -1198,6 +1236,7 @@
                 });
                 return string;
             };
+            // This closely follows SVGPathParser::parsePath from Source/core/svg/SVGPathParser.cpp.
             window.SVGPathSegList.prototype._parsePath = function (string) {
                 if (!string || string.length == 0)
                     return [];
@@ -1291,6 +1330,7 @@
                     }
                 };
                 Source.prototype._nextCommandHelper = function (lookahead, previousCommand) {
+                    // Check for remaining coordinates in the current command.
                     if ((lookahead == "+" || lookahead == "-" || lookahead == "." || (lookahead >= "0" && lookahead <= "9")) &&
                         previousCommand != window.SVGPathSeg.PATHSEG_CLOSEPATH) {
                         if (previousCommand == window.SVGPathSeg.PATHSEG_MOVETO_ABS)
@@ -1302,11 +1342,15 @@
                     return window.SVGPathSeg.PATHSEG_UNKNOWN;
                 };
                 Source.prototype.initialCommandIsMoveTo = function () {
+                    // If the path is empty it is still valid, so return true.
                     if (!this.hasMoreData())
                         return true;
                     var command = this.peekSegmentType();
+                    // Path must start with moveTo.
                     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;
@@ -1316,6 +1360,7 @@
                     var expsign = 1;
                     var startIndex = this._currentIndex;
                     this._skipOptionalSpaces();
+                    // Read the sign.
                     if (this._currentIndex < this._endIndex && this._string.charAt(this._currentIndex) == "+")
                         this._currentIndex++;
                     else if (this._currentIndex < this._endIndex && this._string.charAt(this._currentIndex) == "-") {
@@ -1325,12 +1370,14 @@
                     if (this._currentIndex == this._endIndex ||
                         ((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;
                     while (this._currentIndex < this._endIndex &&
                         this._string.charAt(this._currentIndex) >= "0" &&
                         this._string.charAt(this._currentIndex) <= "9")
-                        this._currentIndex++;
+                        this._currentIndex++; // Advance to first non-digit.
                     if (this._currentIndex != startIntPartIndex) {
                         var scanIntPartIndex = this._currentIndex - 1;
                         var multiplier = 1;
@@ -1339,8 +1386,10 @@
                             multiplier *= 10;
                         }
                     }
+                    // Read the decimals.
                     if (this._currentIndex < this._endIndex && this._string.charAt(this._currentIndex) == ".") {
                         this._currentIndex++;
+                        // There must be a least one digit following the .
                         if (this._currentIndex >= this._endIndex ||
                             this._string.charAt(this._currentIndex) < "0" ||
                             this._string.charAt(this._currentIndex) > "9")
@@ -1353,12 +1402,14 @@
                             this._currentIndex += 1;
                         }
                     }
+                    // 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 + 1) != "x" &&
                         this._string.charAt(this._currentIndex + 1) != "m") {
                         this._currentIndex++;
+                        // Read the sign of the exponent.
                         if (this._string.charAt(this._currentIndex) == "+") {
                             this._currentIndex++;
                         }
@@ -1366,6 +1417,7 @@
                             this._currentIndex++;
                             expsign = -1;
                         }
+                        // There must be an exponent.
                         if (this._currentIndex >= this._endIndex ||
                             this._string.charAt(this._currentIndex) < "0" ||
                             this._string.charAt(this._currentIndex) > "9")
@@ -1405,6 +1457,7 @@
                     var lookahead = this._string[this._currentIndex];
                     var 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)
                             return null;
                         command = this._nextCommandHelper(lookahead, this._previousCommand);
@@ -1532,6 +1585,7 @@
         }
     }
     catch (e) {
+        // ignore, if it's not working we can ignore errors
         console.warn("An error occurred in tsParticles pathseg polyfill. If the Polygon Mask is not working, please open an issue here: https://github.com/matteobruni/tsparticles", e);
     }
 })();

package/browser/Plugins/PolygonMask/plugin.js

@@ -2,6 +2,9 @@ import { PolygonMaskInstance } from "./PolygonMaskInstance";
 import { PolygonMask } from "./Options/Classes/PolygonMask";
 import { Type } from "./Enums";
 import { isSsr } from "../../Utils";
+/**
+ * @category Polygon Mask Plugin
+ */
 class Plugin {
     constructor() {
         this.id = "polygonMask";
@@ -27,8 +30,11 @@ class Plugin {
 }
 export async function loadPolygonMaskPlugin(tsParticles) {
     if (!isSsr() && !window.SVGPathSeg) {
-        await import("./pathseg");
+        await import(
+        /* webpackChunkName: "tsparticles.pathseg" */
+        /* webpackMode: "lazy-once" */
+        "./pathseg");
     }
     const plugin = new Plugin();
-    tsParticles.addPlugin(plugin);
+    await tsParticles.addPlugin(plugin);
 }

package/browser/Plugins/PolygonMask/utils.js

@@ -38,6 +38,9 @@ export function parsePaths(paths, scale, offset) {
             const segment = segments === null || segments === void 0 ? void 0 : segments.getItem(i);
             const svgPathSeg = window.SVGPathSeg;
             switch (segment === null || segment === void 0 ? void 0 : segment.pathSegType) {
+                //
+                // Absolute
+                //
                 case svgPathSeg.PATHSEG_MOVETO_ABS:
                 case svgPathSeg.PATHSEG_LINETO_ABS:
                 case svgPathSeg.PATHSEG_CURVETO_CUBIC_ABS:
@@ -56,6 +59,9 @@ export function parsePaths(paths, scale, offset) {
                 case svgPathSeg.PATHSEG_LINETO_VERTICAL_ABS:
                     p.y = segment.y;
                     break;
+                //
+                // Relative
+                //
                 case svgPathSeg.PATHSEG_LINETO_REL:
                 case svgPathSeg.PATHSEG_MOVETO_REL:
                 case svgPathSeg.PATHSEG_CURVETO_CUBIC_REL:
@@ -76,7 +82,7 @@ export function parsePaths(paths, scale, offset) {
                     break;
                 case svgPathSeg.PATHSEG_UNKNOWN:
                 case svgPathSeg.PATHSEG_CLOSEPATH:
-                    continue;
+                    continue; // Skip the closing path (and the UNKNOWN)
             }
             res.push({
                 x: p.x * scale + offset.x,
@@ -87,11 +93,17 @@ export function parsePaths(paths, scale, offset) {
     return res;
 }
 export function calcClosestPtOnSegment(s1, s2, pos) {
+    // calc delta distance: source point to line start
     const { dx, dy } = getDistances(pos, s1);
+    // calc delta distance: line start to end
     const { dx: dxx, dy: dyy } = getDistances(s2, s1);
+    // Calc position on line normalized between 0.00 & 1.00
+    // == dot product divided by delta line distances squared
     const t = (dx * dxx + dy * dyy) / (dxx ** 2 + dyy ** 2);
+    // calc nearest pt on line
     let x = s1.x + dxx * t;
     let y = s1.y + dyy * t;
+    // clamp results to being on the segment
     if (t < 0) {
         x = s1.x;
         y = s1.y;
@@ -104,7 +116,7 @@ export function calcClosestPtOnSegment(s1, s2, pos) {
 }
 export function segmentBounce(start, stop, velocity) {
     const { dx, dy } = getDistances(start, stop);
-    const wallAngle = Math.atan2(dy, dx);
+    const wallAngle = Math.atan2(dy, dx); // + Math.PI / 2;
     const wallNormalX = Math.sin(wallAngle);
     const wallNormalY = -Math.cos(wallAngle);
     const d = 2 * (velocity.x * wallNormalX + velocity.y * wallNormalY);

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

@@ -1,4 +1,7 @@
 import type { IParticle, IShapeDrawer } from "../../Core/Interfaces";
+/**
+ * @category Shape Drawers
+ */
 export declare class CircleDrawer implements IShapeDrawer {
     getSidesCount(): number;
     draw(context: CanvasRenderingContext2D, particle: IParticle, radius: number): void;

package/browser/Shapes/Circle/CircleDrawer.js

@@ -1,3 +1,6 @@
+/**
+ * @category Shape Drawers
+ */
 export class CircleDrawer {
     getSidesCount() {
         return 12;

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

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

package/browser/Shapes/Circle/index.js

@@ -1,4 +1,4 @@
 import { CircleDrawer } from "./CircleDrawer";
-export function loadCircleShape(tsParticles) {
-    tsParticles.addShape("circle", new CircleDrawer());
+export async function loadCircleShape(tsParticles) {
+    await tsParticles.addShape("circle", new CircleDrawer());
 }

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

@@ -6,6 +6,9 @@ interface ContainerImage {
     id: string;
     images: IImage[];
 }
+/**
+ * @category Shape Drawers
+ */
 export declare class ImageDrawer implements IShapeDrawer {
     #private;
     constructor();

package/browser/Shapes/Image/ImageDrawer.js

@@ -13,6 +13,9 @@ var _ImageDrawer_images;
 import { isInArray } from "../../Utils";
 import { ShapeType } from "../../Enums";
 import { downloadSvgImage, loadImage, replaceColorSvg } from "./Utils";
+/**
+ * @category Shape Drawers
+ */
 export class ImageDrawer {
     constructor() {
         _ImageDrawer_images.set(this, void 0);
@@ -151,9 +154,11 @@ export class ImageDrawer {
         }
         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 }),
@@ -171,6 +176,7 @@ export class ImageDrawer {
             });
             img.addEventListener("error", () => {
                 domUrl.revokeObjectURL(url);
+                // deepcode ignore PromiseNotCaughtGeneral: catch can be ignored
                 loadImage(imageData.src).then((img2) => {
                     const pImage = particle.image;
                     if (pImage) {

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

@@ -1,3 +1,6 @@
+/**
+ * @category Interfaces
+ */
 import type { IHsl, IParticle } from "../../Core/Interfaces";
 export interface IImage {
     source: string;

package/browser/Shapes/Image/Utils.js

@@ -43,6 +43,7 @@ export function replaceColorSvg(imageShape, color, opacity) {
     if (!svgData) {
         return "";
     }
+    /* set color to svg element */
     if (svgData.includes("fill")) {
         const currentColor = /(#(?:[0-9a-f]{2}){2,4}|(#[0-9a-f]{3})|(rgb|hsl)a?\((-?\d+%?[,\s]+){2,3}\s*[\d.]+%?\))|currentcolor/gi;
         return svgData.replace(currentColor, () => getStyleFromHsl(color, opacity));

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

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

package/browser/Shapes/Image/index.js

@@ -1,6 +1,6 @@
 import { ImageDrawer } from "./ImageDrawer";
-export function loadImageShape(tsParticles) {
+export async function loadImageShape(tsParticles) {
     const imageDrawer = new ImageDrawer();
-    tsParticles.addShape("image", imageDrawer);
-    tsParticles.addShape("images", imageDrawer);
+    await tsParticles.addShape("image", imageDrawer);
+    await tsParticles.addShape("images", imageDrawer);
 }

package/browser/Shapes/Line/LineDrawer.d.ts

@@ -1,4 +1,7 @@
 import { IParticle, IShapeDrawer } from "../../Core/Interfaces";
+/**
+ * @category Shape Drawers
+ */
 export declare class LineDrawer implements IShapeDrawer {
     getSidesCount(): number;
     draw(context: CanvasRenderingContext2D, particle: IParticle, radius: number): void;

package/browser/Shapes/Line/LineDrawer.js

@@ -1,3 +1,6 @@
+/**
+ * @category Shape Drawers
+ */
 export class LineDrawer {
     getSidesCount() {
         return 1;

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

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

package/browser/Shapes/Line/index.js

@@ -1,4 +1,4 @@
 import { LineDrawer } from "./LineDrawer";
-export function loadLineShape(tsParticles) {
-    tsParticles.addShape("line", new LineDrawer());
+export async function loadLineShape(tsParticles) {
+    await tsParticles.addShape("line", new LineDrawer());
 }