@tsparticles/path-svg
Version:
tsParticles svg path
138 lines (128 loc) • 13.6 kB
JavaScript
/*!
* 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.9.1
*/
/*
* ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
* This devtool is neither made for production nor for readable output files.
* It uses "eval()" calls to create a separate source file in the browser devtools.
* If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
* or disable the default devtool with "devtool: false".
* If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
*/
(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__tsparticles_engine__) => {
return /******/ (() => { // webpackBootstrap
/******/ "use strict";
/******/ var __webpack_modules__ = ({
/***/ "./dist/browser/SVGPathGenerator.js":
/*!******************************************!*\
!*** ./dist/browser/SVGPathGenerator.js ***!
\******************************************/
/***/ ((__unused_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/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__);\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 if (particle.svgDirection === undefined) {\n particle.svgDirection = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRandom)() > _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half ? SVGPathDirection.normal : SVGPathDirection.reverse;\n }\n if (particle.svgPathIndex === undefined) {\n particle.svgPathIndex = Math.floor((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRandom)() * this._paths.length);\n }\n if (particle.svgSpeed === undefined) {\n particle.svgSpeed = particle.velocity.mult((particle.retina.moveSpeed ?? defaultSpeed) * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half).length;\n }\n if (particle.svgStep === undefined) {\n particle.svgStep = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.randomInRange)({\n min: 0,\n max: this._paths[particle.svgPathIndex].length\n }) * pxRatio;\n }\n if (particle.svgOffset === undefined) {\n particle.svgOffset = {\n width: (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.randomInRange)({\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__.randomInRange)({\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 }\n if (particle.svgInitialPosition === undefined) {\n particle.svgInitialPosition = {\n ...particle.position\n };\n }\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 if (path) {\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 }\n if (path) {\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 }\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 = parseFloat(svg.getAttribute(\"height\") ?? \"0\");\n this._size.width = 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 = document.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}");
/***/ }),
/***/ "./dist/browser/index.js":
/*!*******************************!*\
!*** ./dist/browser/index.js ***!
\*******************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ loadSVGPath: () => (/* binding */ loadSVGPath),\n/* harmony export */ svgPathName: () => (/* binding */ svgPathName)\n/* harmony export */ });\n/* harmony import */ var _SVGPathGenerator_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./SVGPathGenerator.js */ \"./dist/browser/SVGPathGenerator.js\");\n\nconst svgPathName = \"svgPathGenerator\";\nasync function loadSVGPath(engine, refresh = true) {\n engine.checkVersion(\"3.9.1\");\n await engine.addPathGenerator(svgPathName, new _SVGPathGenerator_js__WEBPACK_IMPORTED_MODULE_0__.SVGPathGenerator(), refresh);\n}\n\n//# sourceURL=webpack://@tsparticles/path-svg/./dist/browser/index.js?\n}");
/***/ }),
/***/ "@tsparticles/engine":
/*!*********************************************************************************************************************************!*\
!*** external {"commonjs":"@tsparticles/engine","commonjs2":"@tsparticles/engine","amd":"@tsparticles/engine","root":"window"} ***!
\*********************************************************************************************************************************/
/***/ ((module) => {
module.exports = __WEBPACK_EXTERNAL_MODULE__tsparticles_engine__;
/***/ })
/******/ });
/************************************************************************/
/******/ // 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/compat get default export */
/******/ (() => {
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = (module) => {
/******/ var getter = module && module.__esModule ?
/******/ () => (module['default']) :
/******/ () => (module);
/******/ __webpack_require__.d(getter, { a: getter });
/******/ return getter;
/******/ };
/******/ })();
/******/
/******/ /* 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 });
/******/ };
/******/ })();
/******/
/************************************************************************/
/******/
/******/ // startup
/******/ // Load entry module and return exports
/******/ // This entry module can't be inlined because the eval devtool is used.
/******/ var __webpack_exports__ = __webpack_require__("./dist/browser/index.js");
/******/
/******/ return __webpack_exports__;
/******/ })()
;
});