@tsparticles/path-svg 3.0.0-beta.0

package/tsparticles.path.svg.js

@@ -0,0 +1,263 @@
+/*!
+ * Author : Matteo Bruni
+ * MIT license: https://opensource.org/licenses/MIT
+ * Demo / Generator : https://particles.js.org/
+ * GitHub : https://www.github.com/matteobruni/tsparticles
+ * How to use? : Check the GitHub README
+ * v3.0.0-beta.0
+ */
+(function webpackUniversalModuleDefinition(root, factory) {
+	if(typeof exports === 'object' && typeof module === 'object')
+		module.exports = factory(require("@tsparticles/engine"));
+	else if(typeof define === 'function' && define.amd)
+		define(["@tsparticles/engine"], factory);
+	else {
+		var a = typeof exports === 'object' ? factory(require("@tsparticles/engine")) : factory(root["window"]);
+		for(var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i];
+	}
+})(this, (__WEBPACK_EXTERNAL_MODULE__533__) => {
+return /******/ (() => { // webpackBootstrap
+/******/ 	"use strict";
+/******/ 	var __webpack_modules__ = ({
+
+/***/ 533:
+/***/ ((module) => {
+
+module.exports = __WEBPACK_EXTERNAL_MODULE__533__;
+
+/***/ })
+
+/******/ 	});
+/************************************************************************/
+/******/ 	// The module cache
+/******/ 	var __webpack_module_cache__ = {};
+/******/ 	
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/ 		// Check if module is in cache
+/******/ 		var cachedModule = __webpack_module_cache__[moduleId];
+/******/ 		if (cachedModule !== undefined) {
+/******/ 			return cachedModule.exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = __webpack_module_cache__[moduleId] = {
+/******/ 			// no module.id needed
+/******/ 			// no module.loaded needed
+/******/ 			exports: {}
+/******/ 		};
+/******/ 	
+/******/ 		// Execute the module function
+/******/ 		__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+/******/ 	
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/ 	
+/************************************************************************/
+/******/ 	/* webpack/runtime/define property getters */
+/******/ 	(() => {
+/******/ 		// define getter functions for harmony exports
+/******/ 		__webpack_require__.d = (exports, definition) => {
+/******/ 			for(var key in definition) {
+/******/ 				if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
+/******/ 					Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
+/******/ 				}
+/******/ 			}
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/hasOwnProperty shorthand */
+/******/ 	(() => {
+/******/ 		__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/make namespace object */
+/******/ 	(() => {
+/******/ 		// define __esModule on exports
+/******/ 		__webpack_require__.r = (exports) => {
+/******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 			}
+/******/ 			Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/************************************************************************/
+var __webpack_exports__ = {};
+// This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
+(() => {
+// ESM COMPAT FLAG
+__webpack_require__.r(__webpack_exports__);
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  loadSVGPath: () => (/* binding */ loadSVGPath),
+  svgPathName: () => (/* binding */ svgPathName)
+});
+
+// EXTERNAL MODULE: external {"commonjs":"@tsparticles/engine","commonjs2":"@tsparticles/engine","amd":"@tsparticles/engine","root":"window"}
+var engine_root_window_ = __webpack_require__(533);
+;// CONCATENATED MODULE: ./dist/browser/SVGPathGenerator.js
+
+class SVGPathGenerator {
+  constructor() {
+    this._paths = [];
+    this._reverse = false;
+    this._size = {
+      width: 0,
+      height: 0
+    };
+    this._scale = 1;
+    this._offset = {
+      x: 0,
+      y: 0,
+      mode: "percent"
+    };
+    this._width = 0;
+  }
+  generate(particle, delta) {
+    const container = particle.container,
+      pxRatio = container.retina.pixelRatio;
+    if (particle.svgDirection === undefined) {
+      particle.svgDirection = (0,engine_root_window_.getRandom)() > 0.5 ? 0 : 1;
+    }
+    if (particle.svgPathIndex === undefined) {
+      particle.svgPathIndex = Math.floor(Math.random() * this._paths.length);
+    }
+    if (particle.svgSpeed === undefined) {
+      particle.svgSpeed = particle.velocity.mult((particle.retina.moveSpeed ?? 1) / 2).length;
+    }
+    if (particle.svgStep === undefined) {
+      particle.svgStep = (0,engine_root_window_.randomInRange)({
+        min: 0,
+        max: this._paths[particle.svgPathIndex].length
+      }) * pxRatio;
+    }
+    if (particle.svgOffset === undefined) {
+      particle.svgOffset = {
+        width: (0,engine_root_window_.randomInRange)({
+          min: -this._width / 2,
+          max: this._width / 2
+        }) * pxRatio,
+        height: (0,engine_root_window_.randomInRange)({
+          min: -this._width / 2,
+          max: this._width / 2
+        }) * pxRatio
+      };
+    }
+    if (particle.svgInitialPosition === undefined) {
+      particle.svgInitialPosition = {
+        ...particle.position
+      };
+    }
+    particle.velocity.x = 0;
+    particle.velocity.y = 0;
+    if (particle.svgDirection === 0) {
+      particle.svgStep += particle.svgSpeed * delta.factor;
+    } else {
+      particle.svgStep -= particle.svgSpeed * delta.factor;
+    }
+    let path = this._paths[particle.svgPathIndex];
+    if (path) {
+      const pathLength = path.length;
+      if (particle.svgStep >= pathLength) {
+        particle.svgPathIndex = particle.svgPathIndex + 1;
+        if (particle.svgPathIndex >= this._paths.length) {
+          if (this._reverse) {
+            particle.svgPathIndex = this._paths.length - 1;
+            particle.svgDirection = 1;
+          } else {
+            particle.svgPathIndex = 0;
+            particle.svgStep = 0;
+          }
+        }
+      } else if (particle.svgStep <= 0) {
+        particle.svgPathIndex = particle.svgPathIndex - 1;
+        if (particle.svgPathIndex < 0) {
+          if (this._reverse) {
+            particle.svgPathIndex = 0;
+            particle.svgDirection = 0;
+          } else {
+            particle.svgPathIndex = this._paths.length - 1;
+            path = this._paths[particle.svgPathIndex];
+            particle.svgStep = path.length;
+          }
+        }
+      }
+      path = this._paths[particle.svgPathIndex];
+    }
+    if (path) {
+      const pathElement = path.element,
+        pos = pathElement.getPointAtLength(particle.svgStep),
+        canvasSize = particle.container.canvas.size,
+        offset = (0,engine_root_window_.getPosition)(this._offset, canvasSize),
+        scale = this._scale * pxRatio;
+      particle.position.x = (pos.x - this._size.width / 2) * scale + particle.svgInitialPosition.x + offset.x + particle.svgOffset.width;
+      particle.position.y = (pos.y - this._size.height / 2) * scale + particle.svgInitialPosition.y + offset.y + particle.svgOffset.height;
+    }
+    return engine_root_window_.Vector.origin;
+  }
+  init(container) {
+    const options = container.actualOptions.particles.move.path.options,
+      position = options.position ?? this._offset;
+    this._reverse = options.reverse ?? this._reverse;
+    this._scale = options.scale ?? 1;
+    this._offset.x = position.x;
+    this._offset.y = position.y;
+    this._offset.mode = position.mode;
+    this._width = options.width ?? 0;
+    if (options.url && !options.path) {
+      const url = options.url;
+      (async () => {
+        const response = await fetch(url),
+          data = await response.text();
+        const parser = new DOMParser(),
+          doc = parser.parseFromString(data, "image/svg+xml"),
+          svg = doc.getElementsByTagName("svg")[0];
+        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 = parseFloat(svg.getAttribute("height") ?? "0");
+        this._size.width = parseFloat(svg.getAttribute("width") ?? "0");
+      })();
+    } else if (options.path) {
+      const path = options.path;
+      this._paths = [];
+      for (const item of path.data) {
+        const element = document.createElementNS("http://www.w3.org/2000/svg", "path");
+        element.setAttribute("d", item);
+        this._paths.push({
+          element,
+          length: element.getTotalLength()
+        });
+      }
+      this._size.height = path.size.height;
+      this._size.width = path.size.width;
+    }
+  }
+  reset() {}
+  update() {}
+}
+;// CONCATENATED MODULE: ./dist/browser/index.js
+
+const svgPathName = "svgPathGenerator";
+async function loadSVGPath(engine, refresh = true) {
+  await engine.addPathGenerator(svgPathName, new SVGPathGenerator(), refresh);
+}
+})();
+
+/******/ 	return __webpack_exports__;
+/******/ })()
+;
+});

package/tsparticles.path.svg.min.js

@@ -0,0 +1,2 @@
+/*! For license information please see tsparticles.path.svg.min.js.LICENSE.txt */
+!function(t,e){if("object"==typeof exports&&"object"==typeof module)module.exports=e(require("@tsparticles/engine"));else if("function"==typeof define&&define.amd)define(["@tsparticles/engine"],e);else{var s="object"==typeof exports?e(require("@tsparticles/engine")):e(t.window);for(var i in s)("object"==typeof exports?exports:t)[i]=s[i]}}(this,(t=>(()=>{"use strict";var e={533:e=>{e.exports=t}},s={};function i(t){var n=s[t];if(void 0!==n)return n.exports;var h=s[t]={exports:{}};return e[t](h,h.exports,i),h.exports}i.d=(t,e)=>{for(var s in e)i.o(e,s)&&!i.o(t,s)&&Object.defineProperty(t,s,{enumerable:!0,get:e[s]})},i.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),i.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};var n={};return(()=>{i.r(n),i.d(n,{loadSVGPath:()=>h,svgPathName:()=>s});var t=i(533);class e{constructor(){this._paths=[],this._reverse=!1,this._size={width:0,height:0},this._scale=1,this._offset={x:0,y:0,mode:"percent"},this._width=0}generate(e,s){const i=e.container.retina.pixelRatio;void 0===e.svgDirection&&(e.svgDirection=(0,t.getRandom)()>.5?0:1),void 0===e.svgPathIndex&&(e.svgPathIndex=Math.floor(Math.random()*this._paths.length)),void 0===e.svgSpeed&&(e.svgSpeed=e.velocity.mult((e.retina.moveSpeed??1)/2).length),void 0===e.svgStep&&(e.svgStep=(0,t.randomInRange)({min:0,max:this._paths[e.svgPathIndex].length})*i),void 0===e.svgOffset&&(e.svgOffset={width:(0,t.randomInRange)({min:-this._width/2,max:this._width/2})*i,height:(0,t.randomInRange)({min:-this._width/2,max:this._width/2})*i}),void 0===e.svgInitialPosition&&(e.svgInitialPosition={...e.position}),e.velocity.x=0,e.velocity.y=0,0===e.svgDirection?e.svgStep+=e.svgSpeed*s.factor:e.svgStep-=e.svgSpeed*s.factor;let n=this._paths[e.svgPathIndex];if(n){const t=n.length;e.svgStep>=t?(e.svgPathIndex=e.svgPathIndex+1,e.svgPathIndex>=this._paths.length&&(this._reverse?(e.svgPathIndex=this._paths.length-1,e.svgDirection=1):(e.svgPathIndex=0,e.svgStep=0))):e.svgStep<=0&&(e.svgPathIndex=e.svgPathIndex-1,e.svgPathIndex<0&&(this._reverse?(e.svgPathIndex=0,e.svgDirection=0):(e.svgPathIndex=this._paths.length-1,n=this._paths[e.svgPathIndex],e.svgStep=n.length))),n=this._paths[e.svgPathIndex]}if(n){const s=n.element.getPointAtLength(e.svgStep),h=e.container.canvas.size,o=(0,t.getPosition)(this._offset,h),a=this._scale*i;e.position.x=(s.x-this._size.width/2)*a+e.svgInitialPosition.x+o.x+e.svgOffset.width,e.position.y=(s.y-this._size.height/2)*a+e.svgInitialPosition.y+o.y+e.svgOffset.height}return t.Vector.origin}init(t){const e=t.actualOptions.particles.move.path.options,s=e.position??this._offset;if(this._reverse=e.reverse??this._reverse,this._scale=e.scale??1,this._offset.x=s.x,this._offset.y=s.y,this._offset.mode=s.mode,this._width=e.width??0,e.url&&!e.path){const t=e.url;(async()=>{const e=await fetch(t),s=await e.text(),i=(new DOMParser).parseFromString(s,"image/svg+xml"),n=i.getElementsByTagName("svg")[0];let h=n.getElementsByTagName("path");h.length||(h=i.getElementsByTagName("path")),this._paths=[];for(let t=0;t<h.length;t++){const e=h.item(t);e&&this._paths.push({element:e,length:e.getTotalLength()})}this._size.height=parseFloat(n.getAttribute("height")??"0"),this._size.width=parseFloat(n.getAttribute("width")??"0")})()}else if(e.path){const t=e.path;this._paths=[];for(const e of t.data){const t=document.createElementNS("http://www.w3.org/2000/svg","path");t.setAttribute("d",e),this._paths.push({element:t,length:t.getTotalLength()})}this._size.height=t.size.height,this._size.width=t.size.width}}reset(){}update(){}}const s="svgPathGenerator";async function h(t,i=!0){await t.addPathGenerator(s,new e,i)}})(),n})()));

package/tsparticles.path.svg.min.js.LICENSE.txt

@@ -0,0 +1 @@
+/*! tsParticles SVG Path v3.0.0-beta.0 by Matteo Bruni */

package/types/SVGPathGenerator.d.ts

@@ -0,0 +1,32 @@
+import { type Container, type ICoordinates, type IDelta, type IDimension, type IMovePathGenerator, type Particle, Vector } from "@tsparticles/engine";
+declare global {
+    interface Window {
+        [key: string]: unknown;
+    }
+}
+declare const enum SVGPathDirection {
+    normal = 0,
+    reverse = 1
+}
+type SVGPathParticle = Particle & {
+    svgDirection?: SVGPathDirection;
+    svgInitialPosition?: ICoordinates;
+    svgOffset?: IDimension;
+    svgPathIndex?: number;
+    svgSpeed?: number;
+    svgStep?: number;
+};
+export declare class SVGPathGenerator implements IMovePathGenerator {
+    private readonly _offset;
+    private _paths;
+    private _reverse;
+    private _scale;
+    private readonly _size;
+    private _width;
+    constructor();
+    generate(particle: SVGPathParticle, delta: IDelta): Vector;
+    init(container: Container): void;
+    reset(): void;
+    update(): void;
+}
+export {};

package/types/index.d.ts

@@ -0,0 +1,3 @@
+import type { Engine } from "@tsparticles/engine";
+export declare const svgPathName = "svgPathGenerator";
+export declare function loadSVGPath(engine: Engine, refresh?: boolean): Promise<void>;

package/umd/SVGPathGenerator.js

@@ -0,0 +1,153 @@
+(function (factory) {
+    if (typeof module === "object" && typeof module.exports === "object") {
+        var v = factory(require, exports);
+        if (v !== undefined) module.exports = v;
+    }
+    else if (typeof define === "function" && define.amd) {
+        define(["require", "exports", "@tsparticles/engine"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.SVGPathGenerator = void 0;
+    const engine_1 = require("@tsparticles/engine");
+    class SVGPathGenerator {
+        constructor() {
+            this._paths = [];
+            this._reverse = false;
+            this._size = { width: 0, height: 0 };
+            this._scale = 1;
+            this._offset = { x: 0, y: 0, mode: "percent" };
+            this._width = 0;
+        }
+        generate(particle, delta) {
+            const container = particle.container, pxRatio = container.retina.pixelRatio;
+            if (particle.svgDirection === undefined) {
+                particle.svgDirection = (0, engine_1.getRandom)() > 0.5 ? 0 : 1;
+            }
+            if (particle.svgPathIndex === undefined) {
+                particle.svgPathIndex = Math.floor(Math.random() * this._paths.length);
+            }
+            if (particle.svgSpeed === undefined) {
+                particle.svgSpeed = particle.velocity.mult((particle.retina.moveSpeed ?? 1) / 2).length;
+            }
+            if (particle.svgStep === undefined) {
+                particle.svgStep = (0, engine_1.randomInRange)({ min: 0, max: this._paths[particle.svgPathIndex].length }) * pxRatio;
+            }
+            if (particle.svgOffset === undefined) {
+                particle.svgOffset = {
+                    width: (0, engine_1.randomInRange)({ min: -this._width / 2, max: this._width / 2 }) * pxRatio,
+                    height: (0, engine_1.randomInRange)({ min: -this._width / 2, max: this._width / 2 }) * pxRatio,
+                };
+            }
+            if (particle.svgInitialPosition === undefined) {
+                particle.svgInitialPosition = { ...particle.position };
+            }
+            particle.velocity.x = 0;
+            particle.velocity.y = 0;
+            if (particle.svgDirection === 0) {
+                particle.svgStep += particle.svgSpeed * delta.factor;
+            }
+            else {
+                particle.svgStep -= particle.svgSpeed * delta.factor;
+            }
+            let path = this._paths[particle.svgPathIndex];
+            if (path) {
+                const pathLength = path.length;
+                if (particle.svgStep >= pathLength) {
+                    particle.svgPathIndex = particle.svgPathIndex + 1;
+                    if (particle.svgPathIndex >= this._paths.length) {
+                        if (this._reverse) {
+                            particle.svgPathIndex = this._paths.length - 1;
+                            particle.svgDirection = 1;
+                        }
+                        else {
+                            particle.svgPathIndex = 0;
+                            particle.svgStep = 0;
+                        }
+                    }
+                }
+                else if (particle.svgStep <= 0) {
+                    particle.svgPathIndex = particle.svgPathIndex - 1;
+                    if (particle.svgPathIndex < 0) {
+                        if (this._reverse) {
+                            particle.svgPathIndex = 0;
+                            particle.svgDirection = 0;
+                        }
+                        else {
+                            particle.svgPathIndex = this._paths.length - 1;
+                            path = this._paths[particle.svgPathIndex];
+                            particle.svgStep = path.length;
+                        }
+                    }
+                }
+                path = this._paths[particle.svgPathIndex];
+            }
+            if (path) {
+                const pathElement = path.element, pos = pathElement.getPointAtLength(particle.svgStep), canvasSize = particle.container.canvas.size, offset = (0, engine_1.getPosition)(this._offset, canvasSize), scale = this._scale * pxRatio;
+                particle.position.x =
+                    (pos.x - this._size.width / 2) * scale +
+                        particle.svgInitialPosition.x +
+                        offset.x +
+                        particle.svgOffset.width;
+                particle.position.y =
+                    (pos.y - this._size.height / 2) * scale +
+                        particle.svgInitialPosition.y +
+                        offset.y +
+                        particle.svgOffset.height;
+            }
+            return engine_1.Vector.origin;
+        }
+        init(container) {
+            const options = container.actualOptions.particles.move.path.options, position = options.position ?? this._offset;
+            this._reverse = options.reverse ?? this._reverse;
+            this._scale = options.scale ?? 1;
+            this._offset.x = position.x;
+            this._offset.y = position.y;
+            this._offset.mode = position.mode;
+            this._width = options.width ?? 0;
+            if (options.url && !options.path) {
+                const url = options.url;
+                (async () => {
+                    const response = await fetch(url), data = await response.text();
+                    const parser = new DOMParser(), doc = parser.parseFromString(data, "image/svg+xml"), svg = doc.getElementsByTagName("svg")[0];
+                    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 = parseFloat(svg.getAttribute("height") ?? "0");
+                    this._size.width = parseFloat(svg.getAttribute("width") ?? "0");
+                })();
+            }
+            else if (options.path) {
+                const path = options.path;
+                this._paths = [];
+                for (const item of path.data) {
+                    const element = document.createElementNS("http://www.w3.org/2000/svg", "path");
+                    element.setAttribute("d", item);
+                    this._paths.push({
+                        element,
+                        length: element.getTotalLength(),
+                    });
+                }
+                this._size.height = path.size.height;
+                this._size.width = path.size.width;
+            }
+        }
+        reset() {
+        }
+        update() {
+        }
+    }
+    exports.SVGPathGenerator = SVGPathGenerator;
+});

package/umd/index.js

@@ -0,0 +1,19 @@
+(function (factory) {
+    if (typeof module === "object" && typeof module.exports === "object") {
+        var v = factory(require, exports);
+        if (v !== undefined) module.exports = v;
+    }
+    else if (typeof define === "function" && define.amd) {
+        define(["require", "exports", "./SVGPathGenerator"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.loadSVGPath = exports.svgPathName = void 0;
+    const SVGPathGenerator_1 = require("./SVGPathGenerator");
+    exports.svgPathName = "svgPathGenerator";
+    async function loadSVGPath(engine, refresh = true) {
+        await engine.addPathGenerator(exports.svgPathName, new SVGPathGenerator_1.SVGPathGenerator(), refresh);
+    }
+    exports.loadSVGPath = loadSVGPath;
+});