@tsparticles/path-svg 4.0.0-alpha.2 → 4.0.0-alpha.21

package/905.min.js

@@ -0,0 +1 @@
+"use strict";(this.webpackChunk_tsparticles_path_svg=this.webpackChunk_tsparticles_path_svg||[]).push([[905],{905(t,e,s){s.d(e,{SVGPathGenerator:()=>n});var i,h,a=s(303);(i=h||(h={}))[i.normal=0]="normal",i[i.reverse=1]="reverse";class n{_container;_offset;_paths;_reverse;_scale;_size;_width;constructor(t){this._container=t,this._paths=[],this._reverse=!1,this._size={width:0,height:0},this._scale=1,this._offset={x:0,y:0,mode:a.PixelMode.percent},this._width=0}generate(t,e){let s=this._container.retina.pixelRatio;t.svgDirection??=(0,a.getRandom)()>a.half?h.normal:h.reverse,t.svgPathIndex??=Math.floor((0,a.getRandom)()*this._paths.length),t.svgSpeed??=t.velocity.mult((t.retina.moveSpeed??1)*a.half).length,t.svgStep??=(0,a.randomInRangeValue)({min:0,max:this._paths[t.svgPathIndex].length})*s,t.svgOffset??={width:(0,a.randomInRangeValue)({min:-this._width*a.half,max:this._width*a.half})*s,height:(0,a.randomInRangeValue)({min:-this._width*a.half,max:this._width*a.half})*s},t.svgInitialPosition??=t.position.copy(),t.velocity.x=0,t.velocity.y=0,t.svgDirection===h.normal?t.svgStep+=t.svgSpeed*e.factor:t.svgStep-=t.svgSpeed*e.factor;let i=this._paths[t.svgPathIndex],n=i.length;t.svgStep>=n?(t.svgPathIndex=t.svgPathIndex+1,t.svgPathIndex>=this._paths.length&&(this._reverse?(t.svgPathIndex=this._paths.length-1,t.svgDirection=h.reverse):(t.svgPathIndex=0,t.svgStep=0))):t.svgStep<=0&&(t.svgPathIndex=t.svgPathIndex-1,t.svgPathIndex<0&&(this._reverse?(t.svgPathIndex=0,t.svgDirection=h.normal):(t.svgPathIndex=this._paths.length-1,i=this._paths[t.svgPathIndex],t.svgStep=i.length)));let r=(i=this._paths[t.svgPathIndex]).element.getPointAtLength(t.svgStep),g=this._container.canvas.size,o=(0,a.getPosition)(this._offset,g),l=this._scale*s;return t.position.x=(r.x-this._size.width*a.half)*l+t.svgInitialPosition.x+o.x+t.svgOffset.width,t.position.y=(r.y-this._size.height*a.half)*l+t.svgInitialPosition.y+o.y+t.svgOffset.height,a.Vector.origin}init(){let t=this._container.actualOptions.particles.move.path.options,e=t.position??this._offset;if(this._reverse=t.reverse??this._reverse,this._scale=t.scale??1,this._offset.x=e.x,this._offset.y=e.y,this._offset.mode=e.mode,this._width=t.width??0,t.url&&!t.path){let e=t.url;(async()=>{let t=await fetch(e),{paths:s,size:i}=function(t){let e=new DOMParser().parseFromString(t,"image/svg+xml").querySelector("svg");if(!e)return{paths:[],size:{width:0,height:0}};let s=e.querySelectorAll("path"),i=[];for(let t of s)t instanceof SVGPathElement&&i.push({element:t,length:t.getTotalLength()});return{paths:i,size:{width:Number.parseFloat(e.getAttribute("width")??"0"),height:Number.parseFloat(e.getAttribute("height")??"0")}}}(await t.text());this._paths=s,this._size.width=i.width,this._size.height=i.height})()}else if(t.path){var s;let e,i=t.path;this._paths=(s=t.path.data,e=(0,a.safeDocument)(),s.map(t=>{let s=e.createElementNS("http://www.w3.org/2000/svg","path");return s.setAttribute("d",t),{element:s,length:s.getTotalLength()}})),this._size.height=i.size.height,this._size.width=i.size.width}}reset(){}update(){}}}}]);

package/browser/SVGPathGenerator.js

