@tsparticles/interaction-external-trail 4.0.0-alpha.8 → 4.0.0-beta.1

package/771.min.js

@@ -0,0 +1 @@
+"use strict";(this.webpackChunk_tsparticles_interaction_external_trail=this.webpackChunk_tsparticles_interaction_external_trail||[]).push([[771],{771(t,i,e){e.d(i,{TrailMaker:()=>n});var a=e(303),s=e(702),l=e(452);let r="trail";class n extends s.ExternalInteractorBase{maxDistance=0;_delay;_lastPosition;_pluginManager;constructor(t,i){super(i),this._pluginManager=t,this._delay=0}clear(){}init(){}interact(t,i){let e=this.container;if(!e.retina.reduceFactor)return;let s=e.actualOptions,l=s.interactivity?.modes.trail;if(!l)return;let r=l.delay*a.millisecondsToSeconds/this.container.retina.reduceFactor;if(this._delay<r&&(this._delay+=i.value),this._delay<r)return;let n=t.mouse.position,o=!(l.pauseOnStop&&(n===this._lastPosition||n?.x===this._lastPosition?.x&&n?.y===this._lastPosition?.y));if(n?this._lastPosition={...n}:delete this._lastPosition,o&&n){let t=l.particles,i=l.colorCoords;if(i){let{width:s,height:r}=e.canvas.size,o={x:n.x/s,y:n.y/r},c=(t,i,e)=>{if(!(t?.weights?.x??t?.weights?.y))return;let s=t?.weights,l=o.x*(s?.x??0)+o.y*(s?.y??0),r=t?.value??i,n=(0,a.getRangeMin)(r??0),c=(0,a.getRangeMax)(r??e);return Math.min(c,Math.max(n,n+l*(c-n)))},d=l.particles?.fill?(0,a.itemFromSingleOrMultiple)(l.particles.fill):void 0,h=d?(0,a.rangeColorToHsl)(this._pluginManager,a.AnimatableColor.create(void 0,d.color)):void 0,u=c(i.h,h?.h,a.hMax),p=c(i.s,h?.s,a.sMax),_=c(i.l,h?.l,a.lMax);(void 0!==u||void 0!==p||void 0!==_)&&(t=(0,a.deepExtend)({},l.particles,{color:{value:{h:u??h?.h,s:p??h?.s,l:_??h?.l}}}))}e.particles.push(l.quantity,n,t)}this._delay-=r}isEnabled(t,i){let e=this.container.actualOptions,s=t.mouse,l=(i?.interactivity??e.interactivity)?.events;return!!l&&(s.clicking&&s.inside&&!!s.position&&(0,a.isInArray)(r,l.onClick.mode)||s.inside&&!!s.position&&(0,a.isInArray)(r,l.onHover.mode))}loadModeOptions(t,...i){for(let e of(t.trail??=new l.X,i))t.trail.load(e?.trail)}reset(){}}}}]);

package/README.md

@@ -28,6 +28,7 @@ Once the scripts are loaded you can set up `tsParticles` and the interaction plu
 
 ```javascript
 (async () => {
+  await loadInteractivityPlugin(tsParticles);
   await loadExternalTrailInteraction(tsParticles);
 
   await tsParticles.load({
@@ -57,9 +58,11 @@ Then you need to import it in the app, like this:
 
 ```javascript
 const { tsParticles } = require("@tsparticles/engine");
+const { loadInteractivityPlugin } = require("@tsparticles/plugin-interactivity");
 const { loadExternalTrailInteraction } = require("@tsparticles/interaction-external-trail");
 
 (async () => {
+  await loadInteractivityPlugin(tsParticles);
   await loadExternalTrailInteraction(tsParticles);
 })();
 ```
@@ -68,9 +71,11 @@ or
 
 ```javascript
 import { tsParticles } from "@tsparticles/engine";
