@tsparticles/effect-trail 3.0.0-beta.4

package/tsparticles.effect.trail.js

@@ -0,0 +1,167 @@
+/*!
+ * 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.4
+ */
+(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__, {
+  loadTrailEffect: () => (/* binding */ loadTrailEffect)
+});
+
+// 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/TrailDrawer.js
+
+class TrailDrawer {
+  draw(data) {
+    const {
+        context,
+        radius,
+        particle
+      } = data,
+      pxRatio = particle.container.retina.pixelRatio,
+      currentPos = particle.getPosition();
+    if (!particle.trail || !particle.trailLength) {
+      return;
+    }
+    const pathLength = particle.trailLength;
+    particle.trail.push({
+      color: context.fillStyle ?? context.strokeStyle,
+      position: {
+        x: currentPos.x,
+        y: currentPos.y
+      }
+    });
+    if (particle.trail.length < 2) {
+      return;
+    }
+    if (particle.trail.length > pathLength) {
+      particle.trail.shift();
+    }
+    const trailLength = Math.min(particle.trail.length, pathLength),
+      offsetPos = {
+        x: currentPos.x,
+        y: currentPos.y
+      };
+    let lastPos = particle.trail[trailLength - 1].position;
+    for (let i = trailLength; i > 0; i--) {
+      const step = particle.trail[i - 1],
+        position = step.position;
+      if ((0,engine_root_window_.getDistance)(lastPos, position) > radius * 2) {
+        continue;
+      }
+      context.beginPath();
+      context.moveTo(lastPos.x - offsetPos.x, lastPos.y - offsetPos.y);
+      context.lineTo(position.x - offsetPos.x, position.y - offsetPos.y);
+      const width = Math.max(i / trailLength * radius * 2, pxRatio, particle.trailMinWidth ?? -1);
+      context.lineWidth = particle.trailMaxWidth ? Math.min(width, particle.trailMaxWidth) : width;
+      context.strokeStyle = step.color;
+      context.stroke();
+      lastPos = position;
+    }
+  }
+  particleInit(container, particle) {
+    particle.trail = [];
+    const effectData = particle.effectData;
+    particle.trailLength = (0,engine_root_window_.getRangeValue)(effectData?.length ?? 10) * container.retina.pixelRatio;
+    particle.trailMaxWidth = effectData?.maxWidth ? (0,engine_root_window_.getRangeValue)(effectData.maxWidth) * container.retina.pixelRatio : undefined;
+    particle.trailMinWidth = effectData?.minWidth ? (0,engine_root_window_.getRangeValue)(effectData.minWidth) * container.retina.pixelRatio : undefined;
+  }
+}
+;// CONCATENATED MODULE: ./dist/browser/index.js
+
+async function loadTrailEffect(engine, refresh = true) {
+  await engine.addEffect("trail", new TrailDrawer(), refresh);
+}
+})();
+
+/******/ 	return __webpack_exports__;
+/******/ })()
+;
+});

package/tsparticles.effect.trail.min.js

@@ -0,0 +1,2 @@
+/*! For license information please see tsparticles.effect.trail.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 i="object"==typeof exports?e(require("@tsparticles/engine")):e(t.window);for(var r in i)("object"==typeof exports?exports:t)[r]=i[r]}}(this,(t=>(()=>{"use strict";var e={533:e=>{e.exports=t}},i={};function r(t){var o=i[t];if(void 0!==o)return o.exports;var a=i[t]={exports:{}};return e[t](a,a.exports,r),a.exports}r.d=(t,e)=>{for(var i in e)r.o(e,i)&&!r.o(t,i)&&Object.defineProperty(t,i,{enumerable:!0,get:e[i]})},r.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};var o={};return(()=>{r.r(o),r.d(o,{loadTrailEffect:()=>i});var t=r(533);class e{draw(e){const{context:i,radius:r,particle:o}=e,a=o.container.retina.pixelRatio,n=o.getPosition();if(!o.trail||!o.trailLength)return;const l=o.trailLength;if(o.trail.push({color:i.fillStyle??i.strokeStyle,position:{x:n.x,y:n.y}}),o.trail.length<2)return;o.trail.length>l&&o.trail.shift();const s=Math.min(o.trail.length,l),c=n.x,p=n.y;let d=o.trail[s-1].position;for(let e=s;e>0;e--){const n=o.trail[e-1],l=n.position;if((0,t.getDistance)(d,l)>2*r)continue;i.beginPath(),i.moveTo(d.x-c,d.y-p),i.lineTo(l.x-c,l.y-p);const f=Math.max(e/s*r*2,a,o.trailMinWidth??-1);i.lineWidth=o.trailMaxWidth?Math.min(f,o.trailMaxWidth):f,i.strokeStyle=n.color,i.stroke(),d=l}}particleInit(e,i){i.trail=[];const r=i.effectData;i.trailLength=(0,t.getRangeValue)(r?.length??10)*e.retina.pixelRatio,i.trailMaxWidth=r?.maxWidth?(0,t.getRangeValue)(r.maxWidth)*e.retina.pixelRatio:void 0,i.trailMinWidth=r?.minWidth?(0,t.getRangeValue)(r.minWidth)*e.retina.pixelRatio:void 0}}async function i(t,i=!0){await t.addEffect("trail",new e,i)}})(),o})()));

package/tsparticles.effect.trail.min.js.LICENSE.txt

@@ -0,0 +1 @@
+/*! tsParticles Trail Shape v3.0.0-beta.4 by Matteo Bruni */