@@ -1,4 +1,6 @@
-import { PixelMode, Vector, getPosition, getRandom, half, randomInRangeValue, safeDocument, } from "@tsparticles/engine";
+import { PixelMode, Vector, getPosition, getRandom, half, randomInRangeValue, } from "@tsparticles/engine";
+import { createSVGPaths } from "./createSVGPaths.js";
+import { loadSVGFromString } from "./loadSVGFromString.js";
 var SVGPathDirection;
 (function (SVGPathDirection) {
     SVGPathDirection[SVGPathDirection["normal"] = 0] = "normal";
@@ -6,7 +8,15 @@ var SVGPathDirection;
 })(SVGPathDirection || (SVGPathDirection = {}));
 const defaultSpeed = 1, minStep = 0, minIndex = 0, minWidth = 0, minScale = 1;
 export class SVGPathGenerator {
-    constructor() {
+    _container;
+    _offset;
+    _paths;
+    _reverse;
+    _scale;
+    _size;
+    _width;
+    constructor(container) {
+        this._container = container;
         this._paths = [];
         this._reverse = false;
         this._size = { width: 0, height: 0 };
@@ -15,7 +25,7 @@ export class SVGPathGenerator {
         this._width = 0;
     }
     generate(particle, delta) {
-        const container = particle.container, pxRatio = container.retina.pixelRatio;
+        const container = this._container, pxRatio = container.retina.pixelRatio;
         particle.svgDirection ??= getRandom() > half ? SVGPathDirection.normal : SVGPathDirection.reverse;
         particle.svgPathIndex ??= Math.floor(getRandom() * this._paths.length);
         particle.svgSpeed ??= particle.velocity.mult((particle.retina.moveSpeed ?? defaultSpeed) * half).length;
@@ -63,21 +73,15 @@ export class SVGPathGenerator {
             }
         }
         path = this._paths[particle.svgPathIndex];
-        const pathElement = path.element, pos = pathElement.getPointAtLength(particle.svgStep), canvasSize = particle.container.canvas.size, offset = getPosition(this._offset, canvasSize), scale = this._scale * pxRatio;
+        const pathElement = path.element, pos = pathElement.getPointAtLength(particle.svgStep), canvasSize = this._container.canvas.size, offset = getPosition(this._offset, canvasSize), scale = this._scale * pxRatio;
         particle.position.x =
-            (pos.x - this._size.width * half) * scale +
-                particle.svgInitialPosition.x +
-                offset.x +
-                particle.svgOffset.width;
+            (pos.x - this._size.width * half) * scale + particle.svgInitialPosition.x + offset.x + particle.svgOffset.width;
         particle.position.y =
-            (pos.y - this._size.height * half) * scale +
-                particle.svgInitialPosition.y +
-                offset.y +
-                particle.svgOffset.height;
+            (pos.y - this._size.height * half) * scale + particle.svgInitialPosition.y + offset.y + particle.svgOffset.height;
         return Vector.origin;
     }
-    init(container) {
-        const options = container.actualOptions.particles.move.path.options, position = options.position ?? this._offset;
+    init() {
+        const options = this._container.actualOptions.particles.move.path.options, position = options.position ?? this._offset;
         this._reverse = options.reverse ?? this._reverse;
         this._scale = options.scale ?? minScale;
         this._offset.x = position.x;
@@ -87,37 +91,15 @@ export class SVGPathGenerator {
         if (options.url && !options.path) {
             const url = options.url;
             void (async () => {
-                const response = await fetch(url), data = await response.text();
-                const parser = new DOMParser(), doc = parser.parseFromString(data, "image/svg+xml"), firstIndex = 0, svg = doc.getElementsByTagName("svg")[firstIndex];
-                let svgPaths = svg.getElementsByTagName("path");
-                if (!svgPaths.length) {
-                    svgPaths = doc.getElementsByTagName("path");
-                }
-                this._paths = [];
-                for (let i = 0; i < svgPaths.length; i++) {
-                    const path = svgPaths.item(i);
-                    if (path) {
-                        this._paths.push({
-                            element: path,
-                            length: path.getTotalLength(),
-                        });
-                    }
-                }
-                this._size.height = Number.parseFloat(svg.getAttribute("height") ?? "0");
-                this._size.width = Number.parseFloat(svg.getAttribute("width") ?? "0");
+                const response = await fetch(url), data = await response.text(), { paths, size } = loadSVGFromString(data);
+                this._paths = paths;
+                this._size.width = size.width;
+                this._size.height = size.height;
             })();
         }
         else if (options.path) {
             const path = options.path;
-            this._paths = [];
-            for (const item of path.data) {
-                const element = safeDocument().createElementNS("http://www.w3.org/2000/svg", "path");
-                element.setAttribute("d", item);
-                this._paths.push({
-                    element,
-                    length: element.getTotalLength(),
-                });
-            }
+            this._paths = createSVGPaths(options.path.data);
             this._size.height = path.size.height;
             this._size.width = path.size.width;
         }

package/browser/createSVGPaths.js

@@ -0,0 +1,12 @@
+import { safeDocument } from "@tsparticles/engine";
+export function createSVGPaths(data) {
+    const doc = safeDocument();
+    return data.map(d => {
+        const element = doc.createElementNS("http://www.w3.org/2000/svg", "path");
+        element.setAttribute("d", d);
+        return {
+            element,
+            length: element.getTotalLength(),
+        };
+    });
+}

package/browser/index.js

@@ -1,8 +1,10 @@
 export const svgPathName = "svgPathGenerator";
-export function loadSVGPath(engine) {
-    engine.checkVersion("4.0.0-alpha.2");
-    engine.register(async (e) => {
-        const { SVGPathGenerator } = await import("./SVGPathGenerator.js");
-        e.addPathGenerator(svgPathName, new SVGPathGenerator());
+export async function loadSVGPath(engine) {
+    engine.checkVersion("4.0.0-alpha.21");
+    await engine.register(e => {
+        e.addPathGenerator(svgPathName, async (container) => {
+            const { SVGPathGenerator } = await import("./SVGPathGenerator.js");
+            return new SVGPathGenerator(container);
+        });
     });
 }

package/browser/loadSVGFromString.js

@@ -0,0 +1,24 @@
+export function loadSVGFromString(svgText) {
+    const parser = new DOMParser(), doc = parser.parseFromString(svgText, "image/svg+xml"), svg = doc.querySelector("svg");
+    if (!svg) {
+        return { paths: [], size: { width: 0, height: 0 } };
+    }
+    const pathElements = svg.querySelectorAll("path"), paths = [];
+    for (const node of pathElements) {
+        if (!(node instanceof SVGPathElement)) {
+            continue;
+        }
+        paths.push({
+            element: node,
+            length: node.getTotalLength(),
+        });
+    }
+    const size = {
+        width: Number.parseFloat(svg.getAttribute("width") ?? "0"),
+        height: Number.parseFloat(svg.getAttribute("height") ?? "0"),
+    };
+    return {
+        paths,
+        size,
+    };
+}

package/browser/types.js

@@ -0,0 +1 @@
+export {};

package/cjs/SVGPathGenerator.js

@@ -1,4 +1,6 @@
-import { PixelMode, Vector, getPosition, getRandom, half, randomInRangeValue, safeDocument, } from "@tsparticles/engine";
+import { PixelMode, Vector, getPosition, getRandom, half, randomInRangeValue, } from "@tsparticles/engine";
+import { createSVGPaths } from "./createSVGPaths.js";
+import { loadSVGFromString } from "./loadSVGFromString.js";
 var SVGPathDirection;
 (function (SVGPathDirection) {
     SVGPathDirection[SVGPathDirection["normal"] = 0] = "normal";
@@ -6,7 +8,15 @@ var SVGPathDirection;
 })(SVGPathDirection || (SVGPathDirection = {}));
 const defaultSpeed = 1, minStep = 0, minIndex = 0, minWidth = 0, minScale = 1;
 export class SVGPathGenerator {
-    constructor() {
+    _container;
+    _offset;
+    _paths;
+    _reverse;
+    _scale;
+    _size;
+    _width;
+    constructor(container) {
+        this._container = container;
         this._paths = [];
         this._reverse = false;
         this._size = { width: 0, height: 0 };
@@ -15,7 +25,7 @@ export class SVGPathGenerator {
         this._width = 0;
     }
     generate(particle, delta) {
-        const container = particle.container, pxRatio = container.retina.pixelRatio;
+        const container = this._container, pxRatio = container.retina.pixelRatio;
         particle.svgDirection ??= getRandom() > half ? SVGPathDirection.normal : SVGPathDirection.reverse;
         particle.svgPathIndex ??= Math.floor(getRandom() * this._paths.length);
         particle.svgSpeed ??= particle.velocity.mult((particle.retina.moveSpeed ?? defaultSpeed) * half).length;
@@ -63,21 +73,15 @@ export class SVGPathGenerator {
             }
         }
         path = this._paths[particle.svgPathIndex];
-        const pathElement = path.element, pos = pathElement.getPointAtLength(particle.svgStep), canvasSize = particle.container.canvas.size, offset = getPosition(this._offset, canvasSize), scale = this._scale * pxRatio;
+        const pathElement = path.element, pos = pathElement.getPointAtLength(particle.svgStep), canvasSize = this._container.canvas.size, offset = getPosition(this._offset, canvasSize), scale = this._scale * pxRatio;
         particle.position.x =
-            (pos.x - this._size.width * half) * scale +
-                particle.svgInitialPosition.x +
-                offset.x +
-                particle.svgOffset.width;
+            (pos.x - this._size.width * half) * scale + particle.svgInitialPosition.x + offset.x + particle.svgOffset.width;
         particle.position.y =
-            (pos.y - this._size.height * half) * scale +
-                particle.svgInitialPosition.y +
-                offset.y +
-                particle.svgOffset.height;
+            (pos.y - this._size.height * half) * scale + particle.svgInitialPosition.y + offset.y + particle.svgOffset.height;
         return Vector.origin;
     }
-    init(container) {
-        const options = container.actualOptions.particles.move.path.options, position = options.position ?? this._offset;
+    init() {
+        const options = this._container.actualOptions.particles.move.path.options, position = options.position ?? this._offset;
         this._reverse = options.reverse ?? this._reverse;
         this._scale = options.scale ?? minScale;
         this._offset.x = position.x;
@@ -87,37 +91,15 @@ export class SVGPathGenerator {
         if (options.url && !options.path) {
             const url = options.url;
             void (async () => {
-                const response = await fetch(url), data = await response.text();
-                const parser = new DOMParser(), doc = parser.parseFromString(data, "image/svg+xml"), firstIndex = 0, svg = doc.getElementsByTagName("svg")[firstIndex];
-                let svgPaths = svg.getElementsByTagName("path");
-                if (!svgPaths.length) {
-                    svgPaths = doc.getElementsByTagName("path");
-                }
-                this._paths = [];
-                for (let i = 0; i < svgPaths.length; i++) {
-                    const path = svgPaths.item(i);
-                    if (path) {
-                        this._paths.push({
-                            element: path,
-                            length: path.getTotalLength(),
-                        });
-                    }
-                }
-                this._size.height = Number.parseFloat(svg.getAttribute("height") ?? "0");
-                this._size.width = Number.parseFloat(svg.getAttribute("width") ?? "0");
+                const response = await fetch(url), data = await response.text(), { paths, size } = loadSVGFromString(data);
+                this._paths = paths;
+                this._size.width = size.width;
+                this._size.height = size.height;
             })();
         }
         else if (options.path) {
             const path = options.path;
-            this._paths = [];
-            for (const item of path.data) {
-                const element = safeDocument().createElementNS("http://www.w3.org/2000/svg", "path");
-                element.setAttribute("d", item);
-                this._paths.push({
-                    element,
-                    length: element.getTotalLength(),
-                });
-            }
+            this._paths = createSVGPaths(options.path.data);
             this._size.height = path.size.height;
             this._size.width = path.size.width;
         }

package/cjs/createSVGPaths.js

@@ -0,0 +1,12 @@
+import { safeDocument } from "@tsparticles/engine";
+export function createSVGPaths(data) {
+    const doc = safeDocument();
+    return data.map(d => {
+        const element = doc.createElementNS("http://www.w3.org/2000/svg", "path");
+        element.setAttribute("d", d);
+        return {
+            element,
+            length: element.getTotalLength(),
+        };
+    });
+}

package/cjs/index.js

@@ -1,8 +1,10 @@
 export const svgPathName = "svgPathGenerator";
-export function loadSVGPath(engine) {
-    engine.checkVersion("4.0.0-alpha.2");
-    engine.register(async (e) => {
-        const { SVGPathGenerator } = await import("./SVGPathGenerator.js");
-        e.addPathGenerator(svgPathName, new SVGPathGenerator());
+export async function loadSVGPath(engine) {
+    engine.checkVersion("4.0.0-alpha.21");
+    await engine.register(e => {
+        e.addPathGenerator(svgPathName, async (container) => {
+            const { SVGPathGenerator } = await import("./SVGPathGenerator.js");
+            return new SVGPathGenerator(container);
+        });
     });
 }

package/cjs/loadSVGFromString.js

@@ -0,0 +1,24 @@
+export function loadSVGFromString(svgText) {
+    const parser = new DOMParser(), doc = parser.parseFromString(svgText, "image/svg+xml"), svg = doc.querySelector("svg");
+    if (!svg) {
+        return { paths: [], size: { width: 0, height: 0 } };
+    }
+    const pathElements = svg.querySelectorAll("path"), paths = [];
+    for (const node of pathElements) {
+        if (!(node instanceof SVGPathElement)) {
+            continue;
+        }
+        paths.push({
+            element: node,
+            length: node.getTotalLength(),
+        });
+    }
+    const size = {
+        width: Number.parseFloat(svg.getAttribute("width") ?? "0"),
+        height: Number.parseFloat(svg.getAttribute("height") ?? "0"),
+    };
+    return {
+        paths,
+        size,
+    };
+}

package/cjs/types.js

@@ -0,0 +1 @@
+export {};

package/dist_browser_SVGPathGenerator_js.js

@@ -4,7 +4,7 @@
  * Demo / Generator : https://particles.js.org/
  * GitHub : https://www.github.com/matteobruni/tsparticles
  * How to use? : Check the GitHub README
- * v4.0.0-alpha.2
+ * v4.0.0-alpha.21
  */
 "use strict";
 /*
@@ -23,7 +23,27 @@
   \******************************************/
 (__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
 
-eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   SVGPathGenerator: () => (/* binding */ SVGPathGenerator)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n\nvar SVGPathDirection;\n(function (SVGPathDirection) {\n  SVGPathDirection[SVGPathDirection[\"normal\"] = 0] = \"normal\";\n  SVGPathDirection[SVGPathDirection[\"reverse\"] = 1] = \"reverse\";\n})(SVGPathDirection || (SVGPathDirection = {}));\nconst defaultSpeed = 1,\n  minStep = 0,\n  minIndex = 0,\n  minWidth = 0,\n  minScale = 1;\nclass SVGPathGenerator {\n  constructor() {\n    this._paths = [];\n    this._reverse = false;\n    this._size = {\n      width: 0,\n      height: 0\n    };\n    this._scale = 1;\n    this._offset = {\n      x: 0,\n      y: 0,\n      mode: _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.PixelMode.percent\n    };\n    this._width = 0;\n  }\n  generate(particle, delta) {\n    const container = particle.container,\n      pxRatio = container.retina.pixelRatio;\n    particle.svgDirection ??= (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRandom)() > _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half ? SVGPathDirection.normal : SVGPathDirection.reverse;\n    particle.svgPathIndex ??= Math.floor((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRandom)() * this._paths.length);\n    particle.svgSpeed ??= particle.velocity.mult((particle.retina.moveSpeed ?? defaultSpeed) * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half).length;\n    particle.svgStep ??= (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.randomInRangeValue)({\n      min: 0,\n      max: this._paths[particle.svgPathIndex].length\n    }) * pxRatio;\n    particle.svgOffset ??= {\n      width: (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.randomInRangeValue)({\n        min: -this._width * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half,\n        max: this._width * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half\n      }) * pxRatio,\n      height: (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.randomInRangeValue)({\n        min: -this._width * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half,\n        max: this._width * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half\n      }) * pxRatio\n    };\n    particle.svgInitialPosition ??= particle.position.copy();\n    particle.velocity.x = 0;\n    particle.velocity.y = 0;\n    if (particle.svgDirection === SVGPathDirection.normal) {\n      particle.svgStep += particle.svgSpeed * delta.factor;\n    } else {\n      particle.svgStep -= particle.svgSpeed * delta.factor;\n    }\n    let path = this._paths[particle.svgPathIndex];\n    const pathLength = path.length,\n      indexOffset = 1;\n    if (particle.svgStep >= pathLength) {\n      particle.svgPathIndex = particle.svgPathIndex + indexOffset;\n      if (particle.svgPathIndex >= this._paths.length) {\n        if (this._reverse) {\n          particle.svgPathIndex = this._paths.length - indexOffset;\n          particle.svgDirection = SVGPathDirection.reverse;\n        } else {\n          particle.svgPathIndex = 0;\n          particle.svgStep = 0;\n        }\n      }\n    } else if (particle.svgStep <= minStep) {\n      particle.svgPathIndex = particle.svgPathIndex - indexOffset;\n      if (particle.svgPathIndex < minIndex) {\n        if (this._reverse) {\n          particle.svgPathIndex = 0;\n          particle.svgDirection = SVGPathDirection.normal;\n        } else {\n          particle.svgPathIndex = this._paths.length - indexOffset;\n          path = this._paths[particle.svgPathIndex];\n          particle.svgStep = path.length;\n        }\n      }\n    }\n    path = this._paths[particle.svgPathIndex];\n    const pathElement = path.element,\n      pos = pathElement.getPointAtLength(particle.svgStep),\n      canvasSize = particle.container.canvas.size,\n      offset = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getPosition)(this._offset, canvasSize),\n      scale = this._scale * pxRatio;\n    particle.position.x = (pos.x - this._size.width * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half) * scale + particle.svgInitialPosition.x + offset.x + particle.svgOffset.width;\n    particle.position.y = (pos.y - this._size.height * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half) * scale + particle.svgInitialPosition.y + offset.y + particle.svgOffset.height;\n    return _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.Vector.origin;\n  }\n  init(container) {\n    const options = container.actualOptions.particles.move.path.options,\n      position = options.position ?? this._offset;\n    this._reverse = options.reverse ?? this._reverse;\n    this._scale = options.scale ?? minScale;\n    this._offset.x = position.x;\n    this._offset.y = position.y;\n    this._offset.mode = position.mode;\n    this._width = options.width ?? minWidth;\n    if (options.url && !options.path) {\n      const url = options.url;\n      void (async () => {\n        const response = await fetch(url),\n          data = await response.text();\n        const parser = new DOMParser(),\n          doc = parser.parseFromString(data, \"image/svg+xml\"),\n          firstIndex = 0,\n          svg = doc.getElementsByTagName(\"svg\")[firstIndex];\n        let svgPaths = svg.getElementsByTagName(\"path\");\n        if (!svgPaths.length) {\n          svgPaths = doc.getElementsByTagName(\"path\");\n        }\n        this._paths = [];\n        for (let i = 0; i < svgPaths.length; i++) {\n          const path = svgPaths.item(i);\n          if (path) {\n            this._paths.push({\n              element: path,\n              length: path.getTotalLength()\n            });\n          }\n        }\n        this._size.height = Number.parseFloat(svg.getAttribute(\"height\") ?? \"0\");\n        this._size.width = Number.parseFloat(svg.getAttribute(\"width\") ?? \"0\");\n      })();\n    } else if (options.path) {\n      const path = options.path;\n      this._paths = [];\n      for (const item of path.data) {\n        const element = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.safeDocument)().createElementNS(\"http://www.w3.org/2000/svg\", \"path\");\n        element.setAttribute(\"d\", item);\n        this._paths.push({\n          element,\n          length: element.getTotalLength()\n        });\n      }\n      this._size.height = path.size.height;\n      this._size.width = path.size.width;\n    }\n  }\n  reset() {}\n  update() {}\n}\n\n//# sourceURL=webpack://@tsparticles/path-svg/./dist/browser/SVGPathGenerator.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   SVGPathGenerator: () => (/* binding */ SVGPathGenerator)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _createSVGPaths_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./createSVGPaths.js */ \"./dist/browser/createSVGPaths.js\");\n/* harmony import */ var _loadSVGFromString_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./loadSVGFromString.js */ \"./dist/browser/loadSVGFromString.js\");\n\n\n\nvar SVGPathDirection;\n(function(SVGPathDirection) {\n    SVGPathDirection[SVGPathDirection[\"normal\"] = 0] = \"normal\";\n    SVGPathDirection[SVGPathDirection[\"reverse\"] = 1] = \"reverse\";\n})(SVGPathDirection || (SVGPathDirection = {}));\nconst defaultSpeed = 1, minStep = 0, minIndex = 0, minWidth = 0, minScale = 1;\nclass SVGPathGenerator {\n    _container;\n    _offset;\n    _paths;\n    _reverse;\n    _scale;\n    _size;\n    _width;\n    constructor(container){\n        this._container = container;\n        this._paths = [];\n        this._reverse = false;\n        this._size = {\n            width: 0,\n            height: 0\n        };\n        this._scale = 1;\n        this._offset = {\n            x: 0,\n            y: 0,\n            mode: _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.PixelMode.percent\n        };\n        this._width = 0;\n    }\n    generate(particle, delta) {\n        const container = this._container, pxRatio = container.retina.pixelRatio;\n        particle.svgDirection ??= (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRandom)() > _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half ? SVGPathDirection.normal : SVGPathDirection.reverse;\n        particle.svgPathIndex ??= Math.floor((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRandom)() * this._paths.length);\n        particle.svgSpeed ??= particle.velocity.mult((particle.retina.moveSpeed ?? defaultSpeed) * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half).length;\n        particle.svgStep ??= (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.randomInRangeValue)({\n            min: 0,\n            max: this._paths[particle.svgPathIndex].length\n        }) * pxRatio;\n        particle.svgOffset ??= {\n            width: (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.randomInRangeValue)({\n                min: -this._width * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half,\n                max: this._width * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half\n            }) * pxRatio,\n            height: (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.randomInRangeValue)({\n                min: -this._width * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half,\n                max: this._width * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half\n            }) * pxRatio\n        };\n        particle.svgInitialPosition ??= particle.position.copy();\n        particle.velocity.x = 0;\n        particle.velocity.y = 0;\n        if (particle.svgDirection === SVGPathDirection.normal) {\n            particle.svgStep += particle.svgSpeed * delta.factor;\n        } else {\n            particle.svgStep -= particle.svgSpeed * delta.factor;\n        }\n        let path = this._paths[particle.svgPathIndex];\n        const pathLength = path.length, indexOffset = 1;\n        if (particle.svgStep >= pathLength) {\n            particle.svgPathIndex = particle.svgPathIndex + indexOffset;\n            if (particle.svgPathIndex >= this._paths.length) {\n                if (this._reverse) {\n                    particle.svgPathIndex = this._paths.length - indexOffset;\n                    particle.svgDirection = SVGPathDirection.reverse;\n                } else {\n                    particle.svgPathIndex = 0;\n                    particle.svgStep = 0;\n                }\n            }\n        } else if (particle.svgStep <= minStep) {\n            particle.svgPathIndex = particle.svgPathIndex - indexOffset;\n            if (particle.svgPathIndex < minIndex) {\n                if (this._reverse) {\n                    particle.svgPathIndex = 0;\n                    particle.svgDirection = SVGPathDirection.normal;\n                } else {\n                    particle.svgPathIndex = this._paths.length - indexOffset;\n                    path = this._paths[particle.svgPathIndex];\n                    particle.svgStep = path.length;\n                }\n            }\n        }\n        path = this._paths[particle.svgPathIndex];\n        const pathElement = path.element, pos = pathElement.getPointAtLength(particle.svgStep), canvasSize = this._container.canvas.size, offset = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getPosition)(this._offset, canvasSize), scale = this._scale * pxRatio;\n        particle.position.x = (pos.x - this._size.width * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half) * scale + particle.svgInitialPosition.x + offset.x + particle.svgOffset.width;\n        particle.position.y = (pos.y - this._size.height * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half) * scale + particle.svgInitialPosition.y + offset.y + particle.svgOffset.height;\n        return _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.Vector.origin;\n    }\n    init() {\n        const options = this._container.actualOptions.particles.move.path.options, position = options.position ?? this._offset;\n        this._reverse = options.reverse ?? this._reverse;\n        this._scale = options.scale ?? minScale;\n        this._offset.x = position.x;\n        this._offset.y = position.y;\n        this._offset.mode = position.mode;\n        this._width = options.width ?? minWidth;\n        if (options.url && !options.path) {\n            const url = options.url;\n            void (async ()=>{\n                const response = await fetch(url), data = await response.text(), { paths, size } = (0,_loadSVGFromString_js__WEBPACK_IMPORTED_MODULE_2__.loadSVGFromString)(data);\n                this._paths = paths;\n                this._size.width = size.width;\n                this._size.height = size.height;\n            })();\n        } else if (options.path) {\n            const path = options.path;\n            this._paths = (0,_createSVGPaths_js__WEBPACK_IMPORTED_MODULE_1__.createSVGPaths)(options.path.data);\n            this._size.height = path.size.height;\n            this._size.width = path.size.width;\n        }\n    }\n    reset() {}\n    update() {}\n}\n\n\n//# sourceURL=webpack://@tsparticles/path-svg/./dist/browser/SVGPathGenerator.js?\n}");
+
+/***/ },
+
+/***/ "./dist/browser/createSVGPaths.js"
+/*!****************************************!*\
+  !*** ./dist/browser/createSVGPaths.js ***!
+  \****************************************/
+(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
+
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   createSVGPaths: () => (/* binding */ createSVGPaths)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n\nfunction createSVGPaths(data) {\n    const doc = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.safeDocument)();\n    return data.map((d)=>{\n        const element = doc.createElementNS(\"http://www.w3.org/2000/svg\", \"path\");\n        element.setAttribute(\"d\", d);\n        return {\n            element,\n            length: element.getTotalLength()\n        };\n    });\n}\n\n\n//# sourceURL=webpack://@tsparticles/path-svg/./dist/browser/createSVGPaths.js?\n}");
+
+/***/ },
+
+/***/ "./dist/browser/loadSVGFromString.js"
+/*!*******************************************!*\
+  !*** ./dist/browser/loadSVGFromString.js ***!
+  \*******************************************/
+(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
+
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   loadSVGFromString: () => (/* binding */ loadSVGFromString)\n/* harmony export */ });\nfunction loadSVGFromString(svgText) {\n    const parser = new DOMParser(), doc = parser.parseFromString(svgText, \"image/svg+xml\"), svg = doc.querySelector(\"svg\");\n    if (!svg) {\n        return {\n            paths: [],\n            size: {\n                width: 0,\n                height: 0\n            }\n        };\n    }\n    const pathElements = svg.querySelectorAll(\"path\"), paths = [];\n    for (const node of pathElements){\n        if (!(node instanceof SVGPathElement)) {\n            continue;\n        }\n        paths.push({\n            element: node,\n            length: node.getTotalLength()\n        });\n    }\n    const size = {\n        width: Number.parseFloat(svg.getAttribute(\"width\") ?? \"0\"),\n        height: Number.parseFloat(svg.getAttribute(\"height\") ?? \"0\")\n    };\n    return {\n        paths,\n        size\n    };\n}\n\n\n//# sourceURL=webpack://@tsparticles/path-svg/./dist/browser/loadSVGFromString.js?\n}");
 
 /***/ }
 

package/esm/SVGPathGenerator.js

@@ -1,4 +1,6 @@
-import { PixelMode, Vector, getPosition, getRandom, half, randomInRangeValue, safeDocument, } from "@tsparticles/engine";
+import { PixelMode, Vector, getPosition, getRandom, half, randomInRangeValue, } from "@tsparticles/engine";
+import { createSVGPaths } from "./createSVGPaths.js";
+import { loadSVGFromString } from "./loadSVGFromString.js";
 var SVGPathDirection;
 (function (SVGPathDirection) {
     SVGPathDirection[SVGPathDirection["normal"] = 0] = "normal";
@@ -6,7 +8,15 @@ var SVGPathDirection;
 })(SVGPathDirection || (SVGPathDirection = {}));
 const defaultSpeed = 1, minStep = 0, minIndex = 0, minWidth = 0, minScale = 1;
 export class SVGPathGenerator {
-    constructor() {
+    _container;
+    _offset;
+    _paths;
+    _reverse;
+    _scale;
+    _size;
+    _width;
+    constructor(container) {
+        this._container = container;
         this._paths = [];
         this._reverse = false;
         this._size = { width: 0, height: 0 };
@@ -15,7 +25,7 @@ export class SVGPathGenerator {
         this._width = 0;
     }
     generate(particle, delta) {
-        const container = particle.container, pxRatio = container.retina.pixelRatio;
+        const container = this._container, pxRatio = container.retina.pixelRatio;
         particle.svgDirection ??= getRandom() > half ? SVGPathDirection.normal : SVGPathDirection.reverse;
         particle.svgPathIndex ??= Math.floor(getRandom() * this._paths.length);
         particle.svgSpeed ??= particle.velocity.mult((particle.retina.moveSpeed ?? defaultSpeed) * half).length;
@@ -63,21 +73,15 @@ export class SVGPathGenerator {
             }
         }
         path = this._paths[particle.svgPathIndex];
-        const pathElement = path.element, pos = pathElement.getPointAtLength(particle.svgStep), canvasSize = particle.container.canvas.size, offset = getPosition(this._offset, canvasSize), scale = this._scale * pxRatio;
+        const pathElement = path.element, pos = pathElement.getPointAtLength(particle.svgStep), canvasSize = this._container.canvas.size, offset = getPosition(this._offset, canvasSize), scale = this._scale * pxRatio;
         particle.position.x =
-            (pos.x - this._size.width * half) * scale +
-                particle.svgInitialPosition.x +
-                offset.x +
-                particle.svgOffset.width;
+            (pos.x - this._size.width * half) * scale + particle.svgInitialPosition.x + offset.x + particle.svgOffset.width;
         particle.position.y =
-            (pos.y - this._size.height * half) * scale +
-                particle.svgInitialPosition.y +
-                offset.y +
-                particle.svgOffset.height;
+            (pos.y - this._size.height * half) * scale + particle.svgInitialPosition.y + offset.y + particle.svgOffset.height;
         return Vector.origin;
     }
-    init(container) {
-        const options = container.actualOptions.particles.move.path.options, position = options.position ?? this._offset;
+    init() {
+        const options = this._container.actualOptions.particles.move.path.options, position = options.position ?? this._offset;
         this._reverse = options.reverse ?? this._reverse;
         this._scale = options.scale ?? minScale;
         this._offset.x = position.x;
@@ -87,37 +91,15 @@ export class SVGPathGenerator {
         if (options.url && !options.path) {
             const url = options.url;
             void (async () => {
-                const response = await fetch(url), data = await response.text();
-                const parser = new DOMParser(), doc = parser.parseFromString(data, "image/svg+xml"), firstIndex = 0, svg = doc.getElementsByTagName("svg")[firstIndex];
-                let svgPaths = svg.getElementsByTagName("path");
-                if (!svgPaths.length) {
-                    svgPaths = doc.getElementsByTagName("path");
-                }
-                this._paths = [];
-                for (let i = 0; i < svgPaths.length; i++) {
-                    const path = svgPaths.item(i);
-                    if (path) {
-                        this._paths.push({
-                            element: path,
-                            length: path.getTotalLength(),
-                        });
-                    }
-                }
-                this._size.height = Number.parseFloat(svg.getAttribute("height") ?? "0");
-                this._size.width = Number.parseFloat(svg.getAttribute("width") ?? "0");
+                const response = await fetch(url), data = await response.text(), { paths, size } = loadSVGFromString(data);
+                this._paths = paths;
+                this._size.width = size.width;
+                this._size.height = size.height;
             })();
         }
         else if (options.path) {
             const path = options.path;
-            this._paths = [];
-            for (const item of path.data) {
-                const element = safeDocument().createElementNS("http://www.w3.org/2000/svg", "path");
-                element.setAttribute("d", item);
-                this._paths.push({
-                    element,
-                    length: element.getTotalLength(),
-                });
-            }
+            this._paths = createSVGPaths(options.path.data);
             this._size.height = path.size.height;
             this._size.width = path.size.width;
         }

package/esm/createSVGPaths.js

@@ -0,0 +1,12 @@
+import { safeDocument } from "@tsparticles/engine";
+export function createSVGPaths(data) {
+    const doc = safeDocument();
+    return data.map(d => {
+        const element = doc.createElementNS("http://www.w3.org/2000/svg", "path");
+        element.setAttribute("d", d);
+        return {
+            element,
+            length: element.getTotalLength(),
+        };
+    });
+}

package/esm/index.js

@@ -1,8 +1,10 @@
 export const svgPathName = "svgPathGenerator";
-export function loadSVGPath(engine) {
-    engine.checkVersion("4.0.0-alpha.2");
-    engine.register(async (e) => {
-        const { SVGPathGenerator } = await import("./SVGPathGenerator.js");
-        e.addPathGenerator(svgPathName, new SVGPathGenerator());
+export async function loadSVGPath(engine) {
+    engine.checkVersion("4.0.0-alpha.21");
+    await engine.register(e => {
+        e.addPathGenerator(svgPathName, async (container) => {
+            const { SVGPathGenerator } = await import("./SVGPathGenerator.js");
+            return new SVGPathGenerator(container);
+        });
     });
 }

package/esm/loadSVGFromString.js

@@ -0,0 +1,24 @@
+export function loadSVGFromString(svgText) {
+    const parser = new DOMParser(), doc = parser.parseFromString(svgText, "image/svg+xml"), svg = doc.querySelector("svg");
+    if (!svg) {
+        return { paths: [], size: { width: 0, height: 0 } };
+    }
+    const pathElements = svg.querySelectorAll("path"), paths = [];
+    for (const node of pathElements) {
+        if (!(node instanceof SVGPathElement)) {
+            continue;
+        }
+        paths.push({
+            element: node,
+            length: node.getTotalLength(),
+        });
+    }
+    const size = {
+        width: Number.parseFloat(svg.getAttribute("width") ?? "0"),
+        height: Number.parseFloat(svg.getAttribute("height") ?? "0"),
+    };
+    return {
+        paths,
+        size,
+    };
+}

package/esm/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsparticles/path-svg",
-  "version": "4.0.0-alpha.2",
+  "version": "4.0.0-alpha.21",
   "description": "tsParticles svg path",
   "homepage": "https://particles.js.org",
   "repository": {
@@ -101,7 +101,7 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@tsparticles/engine": "4.0.0-alpha.2"
+    "@tsparticles/engine": "4.0.0-alpha.21"
   },
   "publishConfig": {
     "access": "public"