+import { loadInteractivityPlugin } from "@tsparticles/plugin-interactivity";
 import { loadExternalTrailInteraction } from "@tsparticles/interaction-external-trail";
 
 (async () => {
+  await loadInteractivityPlugin(tsParticles);
   await loadExternalTrailInteraction(tsParticles);
 })();
 ```

package/browser/Options/Classes/Trail.js

@@ -1,25 +1,35 @@
 import { deepExtend, isNull, } from "@tsparticles/engine";
+import { TrailColorCoords } from "./TrailColorCoords.js";
 export class Trail {
+    colorCoords;
+    delay;
+    particles;
+    pauseOnStop;
+    quantity;
     constructor() {
         this.delay = 1;
         this.pauseOnStop = false;
         this.quantity = 1;
+        this.colorCoords = new TrailColorCoords();
     }
     load(data) {
-        if (isNull(data)) {
+        if (isNull(data))
             return;
-        }
         if (data.delay !== undefined) {
             this.delay = data.delay;
         }
         if (data.quantity !== undefined) {
             this.quantity = data.quantity;
         }
+        if (data.pauseOnStop !== undefined) {
+            this.pauseOnStop = data.pauseOnStop;
+        }
         if (data.particles !== undefined) {
             this.particles = deepExtend({}, data.particles);
         }
-        if (data.pauseOnStop !== undefined) {
-            this.pauseOnStop = data.pauseOnStop;
+        if (data.colorCoords) {
+            this.colorCoords ??= new TrailColorCoords();
+            this.colorCoords.load(data.colorCoords);
         }
     }
 }

package/browser/Options/Classes/TrailColorComponent.js

@@ -0,0 +1,21 @@
+import { isNull, setRangeValue } from "@tsparticles/engine";
+import { TrailColorWeight } from "./TrailColorWeight.js";
+export class TrailColorComponent {
+    value;
+    weights;
+    constructor() {
+        this.weights = new TrailColorWeight();
+    }
+    load(data) {
+        if (!data) {
+            return;
+        }
+        if (data.weights) {
+            this.weights ??= new TrailColorWeight();
+            this.weights.load(data.weights);
+        }
+        if (!isNull(data.value)) {
+            this.value = setRangeValue(data.value);
+        }
+    }
+}

package/browser/Options/Classes/TrailColorCoords.js

@@ -0,0 +1,28 @@
+import { TrailColorComponent } from "./TrailColorComponent.js";
+export class TrailColorCoords {
+    h;
+    l;
+    s;
+    constructor() {
+        this.h = new TrailColorComponent();
+        this.s = new TrailColorComponent();
+        this.l = new TrailColorComponent();
+    }
+    load(data) {
+        if (!data) {
+            return;
+        }
+        if (data.h) {
+            this.h ??= new TrailColorComponent();
+            this.h.load(data.h);
+        }
+        if (data.s) {
+            this.s ??= new TrailColorComponent();
+            this.s.load(data.s);
+        }
+        if (data.l) {
+            this.l ??= new TrailColorComponent();
+            this.l.load(data.l);
+        }
+    }
+}

package/browser/Options/Classes/TrailColorWeight.js

@@ -0,0 +1,19 @@
+export class TrailColorWeight {
+    x;
+    y;
+    constructor() {
+        this.x = 0;
+        this.y = 0;
+    }
+    load(data) {
+        if (!data) {
+            return;
+        }
+        if (data.x !== undefined) {
+            this.x = data.x;
+        }
+        if (data.y !== undefined) {
+            this.y = data.y;
+        }
+    }
+}

package/browser/Options/Interfaces/ITrailColorComponent.js

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

package/browser/Options/Interfaces/ITrailColorCoords.js

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

package/browser/Options/Interfaces/ITrailColorWeight.js

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

package/browser/TrailMaker.js

@@ -1,10 +1,15 @@
+import { AnimatableColor, deepExtend, getRangeMax, getRangeMin, hMax, isInArray, itemFromSingleOrMultiple, lMax, millisecondsToSeconds, rangeColorToHsl, sMax, } from "@tsparticles/engine";
 import { ExternalInteractorBase, } from "@tsparticles/plugin-interactivity";
-import { isInArray, millisecondsToSeconds, } from "@tsparticles/engine";
 import { Trail } from "./Options/Classes/Trail.js";
-const trailMode = "trail";
+const trailMode = "trail", defaultMin = 0, defaultWeight = 0;
 export class TrailMaker extends ExternalInteractorBase {
-    constructor(container) {
+    maxDistance = 0;
+    _delay;
+    _lastPosition;
+    _pluginManager;
+    constructor(pluginManager, container) {
         super(container);
+        this._pluginManager = pluginManager;
         this._delay = 0;
     }
     clear() {
@@ -13,32 +18,56 @@ export class TrailMaker extends ExternalInteractorBase {
     }
     interact(interactivityData, delta) {
         const container = this.container;
-        if (!container.retina.reduceFactor) {
+        if (!container.retina.reduceFactor)
             return;
-        }
         const options = container.actualOptions, trailOptions = options.interactivity?.modes.trail;
-        if (!trailOptions) {
+        if (!trailOptions)
             return;
-        }
         const optDelay = (trailOptions.delay * millisecondsToSeconds) / this.container.retina.reduceFactor;
         if (this._delay < optDelay) {
             this._delay += delta.value;
         }
-        if (this._delay < optDelay) {
+        if (this._delay < optDelay)
             return;
-        }
-        const canEmit = !(trailOptions.pauseOnStop &&
-            (interactivityData.mouse.position === this._lastPosition ||
-                (interactivityData.mouse.position?.x === this._lastPosition?.x &&
-                    interactivityData.mouse.position?.y === this._lastPosition?.y))), mousePos = interactivityData.mouse.position;
+        const mousePos = interactivityData.mouse.position, canEmit = !(trailOptions.pauseOnStop &&
+            (mousePos === this._lastPosition ||
+                (mousePos?.x === this._lastPosition?.x && mousePos?.y === this._lastPosition?.y)));
         if (mousePos) {
             this._lastPosition = { ...mousePos };
         }
         else {
             delete this._lastPosition;
         }
-        if (canEmit) {
-            container.particles.push(trailOptions.quantity, interactivityData.mouse.position, trailOptions.particles);
+        if (canEmit && mousePos) {
+            let particleOptions = trailOptions.particles;
+            const colorCoords = trailOptions.colorCoords;
+            if (colorCoords) {
+                const { width, height } = container.canvas.size, norm = {
+                    x: mousePos.x / width,
+                    y: mousePos.y / height,
+                }, hasWeights = (comp) => {
+                    return !!(comp?.weights?.x ?? comp?.weights?.y);
+                }, calculateValue = (comp, originalValue, defaultMax) => {
+                    if (!hasWeights(comp))
+                        return undefined;
+                    const w = comp?.weights, factor = norm.x * (w?.x ?? defaultWeight) + norm.y * (w?.y ?? defaultWeight), rangeSource = comp?.value ?? originalValue, min = getRangeMin(rangeSource ?? defaultMin), max = getRangeMax(rangeSource ?? defaultMax), result = min + factor * (max - min);
+                    return Math.min(max, Math.max(min, result));
+                }, fillData = trailOptions.particles?.fill ? itemFromSingleOrMultiple(trailOptions.particles.fill) : undefined, baseHsl = fillData
+                    ? rangeColorToHsl(this._pluginManager, AnimatableColor.create(undefined, fillData.color))
+                    : undefined, h = calculateValue(colorCoords.h, baseHsl?.h, hMax), s = calculateValue(colorCoords.s, baseHsl?.s, sMax), l = calculateValue(colorCoords.l, baseHsl?.l, lMax);
+                if (h !== undefined || s !== undefined || l !== undefined) {
+                    particleOptions = deepExtend({}, trailOptions.particles, {
+                        color: {
+                            value: {
+                                h: h ?? baseHsl?.h,
+                                s: s ?? baseHsl?.s,
+                                l: l ?? baseHsl?.l,
+                            },
+                        },
+                    });
+                }
+            }
+            container.particles.push(trailOptions.quantity, mousePos, particleOptions);
         }
         this._delay -= optDelay;
     }

package/browser/index.js

@@ -1,11 +1,11 @@
 export async function loadExternalTrailInteraction(engine) {
-    engine.checkVersion("4.0.0-alpha.8");
-    await engine.register(async (e) => {
-        const { loadInteractivityPlugin } = await import("@tsparticles/plugin-interactivity");
-        await loadInteractivityPlugin(e);
-        e.addInteractor?.("externalTrail", async (container) => {
+    engine.checkVersion("4.0.0-beta.1");
+    await engine.pluginManager.register(async (e) => {
+        const { ensureInteractivityPluginLoaded } = await import("@tsparticles/plugin-interactivity");
+        ensureInteractivityPluginLoaded(e);
+        e.pluginManager.addInteractor?.("externalTrail", async (container) => {
             const { TrailMaker } = await import("./TrailMaker.js");
-            return new TrailMaker(container);
+            return new TrailMaker(e.pluginManager, container);
         });
     });
 }

package/cjs/Options/Classes/Trail.js

@@ -1,25 +1,35 @@
 import { deepExtend, isNull, } from "@tsparticles/engine";
+import { TrailColorCoords } from "./TrailColorCoords.js";
 export class Trail {
+    colorCoords;
+    delay;
+    particles;
+    pauseOnStop;
+    quantity;
     constructor() {
         this.delay = 1;
         this.pauseOnStop = false;
         this.quantity = 1;
+        this.colorCoords = new TrailColorCoords();
     }
     load(data) {
-        if (isNull(data)) {
+        if (isNull(data))
             return;
-        }
         if (data.delay !== undefined) {
             this.delay = data.delay;
         }
         if (data.quantity !== undefined) {
             this.quantity = data.quantity;
         }
+        if (data.pauseOnStop !== undefined) {
+            this.pauseOnStop = data.pauseOnStop;
+        }
         if (data.particles !== undefined) {
             this.particles = deepExtend({}, data.particles);
         }
-        if (data.pauseOnStop !== undefined) {
-            this.pauseOnStop = data.pauseOnStop;
+        if (data.colorCoords) {
+            this.colorCoords ??= new TrailColorCoords();
+            this.colorCoords.load(data.colorCoords);
         }
     }
 }

package/cjs/Options/Classes/TrailColorComponent.js

@@ -0,0 +1,21 @@
+import { isNull, setRangeValue } from "@tsparticles/engine";
+import { TrailColorWeight } from "./TrailColorWeight.js";
+export class TrailColorComponent {
+    value;
+    weights;
+    constructor() {
+        this.weights = new TrailColorWeight();
+    }
+    load(data) {
+        if (!data) {
+            return;
+        }
+        if (data.weights) {
+            this.weights ??= new TrailColorWeight();
+            this.weights.load(data.weights);
+        }
+        if (!isNull(data.value)) {
+            this.value = setRangeValue(data.value);
+        }
+    }
+}

package/cjs/Options/Classes/TrailColorCoords.js

@@ -0,0 +1,28 @@
+import { TrailColorComponent } from "./TrailColorComponent.js";
+export class TrailColorCoords {
+    h;
+    l;
+    s;
+    constructor() {
+        this.h = new TrailColorComponent();
+        this.s = new TrailColorComponent();
+        this.l = new TrailColorComponent();
+    }
+    load(data) {
+        if (!data) {
+            return;
+        }
+        if (data.h) {
+            this.h ??= new TrailColorComponent();
+            this.h.load(data.h);
+        }
+        if (data.s) {
+            this.s ??= new TrailColorComponent();
+            this.s.load(data.s);
+        }
+        if (data.l) {
+            this.l ??= new TrailColorComponent();
+            this.l.load(data.l);
+        }
+    }
+}

package/cjs/Options/Classes/TrailColorWeight.js

@@ -0,0 +1,19 @@
+export class TrailColorWeight {
+    x;
+    y;
+    constructor() {
+        this.x = 0;
+        this.y = 0;
+    }
+    load(data) {
+        if (!data) {
+            return;
+        }
+        if (data.x !== undefined) {
+            this.x = data.x;
+        }
+        if (data.y !== undefined) {
+            this.y = data.y;
+        }
+    }
+}

package/cjs/Options/Interfaces/ITrailColorComponent.js

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

package/cjs/Options/Interfaces/ITrailColorCoords.js

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

package/cjs/Options/Interfaces/ITrailColorWeight.js

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

package/cjs/TrailMaker.js

@@ -1,10 +1,15 @@
+import { AnimatableColor, deepExtend, getRangeMax, getRangeMin, hMax, isInArray, itemFromSingleOrMultiple, lMax, millisecondsToSeconds, rangeColorToHsl, sMax, } from "@tsparticles/engine";
 import { ExternalInteractorBase, } from "@tsparticles/plugin-interactivity";
-import { isInArray, millisecondsToSeconds, } from "@tsparticles/engine";
 import { Trail } from "./Options/Classes/Trail.js";
-const trailMode = "trail";
+const trailMode = "trail", defaultMin = 0, defaultWeight = 0;
 export class TrailMaker extends ExternalInteractorBase {
-    constructor(container) {
+    maxDistance = 0;
+    _delay;
+    _lastPosition;
+    _pluginManager;
+    constructor(pluginManager, container) {
         super(container);
+        this._pluginManager = pluginManager;
         this._delay = 0;
     }
     clear() {
@@ -13,32 +18,56 @@ export class TrailMaker extends ExternalInteractorBase {
     }
     interact(interactivityData, delta) {
         const container = this.container;
-        if (!container.retina.reduceFactor) {
+        if (!container.retina.reduceFactor)
             return;
-        }
         const options = container.actualOptions, trailOptions = options.interactivity?.modes.trail;
-        if (!trailOptions) {
+        if (!trailOptions)
             return;
-        }
         const optDelay = (trailOptions.delay * millisecondsToSeconds) / this.container.retina.reduceFactor;
         if (this._delay < optDelay) {
             this._delay += delta.value;
         }
-        if (this._delay < optDelay) {
+        if (this._delay < optDelay)
             return;
-        }
-        const canEmit = !(trailOptions.pauseOnStop &&
-            (interactivityData.mouse.position === this._lastPosition ||
-                (interactivityData.mouse.position?.x === this._lastPosition?.x &&
-                    interactivityData.mouse.position?.y === this._lastPosition?.y))), mousePos = interactivityData.mouse.position;
+        const mousePos = interactivityData.mouse.position, canEmit = !(trailOptions.pauseOnStop &&
+            (mousePos === this._lastPosition ||
+                (mousePos?.x === this._lastPosition?.x && mousePos?.y === this._lastPosition?.y)));
         if (mousePos) {
             this._lastPosition = { ...mousePos };
         }
         else {
             delete this._lastPosition;
         }
-        if (canEmit) {
-            container.particles.push(trailOptions.quantity, interactivityData.mouse.position, trailOptions.particles);
+        if (canEmit && mousePos) {
+            let particleOptions = trailOptions.particles;
+            const colorCoords = trailOptions.colorCoords;
+            if (colorCoords) {
+                const { width, height } = container.canvas.size, norm = {
+                    x: mousePos.x / width,
+                    y: mousePos.y / height,
+                }, hasWeights = (comp) => {
+                    return !!(comp?.weights?.x ?? comp?.weights?.y);
+                }, calculateValue = (comp, originalValue, defaultMax) => {
+                    if (!hasWeights(comp))
+                        return undefined;
+                    const w = comp?.weights, factor = norm.x * (w?.x ?? defaultWeight) + norm.y * (w?.y ?? defaultWeight), rangeSource = comp?.value ?? originalValue, min = getRangeMin(rangeSource ?? defaultMin), max = getRangeMax(rangeSource ?? defaultMax), result = min + factor * (max - min);
+                    return Math.min(max, Math.max(min, result));
+                }, fillData = trailOptions.particles?.fill ? itemFromSingleOrMultiple(trailOptions.particles.fill) : undefined, baseHsl = fillData
+                    ? rangeColorToHsl(this._pluginManager, AnimatableColor.create(undefined, fillData.color))
+                    : undefined, h = calculateValue(colorCoords.h, baseHsl?.h, hMax), s = calculateValue(colorCoords.s, baseHsl?.s, sMax), l = calculateValue(colorCoords.l, baseHsl?.l, lMax);
+                if (h !== undefined || s !== undefined || l !== undefined) {
+                    particleOptions = deepExtend({}, trailOptions.particles, {
+                        color: {
+                            value: {
+                                h: h ?? baseHsl?.h,
+                                s: s ?? baseHsl?.s,
+                                l: l ?? baseHsl?.l,
+                            },
+                        },
+                    });
+                }
+            }
+            container.particles.push(trailOptions.quantity, mousePos, particleOptions);
         }
         this._delay -= optDelay;
     }

package/cjs/index.js

@@ -1,11 +1,11 @@
 export async function loadExternalTrailInteraction(engine) {
-    engine.checkVersion("4.0.0-alpha.8");
-    await engine.register(async (e) => {
-        const { loadInteractivityPlugin } = await import("@tsparticles/plugin-interactivity");
-        await loadInteractivityPlugin(e);
-        e.addInteractor?.("externalTrail", async (container) => {
+    engine.checkVersion("4.0.0-beta.1");
+    await engine.pluginManager.register(async (e) => {
+        const { ensureInteractivityPluginLoaded } = await import("@tsparticles/plugin-interactivity");
+        ensureInteractivityPluginLoaded(e);
+        e.pluginManager.addInteractor?.("externalTrail", async (container) => {
             const { TrailMaker } = await import("./TrailMaker.js");
-            return new TrailMaker(container);
+            return new TrailMaker(e.pluginManager, container);
         });
     });
 }

package/dist_browser_TrailMaker_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.8
+ * v4.0.0-beta.1
  */
 "use strict";
 /*
@@ -23,7 +23,7 @@
   \************************************/
 (__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 */   TrailMaker: () => (/* binding */ TrailMaker)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_plugin_interactivity__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/plugin-interactivity */ \"@tsparticles/plugin-interactivity\");\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _Options_Classes_Trail_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Options/Classes/Trail.js */ \"./dist/browser/Options/Classes/Trail.js\");\n\n\n\nconst trailMode = \"trail\";\nclass TrailMaker extends _tsparticles_plugin_interactivity__WEBPACK_IMPORTED_MODULE_0__.ExternalInteractorBase {\n  constructor(container) {\n    super(container);\n    this._delay = 0;\n  }\n  clear() {}\n  init() {}\n  interact(interactivityData, delta) {\n    const container = this.container;\n    if (!container.retina.reduceFactor) {\n      return;\n    }\n    const options = container.actualOptions,\n      trailOptions = options.interactivity?.modes.trail;\n    if (!trailOptions) {\n      return;\n    }\n    const optDelay = trailOptions.delay * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.millisecondsToSeconds / this.container.retina.reduceFactor;\n    if (this._delay < optDelay) {\n      this._delay += delta.value;\n    }\n    if (this._delay < optDelay) {\n      return;\n    }\n    const canEmit = !(trailOptions.pauseOnStop && (interactivityData.mouse.position === this._lastPosition || interactivityData.mouse.position?.x === this._lastPosition?.x && interactivityData.mouse.position?.y === this._lastPosition?.y)),\n      mousePos = interactivityData.mouse.position;\n    if (mousePos) {\n      this._lastPosition = {\n        ...mousePos\n      };\n    } else {\n      delete this._lastPosition;\n    }\n    if (canEmit) {\n      container.particles.push(trailOptions.quantity, interactivityData.mouse.position, trailOptions.particles);\n    }\n    this._delay -= optDelay;\n  }\n  isEnabled(interactivityData, particle) {\n    const container = this.container,\n      options = container.actualOptions,\n      mouse = interactivityData.mouse,\n      events = (particle?.interactivity ?? options.interactivity)?.events;\n    return !!events && (mouse.clicking && mouse.inside && !!mouse.position && (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.isInArray)(trailMode, events.onClick.mode) || mouse.inside && !!mouse.position && (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.isInArray)(trailMode, events.onHover.mode));\n  }\n  loadModeOptions(options, ...sources) {\n    options.trail ??= new _Options_Classes_Trail_js__WEBPACK_IMPORTED_MODULE_2__.Trail();\n    for (const source of sources) {\n      options.trail.load(source?.trail);\n    }\n  }\n  reset() {}\n}\n\n//# sourceURL=webpack://@tsparticles/interaction-external-trail/./dist/browser/TrailMaker.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   TrailMaker: () => (/* binding */ TrailMaker)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _tsparticles_plugin_interactivity__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @tsparticles/plugin-interactivity */ \"@tsparticles/plugin-interactivity\");\n/* harmony import */ var _Options_Classes_Trail_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Options/Classes/Trail.js */ \"./dist/browser/Options/Classes/Trail.js\");\n\n\n\nconst trailMode = \"trail\", defaultMin = 0, defaultWeight = 0;\nclass TrailMaker extends _tsparticles_plugin_interactivity__WEBPACK_IMPORTED_MODULE_1__.ExternalInteractorBase {\n    maxDistance = 0;\n    _delay;\n    _lastPosition;\n    _pluginManager;\n    constructor(pluginManager, container){\n        super(container);\n        this._pluginManager = pluginManager;\n        this._delay = 0;\n    }\n    clear() {}\n    init() {}\n    interact(interactivityData, delta) {\n        const container = this.container;\n        if (!container.retina.reduceFactor) return;\n        const options = container.actualOptions, trailOptions = options.interactivity?.modes.trail;\n        if (!trailOptions) return;\n        const optDelay = trailOptions.delay * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.millisecondsToSeconds / this.container.retina.reduceFactor;\n        if (this._delay < optDelay) {\n            this._delay += delta.value;\n        }\n        if (this._delay < optDelay) return;\n        const mousePos = interactivityData.mouse.position, canEmit = !(trailOptions.pauseOnStop && (mousePos === this._lastPosition || mousePos?.x === this._lastPosition?.x && mousePos?.y === this._lastPosition?.y));\n        if (mousePos) {\n            this._lastPosition = {\n                ...mousePos\n            };\n        } else {\n            delete this._lastPosition;\n        }\n        if (canEmit && mousePos) {\n            let particleOptions = trailOptions.particles;\n            const colorCoords = trailOptions.colorCoords;\n            if (colorCoords) {\n                const { width, height } = container.canvas.size, norm = {\n                    x: mousePos.x / width,\n                    y: mousePos.y / height\n                }, hasWeights = (comp)=>{\n                    return !!(comp?.weights?.x ?? comp?.weights?.y);\n                }, calculateValue = (comp, originalValue, defaultMax)=>{\n                    if (!hasWeights(comp)) return undefined;\n                    const w = comp?.weights, factor = norm.x * (w?.x ?? defaultWeight) + norm.y * (w?.y ?? defaultWeight), rangeSource = comp?.value ?? originalValue, min = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRangeMin)(rangeSource ?? defaultMin), max = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRangeMax)(rangeSource ?? defaultMax), result = min + factor * (max - min);\n                    return Math.min(max, Math.max(min, result));\n                }, fillData = trailOptions.particles?.fill ? (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.itemFromSingleOrMultiple)(trailOptions.particles.fill) : undefined, baseHsl = fillData ? (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.rangeColorToHsl)(this._pluginManager, _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.AnimatableColor.create(undefined, fillData.color)) : undefined, h = calculateValue(colorCoords.h, baseHsl?.h, _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.hMax), s = calculateValue(colorCoords.s, baseHsl?.s, _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.sMax), l = calculateValue(colorCoords.l, baseHsl?.l, _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.lMax);\n                if (h !== undefined || s !== undefined || l !== undefined) {\n                    particleOptions = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.deepExtend)({}, trailOptions.particles, {\n                        color: {\n                            value: {\n                                h: h ?? baseHsl?.h,\n                                s: s ?? baseHsl?.s,\n                                l: l ?? baseHsl?.l\n                            }\n                        }\n                    });\n                }\n            }\n            container.particles.push(trailOptions.quantity, mousePos, particleOptions);\n        }\n        this._delay -= optDelay;\n    }\n    isEnabled(interactivityData, particle) {\n        const container = this.container, options = container.actualOptions, mouse = interactivityData.mouse, events = (particle?.interactivity ?? options.interactivity)?.events;\n        return !!events && (mouse.clicking && mouse.inside && !!mouse.position && (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isInArray)(trailMode, events.onClick.mode) || mouse.inside && !!mouse.position && (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isInArray)(trailMode, events.onHover.mode));\n    }\n    loadModeOptions(options, ...sources) {\n        options.trail ??= new _Options_Classes_Trail_js__WEBPACK_IMPORTED_MODULE_2__.Trail();\n        for (const source of sources){\n            options.trail.load(source?.trail);\n        }\n    }\n    reset() {}\n}\n\n\n//# sourceURL=webpack://@tsparticles/interaction-external-trail/./dist/browser/TrailMaker.js?\n}");
 
 /***/ }
 

package/esm/Options/Classes/Trail.js

@@ -1,25 +1,35 @@
 import { deepExtend, isNull, } from "@tsparticles/engine";
+import { TrailColorCoords } from "./TrailColorCoords.js";
 export class Trail {
+    colorCoords;
+    delay;
+    particles;
+    pauseOnStop;
+    quantity;
     constructor() {
         this.delay = 1;
         this.pauseOnStop = false;
         this.quantity = 1;
+        this.colorCoords = new TrailColorCoords();
     }
     load(data) {
-        if (isNull(data)) {
+        if (isNull(data))
             return;
-        }
         if (data.delay !== undefined) {
             this.delay = data.delay;
         }
         if (data.quantity !== undefined) {
             this.quantity = data.quantity;
         }
+        if (data.pauseOnStop !== undefined) {
+            this.pauseOnStop = data.pauseOnStop;
+        }
         if (data.particles !== undefined) {
             this.particles = deepExtend({}, data.particles);
         }
-        if (data.pauseOnStop !== undefined) {
-            this.pauseOnStop = data.pauseOnStop;
+        if (data.colorCoords) {
+            this.colorCoords ??= new TrailColorCoords();
+            this.colorCoords.load(data.colorCoords);
         }
     }
 }

package/esm/Options/Classes/TrailColorComponent.js

@@ -0,0 +1,21 @@
+import { isNull, setRangeValue } from "@tsparticles/engine";
+import { TrailColorWeight } from "./TrailColorWeight.js";
+export class TrailColorComponent {
+    value;
+    weights;
+    constructor() {
+        this.weights = new TrailColorWeight();
+    }
+    load(data) {
+        if (!data) {
+            return;
+        }
+        if (data.weights) {
+            this.weights ??= new TrailColorWeight();
+            this.weights.load(data.weights);
+        }
+        if (!isNull(data.value)) {
+            this.value = setRangeValue(data.value);
+        }
+    }
+}

package/esm/Options/Classes/TrailColorCoords.js

@@ -0,0 +1,28 @@
+import { TrailColorComponent } from "./TrailColorComponent.js";
+export class TrailColorCoords {
+    h;
+    l;
+    s;
+    constructor() {
+        this.h = new TrailColorComponent();
+        this.s = new TrailColorComponent();
+        this.l = new TrailColorComponent();
+    }
+    load(data) {
+        if (!data) {
+            return;
+        }
+        if (data.h) {
+            this.h ??= new TrailColorComponent();
+            this.h.load(data.h);
+        }
+        if (data.s) {
+            this.s ??= new TrailColorComponent();
+            this.s.load(data.s);
+        }
+        if (data.l) {
+            this.l ??= new TrailColorComponent();
+            this.l.load(data.l);
+        }
+    }
+}

package/esm/Options/Classes/TrailColorWeight.js

@@ -0,0 +1,19 @@
+export class TrailColorWeight {
+    x;
+    y;
+    constructor() {
+        this.x = 0;
+        this.y = 0;
+    }
+    load(data) {
+        if (!data) {
+            return;
+        }
+        if (data.x !== undefined) {
+            this.x = data.x;
+        }
+        if (data.y !== undefined) {
+            this.y = data.y;
+        }
+    }
+}

package/esm/Options/Interfaces/ITrailColorComponent.js

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

package/esm/Options/Interfaces/ITrailColorCoords.js

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

package/esm/Options/Interfaces/ITrailColorWeight.js

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