package/types/TrailDrawer.d.ts

@@ -0,0 +1,16 @@
+import { type Container, type ICoordinates, type IEffectDrawer, type IShapeDrawData, type Particle } from "@tsparticles/engine";
+type TrailStep = {
+    color: string | CanvasGradient | CanvasPattern;
+    position: ICoordinates;
+};
+type TrailParticle = Particle & {
+    trail?: TrailStep[];
+    trailLength?: number;
+    trailMaxWidth?: number;
+    trailMinWidth?: number;
+};
+export declare class TrailDrawer implements IEffectDrawer<TrailParticle> {
+    draw(data: IShapeDrawData<TrailParticle>): void;
+    particleInit(container: Container, particle: TrailParticle): void;
+}
+export {};

package/types/index.d.ts

@@ -0,0 +1,2 @@
+import type { Engine } from "@tsparticles/engine";
+export declare function loadTrailEffect(engine: Engine, refresh?: boolean): Promise<void>;

package/umd/TrailDrawer.js

@@ -0,0 +1,67 @@
+(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.TrailDrawer = void 0;
+    const engine_1 = require("@tsparticles/engine");
+    class TrailDrawer {
+        draw(data) {
+            const { context, radius, particle } = data, pxRatio = particle.container.retina.pixelRatio, currentPos = particle.getPosition();
+            if (!particle.trail || !particle.trailLength) {
+                return;
+            }
+            const pathLength = particle.trailLength;
+            particle.trail.push({
+                color: context.fillStyle ?? context.strokeStyle,
+                position: {
+                    x: currentPos.x,
+                    y: currentPos.y,
+                },
+            });
+            if (particle.trail.length < 2) {
+                return;
+            }
+            if (particle.trail.length > pathLength) {
+                particle.trail.shift();
+            }
+            const trailLength = Math.min(particle.trail.length, pathLength), offsetPos = {
+                x: currentPos.x,
+                y: currentPos.y,
+            };
+            let lastPos = particle.trail[trailLength - 1].position;
+            for (let i = trailLength; i > 0; i--) {
+                const step = particle.trail[i - 1], position = step.position;
+                if ((0, engine_1.getDistance)(lastPos, position) > radius * 2) {
+                    continue;
+                }
+                context.beginPath();
+                context.moveTo(lastPos.x - offsetPos.x, lastPos.y - offsetPos.y);
+                context.lineTo(position.x - offsetPos.x, position.y - offsetPos.y);
+                const width = Math.max((i / trailLength) * radius * 2, pxRatio, particle.trailMinWidth ?? -1);
+                context.lineWidth = particle.trailMaxWidth ? Math.min(width, particle.trailMaxWidth) : width;
+                context.strokeStyle = step.color;
+                context.stroke();
+                lastPos = position;
+            }
+        }
+        particleInit(container, particle) {
+            particle.trail = [];
+            const effectData = particle.effectData;
+            particle.trailLength = (0, engine_1.getRangeValue)(effectData?.length ?? 10) * container.retina.pixelRatio;
+            particle.trailMaxWidth = effectData?.maxWidth
+                ? (0, engine_1.getRangeValue)(effectData.maxWidth) * container.retina.pixelRatio
+                : undefined;
+            particle.trailMinWidth = effectData?.minWidth
+                ? (0, engine_1.getRangeValue)(effectData.minWidth) * container.retina.pixelRatio
+                : undefined;
+        }
+    }
+    exports.TrailDrawer = TrailDrawer;
+});

package/umd/index.js

@@ -0,0 +1,18 @@
+(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", "./TrailDrawer.js"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.loadTrailEffect = void 0;
+    const TrailDrawer_js_1 = require("./TrailDrawer.js");
+    async function loadTrailEffect(engine, refresh = true) {
+        await engine.addEffect("trail", new TrailDrawer_js_1.TrailDrawer(), refresh);
+    }
+    exports.loadTrailEffect = loadTrailEffect;
+});