@tsparticles/effect-trail 4.0.4 → 4.1.0

package/browser/TrailDrawer.js

@@ -1,5 +1,5 @@
-import { defaultAlpha, double, getRangeValue, half, originPoint, } from "@tsparticles/engine";
-const minTrailLength = 3, trailLengthOffset = 1, minWidth = -1, firstIndex = 0, defaultLength = 10, loopTrailLengthOffset = 2, loopTrailLengthMinIndex = 0;
+import { OutMode, OutModeDirection, defaultAlpha, double, getRangeValue, half, originPoint, } from "@tsparticles/engine";
+const minTrailLength = 3, trailLengthOffset = 1, minWidth = -1, firstIndex = 0, defaultLength = 10, loopTrailLengthOffset = 2, loopTrailLengthMinIndex = 0, defaultWidth = 0, minBound = 0;
 const defaultTransform = {
     a: 1,
     b: 0,
@@ -7,12 +7,12 @@ const defaultTransform = {
     d: 1,
 };
 export class TrailDrawer {
-    _container;
+    #container;
     constructor(container) {
-        this._container = container;
+        this.#container = container;
     }
     drawAfter(data) {
-        const { context, drawPosition, drawRadius, drawScale, particle, transformData } = data, container = this._container, diameter = drawRadius * double, pxRatio = container.retina.pixelRatio, trail = particle.trail;
+        const { context, drawPosition, drawRadius, drawScale, particle, transformData } = data, container = this.#container, diameter = drawRadius * double, pxRatio = container.retina.pixelRatio, trail = particle.trail;
         if (!trail || !particle.trailLength) {
             return;
         }
@@ -60,6 +60,39 @@ export class TrailDrawer {
         }
         context.restore();
     }
+    isInsideCanvas(data) {
+        const { canvasSize, direction, outMode, particle, radius } = data, position = particle.position, trail = particle.trail;
+        let minX = position.x - radius, maxX = position.x + radius, minY = position.y - radius, maxY = position.y + radius;
+        if (trail?.length) {
+            const widthPadding = Math.max(radius, particle.trailMaxWidth ?? defaultWidth, particle.trailMinWidth ?? defaultWidth);
+            for (const step of trail) {
+                minX = Math.min(minX, step.position.x - widthPadding);
+                maxX = Math.max(maxX, step.position.x + widthPadding);
+                minY = Math.min(minY, step.position.y - widthPadding);
+                maxY = Math.max(maxY, step.position.y + widthPadding);
+            }
+        }
+        const strictBounds = outMode === OutMode.destroy;
+        if (direction === OutModeDirection.bottom) {
+            return minY <= canvasSize.height;
+        }
+        if (direction === OutModeDirection.left) {
+            return maxX >= minBound;
+        }
+        if (direction === OutModeDirection.right) {
+            return minX <= canvasSize.width;
+        }
+        if (direction === OutModeDirection.top) {
+            return maxY >= minBound;
+        }
+        if (!strictBounds) {
+            return (position.x + radius >= minBound &&
+                position.y + radius >= minBound &&
+                position.x - radius <= canvasSize.width &&
+                position.y - radius <= canvasSize.height);
+        }
+        return maxX >= minBound && maxY >= minBound && minX <= canvasSize.width && minY <= canvasSize.height;
+    }
     particleInit(container, particle) {
         particle.trail = [];
         const effectData = particle.effectData;

package/browser/index.js

@@ -1,6 +1,6 @@
 import { TrailDrawer } from "./TrailDrawer.js";
 export async function loadTrailEffect(engine) {
-    engine.checkVersion("4.0.4");
+    engine.checkVersion("4.1.0");
     await engine.pluginManager.register(e => {
         e.pluginManager.addEffect("trail", container => {
             return Promise.resolve(new TrailDrawer(container));

package/browser/index.lazy.js

@@ -1,5 +1,5 @@
 export async function loadTrailEffect(engine) {
-    engine.checkVersion("4.0.4");
+    engine.checkVersion("4.1.0");
     await engine.pluginManager.register(e => {
         e.pluginManager.addEffect("trail", async (container) => {
             const { TrailDrawer } = await import("./TrailDrawer.js");

package/cjs/TrailDrawer.js

@@ -1,5 +1,5 @@
-import { defaultAlpha, double, getRangeValue, half, originPoint, } from "@tsparticles/engine";
-const minTrailLength = 3, trailLengthOffset = 1, minWidth = -1, firstIndex = 0, defaultLength = 10, loopTrailLengthOffset = 2, loopTrailLengthMinIndex = 0;
+import { OutMode, OutModeDirection, defaultAlpha, double, getRangeValue, half, originPoint, } from "@tsparticles/engine";
+const minTrailLength = 3, trailLengthOffset = 1, minWidth = -1, firstIndex = 0, defaultLength = 10, loopTrailLengthOffset = 2, loopTrailLengthMinIndex = 0, defaultWidth = 0, minBound = 0;
 const defaultTransform = {
     a: 1,
     b: 0,
@@ -7,12 +7,12 @@ const defaultTransform = {
     d: 1,
 };
 export class TrailDrawer {
-    _container;
+    #container;
     constructor(container) {
-        this._container = container;
+        this.#container = container;
     }
     drawAfter(data) {
-        const { context, drawPosition, drawRadius, drawScale, particle, transformData } = data, container = this._container, diameter = drawRadius * double, pxRatio = container.retina.pixelRatio, trail = particle.trail;
+        const { context, drawPosition, drawRadius, drawScale, particle, transformData } = data, container = this.#container, diameter = drawRadius * double, pxRatio = container.retina.pixelRatio, trail = particle.trail;
         if (!trail || !particle.trailLength) {
             return;
         }
@@ -60,6 +60,39 @@ export class TrailDrawer {
         }
         context.restore();
     }
+    isInsideCanvas(data) {
+        const { canvasSize, direction, outMode, particle, radius } = data, position = particle.position, trail = particle.trail;
+        let minX = position.x - radius, maxX = position.x + radius, minY = position.y - radius, maxY = position.y + radius;
+        if (trail?.length) {
+            const widthPadding = Math.max(radius, particle.trailMaxWidth ?? defaultWidth, particle.trailMinWidth ?? defaultWidth);
+            for (const step of trail) {
+                minX = Math.min(minX, step.position.x - widthPadding);
+                maxX = Math.max(maxX, step.position.x + widthPadding);
+                minY = Math.min(minY, step.position.y - widthPadding);
+                maxY = Math.max(maxY, step.position.y + widthPadding);
+            }
+        }
+        const strictBounds = outMode === OutMode.destroy;
+        if (direction === OutModeDirection.bottom) {
+            return minY <= canvasSize.height;
+        }
+        if (direction === OutModeDirection.left) {
+            return maxX >= minBound;
+        }
+        if (direction === OutModeDirection.right) {
+            return minX <= canvasSize.width;
+        }
+        if (direction === OutModeDirection.top) {
+            return maxY >= minBound;
+        }
+        if (!strictBounds) {
+            return (position.x + radius >= minBound &&
+                position.y + radius >= minBound &&
+                position.x - radius <= canvasSize.width &&
+                position.y - radius <= canvasSize.height);
+        }
+        return maxX >= minBound && maxY >= minBound && minX <= canvasSize.width && minY <= canvasSize.height;
+    }
     particleInit(container, particle) {
         particle.trail = [];
         const effectData = particle.effectData;

package/cjs/index.js

@@ -1,6 +1,6 @@
 import { TrailDrawer } from "./TrailDrawer.js";
 export async function loadTrailEffect(engine) {
-    engine.checkVersion("4.0.4");
+    engine.checkVersion("4.1.0");
     await engine.pluginManager.register(e => {
         e.pluginManager.addEffect("trail", container => {
             return Promise.resolve(new TrailDrawer(container));

package/cjs/index.lazy.js

@@ -1,5 +1,5 @@
 export async function loadTrailEffect(engine) {
-    engine.checkVersion("4.0.4");
+    engine.checkVersion("4.1.0");
     await engine.pluginManager.register(e => {
         e.pluginManager.addEffect("trail", async (container) => {
             const { TrailDrawer } = await import("./TrailDrawer.js");

package/esm/TrailDrawer.js

@@ -1,5 +1,5 @@
-import { defaultAlpha, double, getRangeValue, half, originPoint, } from "@tsparticles/engine";
-const minTrailLength = 3, trailLengthOffset = 1, minWidth = -1, firstIndex = 0, defaultLength = 10, loopTrailLengthOffset = 2, loopTrailLengthMinIndex = 0;
+import { OutMode, OutModeDirection, defaultAlpha, double, getRangeValue, half, originPoint, } from "@tsparticles/engine";
+const minTrailLength = 3, trailLengthOffset = 1, minWidth = -1, firstIndex = 0, defaultLength = 10, loopTrailLengthOffset = 2, loopTrailLengthMinIndex = 0, defaultWidth = 0, minBound = 0;
 const defaultTransform = {
     a: 1,
     b: 0,
@@ -7,12 +7,12 @@ const defaultTransform = {
     d: 1,
 };
 export class TrailDrawer {
-    _container;
+    #container;
     constructor(container) {
-        this._container = container;
+        this.#container = container;
     }
     drawAfter(data) {
-        const { context, drawPosition, drawRadius, drawScale, particle, transformData } = data, container = this._container, diameter = drawRadius * double, pxRatio = container.retina.pixelRatio, trail = particle.trail;
+        const { context, drawPosition, drawRadius, drawScale, particle, transformData } = data, container = this.#container, diameter = drawRadius * double, pxRatio = container.retina.pixelRatio, trail = particle.trail;
         if (!trail || !particle.trailLength) {
             return;
         }
@@ -60,6 +60,39 @@ export class TrailDrawer {
         }
         context.restore();
     }
+    isInsideCanvas(data) {
+        const { canvasSize, direction, outMode, particle, radius } = data, position = particle.position, trail = particle.trail;
+        let minX = position.x - radius, maxX = position.x + radius, minY = position.y - radius, maxY = position.y + radius;
+        if (trail?.length) {
+            const widthPadding = Math.max(radius, particle.trailMaxWidth ?? defaultWidth, particle.trailMinWidth ?? defaultWidth);
+            for (const step of trail) {
+                minX = Math.min(minX, step.position.x - widthPadding);
+                maxX = Math.max(maxX, step.position.x + widthPadding);
+                minY = Math.min(minY, step.position.y - widthPadding);
+                maxY = Math.max(maxY, step.position.y + widthPadding);
+            }
+        }
+        const strictBounds = outMode === OutMode.destroy;
+        if (direction === OutModeDirection.bottom) {
+            return minY <= canvasSize.height;
+        }
+        if (direction === OutModeDirection.left) {
+            return maxX >= minBound;
+        }
+        if (direction === OutModeDirection.right) {
+            return minX <= canvasSize.width;
+        }
+        if (direction === OutModeDirection.top) {
+            return maxY >= minBound;
+        }
+        if (!strictBounds) {
+            return (position.x + radius >= minBound &&
+                position.y + radius >= minBound &&
+                position.x - radius <= canvasSize.width &&
+                position.y - radius <= canvasSize.height);
+        }
+        return maxX >= minBound && maxY >= minBound && minX <= canvasSize.width && minY <= canvasSize.height;
+    }
     particleInit(container, particle) {
         particle.trail = [];
         const effectData = particle.effectData;

package/esm/index.js

@@ -1,6 +1,6 @@
 import { TrailDrawer } from "./TrailDrawer.js";
 export async function loadTrailEffect(engine) {
-    engine.checkVersion("4.0.4");
+    engine.checkVersion("4.1.0");
     await engine.pluginManager.register(e => {
         e.pluginManager.addEffect("trail", container => {
             return Promise.resolve(new TrailDrawer(container));

package/esm/index.lazy.js

@@ -1,5 +1,5 @@
 export async function loadTrailEffect(engine) {
-    engine.checkVersion("4.0.4");
+    engine.checkVersion("4.1.0");
     await engine.pluginManager.register(e => {
         e.pluginManager.addEffect("trail", async (container) => {
             const { TrailDrawer } = await import("./TrailDrawer.js");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsparticles/effect-trail",
-  "version": "4.0.4",
+  "version": "4.1.0",
   "description": "tsParticles trail effect",
   "homepage": "https://particles.js.org",
   "repository": {
@@ -106,7 +106,7 @@
     "./package.json": "./package.json"
   },
   "peerDependencies": {
-    "@tsparticles/engine": "4.0.4"
+    "@tsparticles/engine": "4.1.0"
   },
   "publishConfig": {
     "access": "public"

package/report.html

@@ -4930,7 +4930,7 @@ var drawChart = (function (exports) {
   </script>
   <script>
     /*<!--*/
-    const data = {"version":2,"tree":{"name":"root","children":[{"name":"tsparticles.effect.trail.js","children":[{"name":"dist/browser","children":[{"uid":"bebe7175-1","name":"TrailDrawer.js"},{"uid":"bebe7175-3","name":"index.js"},{"uid":"bebe7175-5","name":"browser.js"}]}]}],"isRoot":true},"nodeParts":{"bebe7175-1":{"renderedLength":4219,"gzipLength":0,"brotliLength":0,"metaUid":"bebe7175-0"},"bebe7175-3":{"renderedLength":297,"gzipLength":0,"brotliLength":0,"metaUid":"bebe7175-2"},"bebe7175-5":{"renderedLength":173,"gzipLength":0,"brotliLength":0,"metaUid":"bebe7175-4"}},"nodeMetas":{"bebe7175-0":{"id":"/dist/browser/TrailDrawer.js","moduleParts":{"tsparticles.effect.trail.js":"bebe7175-1"},"imported":[{"uid":"bebe7175-6"}],"importedBy":[{"uid":"bebe7175-2"}]},"bebe7175-2":{"id":"/dist/browser/index.js","moduleParts":{"tsparticles.effect.trail.js":"bebe7175-3"},"imported":[{"uid":"bebe7175-0"}],"importedBy":[{"uid":"bebe7175-4"}]},"bebe7175-4":{"id":"/dist/browser/browser.js","moduleParts":{"tsparticles.effect.trail.js":"bebe7175-5"},"imported":[{"uid":"bebe7175-2"}],"importedBy":[],"isEntry":true},"bebe7175-6":{"id":"@tsparticles/engine","moduleParts":{},"imported":[],"importedBy":[{"uid":"bebe7175-0"}],"isExternal":true}},"env":{"rollup":"4.60.4"},"options":{"gzip":false,"brotli":false,"sourcemap":false}};
+    const data = {"version":2,"tree":{"name":"root","children":[{"name":"tsparticles.effect.trail.js","children":[{"name":"dist/browser","children":[{"uid":"97c4234a-1","name":"TrailDrawer.js"},{"uid":"97c4234a-3","name":"index.js"},{"uid":"97c4234a-5","name":"browser.js"}]}]}],"isRoot":true},"nodeParts":{"97c4234a-1":{"renderedLength":6054,"gzipLength":0,"brotliLength":0,"metaUid":"97c4234a-0"},"97c4234a-3":{"renderedLength":297,"gzipLength":0,"brotliLength":0,"metaUid":"97c4234a-2"},"97c4234a-5":{"renderedLength":173,"gzipLength":0,"brotliLength":0,"metaUid":"97c4234a-4"}},"nodeMetas":{"97c4234a-0":{"id":"/dist/browser/TrailDrawer.js","moduleParts":{"tsparticles.effect.trail.js":"97c4234a-1"},"imported":[{"uid":"97c4234a-6"}],"importedBy":[{"uid":"97c4234a-2"}]},"97c4234a-2":{"id":"/dist/browser/index.js","moduleParts":{"tsparticles.effect.trail.js":"97c4234a-3"},"imported":[{"uid":"97c4234a-0"}],"importedBy":[{"uid":"97c4234a-4"}]},"97c4234a-4":{"id":"/dist/browser/browser.js","moduleParts":{"tsparticles.effect.trail.js":"97c4234a-5"},"imported":[{"uid":"97c4234a-2"}],"importedBy":[],"isEntry":true},"97c4234a-6":{"id":"@tsparticles/engine","moduleParts":{},"imported":[],"importedBy":[{"uid":"97c4234a-0"}],"isExternal":true}},"env":{"rollup":"4.60.4"},"options":{"gzip":false,"brotli":false,"sourcemap":false}};
 
     const run = () => {
       const width = window.innerWidth;

package/tsparticles.effect.trail.js

@@ -1,12 +1,12 @@
 (function(g){g.__tsParticlesInternals=g.__tsParticlesInternals||{};g.__tsParticlesInternals.bundles=g.__tsParticlesInternals.bundles||{};g.__tsParticlesInternals.effects=g.__tsParticlesInternals.effects||{};g.__tsParticlesInternals.engine=g.__tsParticlesInternals.engine||{};g.__tsParticlesInternals.interactions=g.__tsParticlesInternals.interactions||{};g.__tsParticlesInternals.palettes=g.__tsParticlesInternals.palettes||{};g.__tsParticlesInternals.paths=g.__tsParticlesInternals.paths||{};g.__tsParticlesInternals.plugins=g.__tsParticlesInternals.plugins||{};g.__tsParticlesInternals.plugins=g.__tsParticlesInternals.plugins||{};g.__tsParticlesInternals.plugins.emittersShapes=g.__tsParticlesInternals.plugins.emittersShapes||{};g.__tsParticlesInternals.presets=g.__tsParticlesInternals.presets||{};g.__tsParticlesInternals.shapes=g.__tsParticlesInternals.shapes||{};g.__tsParticlesInternals.updaters=g.__tsParticlesInternals.updaters||{};g.__tsParticlesInternals.utils=g.__tsParticlesInternals.utils||{};g.__tsParticlesInternals.canvas=g.__tsParticlesInternals.canvas||{};g.__tsParticlesInternals.canvas=g.__tsParticlesInternals.canvas||{};g.__tsParticlesInternals.canvas.utils=g.__tsParticlesInternals.canvas.utils||{};g.__tsParticlesInternals.path=g.__tsParticlesInternals.path||{};g.__tsParticlesInternals.path=g.__tsParticlesInternals.path||{};g.__tsParticlesInternals.path.utils=g.__tsParticlesInternals.path.utils||{};var __tsProxyFactory=typeof Proxy!=="undefined"?function(obj){return new Proxy(obj,{get:function(target,key){if(!(key in target)){target[key]={};}return target[key];}});}:function(obj){return obj;};g.__tsParticlesInternals.bundles=__tsProxyFactory(g.__tsParticlesInternals.bundles);g.__tsParticlesInternals.effects=__tsProxyFactory(g.__tsParticlesInternals.effects);g.__tsParticlesInternals.interactions=__tsProxyFactory(g.__tsParticlesInternals.interactions);g.__tsParticlesInternals.palettes=__tsProxyFactory(g.__tsParticlesInternals.palettes);g.__tsParticlesInternals.paths=__tsProxyFactory(g.__tsParticlesInternals.paths);g.__tsParticlesInternals.plugins=__tsProxyFactory(g.__tsParticlesInternals.plugins);g.__tsParticlesInternals.plugins.emittersShapes=__tsProxyFactory(g.__tsParticlesInternals.plugins.emittersShapes);g.__tsParticlesInternals.presets=__tsProxyFactory(g.__tsParticlesInternals.presets);g.__tsParticlesInternals.shapes=__tsProxyFactory(g.__tsParticlesInternals.shapes);g.__tsParticlesInternals.updaters=__tsProxyFactory(g.__tsParticlesInternals.updaters);g.__tsParticlesInternals.utils=__tsProxyFactory(g.__tsParticlesInternals.utils);g.__tsParticlesInternals.canvas=__tsProxyFactory(g.__tsParticlesInternals.canvas);g.__tsParticlesInternals.path=__tsProxyFactory(g.__tsParticlesInternals.path);g.tsparticlesInternalExports=g.tsparticlesInternalExports||{};})(typeof globalThis!=="undefined"?globalThis:typeof window!=="undefined"?window:this);
-/* Effect v4.0.4 */
+/* Effect v4.1.0 */
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@tsparticles/engine')) :
     typeof define === 'function' && define.amd ? define(['exports', '@tsparticles/engine'], factory) :
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.__tsParticlesInternals = global.__tsParticlesInternals || {}, global.__tsParticlesInternals.effects = global.__tsParticlesInternals.effects || {}, global.__tsParticlesInternals.effects.trail = global.__tsParticlesInternals.effects.trail || {}), global.__tsParticlesInternals.engine));
 })(this, (function (exports, engine) { 'use strict';
 
-    const minTrailLength = 3, trailLengthOffset = 1, minWidth = -1, firstIndex = 0, defaultLength = 10, loopTrailLengthOffset = 2, loopTrailLengthMinIndex = 0;
+    const minTrailLength = 3, trailLengthOffset = 1, minWidth = -1, firstIndex = 0, defaultLength = 10, loopTrailLengthOffset = 2, loopTrailLengthMinIndex = 0, defaultWidth = 0, minBound = 0;
     const defaultTransform = {
         a: 1,
         b: 0,
@@ -14,12 +14,12 @@
         d: 1,
     };
     class TrailDrawer {
-        _container;
+        #container;
         constructor(container) {
-            this._container = container;
+            this.#container = container;
         }
         drawAfter(data) {
-            const { context, drawPosition, drawRadius, drawScale, particle, transformData } = data, container = this._container, diameter = drawRadius * engine.double, pxRatio = container.retina.pixelRatio, trail = particle.trail;
+            const { context, drawPosition, drawRadius, drawScale, particle, transformData } = data, container = this.#container, diameter = drawRadius * engine.double, pxRatio = container.retina.pixelRatio, trail = particle.trail;
             if (!trail || !particle.trailLength) {
                 return;
             }
@@ -67,6 +67,39 @@
             }
             context.restore();
         }
+        isInsideCanvas(data) {
+            const { canvasSize, direction, outMode, particle, radius } = data, position = particle.position, trail = particle.trail;
+            let minX = position.x - radius, maxX = position.x + radius, minY = position.y - radius, maxY = position.y + radius;
+            if (trail?.length) {
+                const widthPadding = Math.max(radius, particle.trailMaxWidth ?? defaultWidth, particle.trailMinWidth ?? defaultWidth);
+                for (const step of trail) {
+                    minX = Math.min(minX, step.position.x - widthPadding);
+                    maxX = Math.max(maxX, step.position.x + widthPadding);
+                    minY = Math.min(minY, step.position.y - widthPadding);
+                    maxY = Math.max(maxY, step.position.y + widthPadding);
+                }
+            }
+            const strictBounds = outMode === engine.OutMode.destroy;
+            if (direction === engine.OutModeDirection.bottom) {
+                return minY <= canvasSize.height;
+            }
+            if (direction === engine.OutModeDirection.left) {
+                return maxX >= minBound;
+            }
+            if (direction === engine.OutModeDirection.right) {
+                return minX <= canvasSize.width;
+            }
+            if (direction === engine.OutModeDirection.top) {
+                return maxY >= minBound;
+            }
+            if (!strictBounds) {
+                return (position.x + radius >= minBound &&
+                    position.y + radius >= minBound &&
+                    position.x - radius <= canvasSize.width &&
+                    position.y - radius <= canvasSize.height);
+            }
+            return maxX >= minBound && maxY >= minBound && minX <= canvasSize.width && minY <= canvasSize.height;
+        }
         particleInit(container, particle) {
             particle.trail = [];
             const effectData = particle.effectData;
@@ -83,7 +116,7 @@
     }
 
     async function loadTrailEffect(engine) {
-        engine.checkVersion("4.0.4");
+        engine.checkVersion("4.1.0");
         await engine.pluginManager.register(e => {
             e.pluginManager.addEffect("trail", container => {
                 return Promise.resolve(new TrailDrawer(container));

package/tsparticles.effect.trail.min.js

@@ -1 +1 @@
-!function(t){t.__tsParticlesInternals=t.__tsParticlesInternals||{},t.__tsParticlesInternals.bundles=t.__tsParticlesInternals.bundles||{},t.__tsParticlesInternals.effects=t.__tsParticlesInternals.effects||{},t.__tsParticlesInternals.engine=t.__tsParticlesInternals.engine||{},t.__tsParticlesInternals.interactions=t.__tsParticlesInternals.interactions||{},t.__tsParticlesInternals.palettes=t.__tsParticlesInternals.palettes||{},t.__tsParticlesInternals.paths=t.__tsParticlesInternals.paths||{},t.__tsParticlesInternals.plugins=t.__tsParticlesInternals.plugins||{},t.__tsParticlesInternals.plugins=t.__tsParticlesInternals.plugins||{},t.__tsParticlesInternals.plugins.emittersShapes=t.__tsParticlesInternals.plugins.emittersShapes||{},t.__tsParticlesInternals.presets=t.__tsParticlesInternals.presets||{},t.__tsParticlesInternals.shapes=t.__tsParticlesInternals.shapes||{},t.__tsParticlesInternals.updaters=t.__tsParticlesInternals.updaters||{},t.__tsParticlesInternals.utils=t.__tsParticlesInternals.utils||{},t.__tsParticlesInternals.canvas=t.__tsParticlesInternals.canvas||{},t.__tsParticlesInternals.canvas=t.__tsParticlesInternals.canvas||{},t.__tsParticlesInternals.canvas.utils=t.__tsParticlesInternals.canvas.utils||{},t.__tsParticlesInternals.path=t.__tsParticlesInternals.path||{},t.__tsParticlesInternals.path=t.__tsParticlesInternals.path||{},t.__tsParticlesInternals.path.utils=t.__tsParticlesInternals.path.utils||{};var s="undefined"!=typeof Proxy?function(t){return new Proxy(t,{get:function(t,s){return s in t||(t[s]={}),t[s]}})}:function(t){return t};t.__tsParticlesInternals.bundles=s(t.__tsParticlesInternals.bundles),t.__tsParticlesInternals.effects=s(t.__tsParticlesInternals.effects),t.__tsParticlesInternals.interactions=s(t.__tsParticlesInternals.interactions),t.__tsParticlesInternals.palettes=s(t.__tsParticlesInternals.palettes),t.__tsParticlesInternals.paths=s(t.__tsParticlesInternals.paths),t.__tsParticlesInternals.plugins=s(t.__tsParticlesInternals.plugins),t.__tsParticlesInternals.plugins.emittersShapes=s(t.__tsParticlesInternals.plugins.emittersShapes),t.__tsParticlesInternals.presets=s(t.__tsParticlesInternals.presets),t.__tsParticlesInternals.shapes=s(t.__tsParticlesInternals.shapes),t.__tsParticlesInternals.updaters=s(t.__tsParticlesInternals.updaters),t.__tsParticlesInternals.utils=s(t.__tsParticlesInternals.utils),t.__tsParticlesInternals.canvas=s(t.__tsParticlesInternals.canvas),t.__tsParticlesInternals.path=s(t.__tsParticlesInternals.path),t.tsparticlesInternalExports=t.tsparticlesInternalExports||{}}("undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:this),function(t,s){"object"==typeof exports&&"undefined"!=typeof module?s(exports,require("@tsparticles/engine")):"function"==typeof define&&define.amd?define(["exports","@tsparticles/engine"],s):s(((t="undefined"!=typeof globalThis?globalThis:t||self).__tsParticlesInternals=t.__tsParticlesInternals||{},t.__tsParticlesInternals.effects=t.__tsParticlesInternals.effects||{},t.__tsParticlesInternals.effects.trail=t.__tsParticlesInternals.effects.trail||{}),t.__tsParticlesInternals.engine)}(this,function(t,s){"use strict";const e={a:1,b:0,c:0,d:1};class a{_container;constructor(t){this._container=t}drawAfter(t){const{context:a,drawPosition:n,drawRadius:l,drawScale:r,particle:i,transformData:_}=t,c=this._container,o=l*s.double,P=c.retina.pixelRatio,p=i.trail;if(!p||!i.trailLength)return;const I=n,f=i.trailLength*r+l;if(p.push({break:i.justWarped,color:a.fillStyle||a.strokeStyle,position:{x:I.x,y:I.y},transformData:_}),p.length<3)return;const h=Math.floor(f);p.length>h&&p.splice(0,p.length-h);const u=Math.min(p.length,f);a.save(),a.lineCap="butt",a.lineJoin="round";for(let t=u-2;t>0;t--){const n=p[t+1],l=p[t],_=p[t-1];if(!n||!l||!_)continue;const c=n.position,I=l.position,f=_.position,h=i.trailTransform?l.transformData??e:e;if(l.break||n.break||_.break)continue;a.setTransform(h.a,h.b,h.c,h.d,I.x,I.y);const d=(c.x+I.x)*s.half-I.x,g=(c.y+I.y)*s.half-I.y,x=(I.x+f.x)*s.half-I.x,b=(I.y+f.y)*s.half-I.y;a.beginPath(),a.moveTo(d,g),a.quadraticCurveTo(s.originPoint.x,s.originPoint.y,x,b);const y=Math.max(t/u*o,P,(i.trailMinWidth??-1)*r),m=a.globalAlpha;a.globalAlpha=i.trailFade?t/u:s.defaultAlpha,a.lineWidth=i.trailMaxWidth?Math.min(y,i.trailMaxWidth*r):y,a.strokeStyle=l.color,a.stroke(),a.globalAlpha=m}a.restore()}particleInit(t,e){e.trail=[];const a=e.effectData;e.trailFade=a?.fade??!0,e.trailLength=s.getRangeValue(a?.length??10)*t.retina.pixelRatio,e.trailMaxWidth=a?.maxWidth?s.getRangeValue(a.maxWidth)*t.retina.pixelRatio:void 0,e.trailMinWidth=a?.minWidth?s.getRangeValue(a.minWidth)*t.retina.pixelRatio:void 0,e.trailTransform=a?.transform??!1}}async function n(t){t.checkVersion("4.0.4"),await t.pluginManager.register(t=>{t.pluginManager.addEffect("trail",t=>Promise.resolve(new a(t)))})}const l=globalThis;l.__tsParticlesInternals=l.__tsParticlesInternals??{},l.loadTrailEffect=n,t.loadTrailEffect=n}),Object.assign(globalThis.window||globalThis,{loadTrailEffect:(globalThis.__tsParticlesInternals.effects.trail||{}).loadTrailEffect}),delete(globalThis.window||globalThis).tsparticlesInternalExports;
+!function(t){t.__tsParticlesInternals=t.__tsParticlesInternals||{},t.__tsParticlesInternals.bundles=t.__tsParticlesInternals.bundles||{},t.__tsParticlesInternals.effects=t.__tsParticlesInternals.effects||{},t.__tsParticlesInternals.engine=t.__tsParticlesInternals.engine||{},t.__tsParticlesInternals.interactions=t.__tsParticlesInternals.interactions||{},t.__tsParticlesInternals.palettes=t.__tsParticlesInternals.palettes||{},t.__tsParticlesInternals.paths=t.__tsParticlesInternals.paths||{},t.__tsParticlesInternals.plugins=t.__tsParticlesInternals.plugins||{},t.__tsParticlesInternals.plugins=t.__tsParticlesInternals.plugins||{},t.__tsParticlesInternals.plugins.emittersShapes=t.__tsParticlesInternals.plugins.emittersShapes||{},t.__tsParticlesInternals.presets=t.__tsParticlesInternals.presets||{},t.__tsParticlesInternals.shapes=t.__tsParticlesInternals.shapes||{},t.__tsParticlesInternals.updaters=t.__tsParticlesInternals.updaters||{},t.__tsParticlesInternals.utils=t.__tsParticlesInternals.utils||{},t.__tsParticlesInternals.canvas=t.__tsParticlesInternals.canvas||{},t.__tsParticlesInternals.canvas=t.__tsParticlesInternals.canvas||{},t.__tsParticlesInternals.canvas.utils=t.__tsParticlesInternals.canvas.utils||{},t.__tsParticlesInternals.path=t.__tsParticlesInternals.path||{},t.__tsParticlesInternals.path=t.__tsParticlesInternals.path||{},t.__tsParticlesInternals.path.utils=t.__tsParticlesInternals.path.utils||{};var s="undefined"!=typeof Proxy?function(t){return new Proxy(t,{get:function(t,s){return s in t||(t[s]={}),t[s]}})}:function(t){return t};t.__tsParticlesInternals.bundles=s(t.__tsParticlesInternals.bundles),t.__tsParticlesInternals.effects=s(t.__tsParticlesInternals.effects),t.__tsParticlesInternals.interactions=s(t.__tsParticlesInternals.interactions),t.__tsParticlesInternals.palettes=s(t.__tsParticlesInternals.palettes),t.__tsParticlesInternals.paths=s(t.__tsParticlesInternals.paths),t.__tsParticlesInternals.plugins=s(t.__tsParticlesInternals.plugins),t.__tsParticlesInternals.plugins.emittersShapes=s(t.__tsParticlesInternals.plugins.emittersShapes),t.__tsParticlesInternals.presets=s(t.__tsParticlesInternals.presets),t.__tsParticlesInternals.shapes=s(t.__tsParticlesInternals.shapes),t.__tsParticlesInternals.updaters=s(t.__tsParticlesInternals.updaters),t.__tsParticlesInternals.utils=s(t.__tsParticlesInternals.utils),t.__tsParticlesInternals.canvas=s(t.__tsParticlesInternals.canvas),t.__tsParticlesInternals.path=s(t.__tsParticlesInternals.path),t.tsparticlesInternalExports=t.tsparticlesInternalExports||{}}("undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:this),function(t,s){"object"==typeof exports&&"undefined"!=typeof module?s(exports,require("@tsparticles/engine")):"function"==typeof define&&define.amd?define(["exports","@tsparticles/engine"],s):s(((t="undefined"!=typeof globalThis?globalThis:t||self).__tsParticlesInternals=t.__tsParticlesInternals||{},t.__tsParticlesInternals.effects=t.__tsParticlesInternals.effects||{},t.__tsParticlesInternals.effects.trail=t.__tsParticlesInternals.effects.trail||{}),t.__tsParticlesInternals.engine)}(this,function(t,s){"use strict";const e={a:1,b:0,c:0,d:1};class a{#t;constructor(t){this.#t=t}drawAfter(t){const{context:a,drawPosition:n,drawRadius:r,drawScale:i,particle:l,transformData:c}=t,_=this.#t,o=r*s.double,p=_.retina.pixelRatio,h=l.trail;if(!h||!l.trailLength)return;const P=n,I=l.trailLength*i+r;if(h.push({break:l.justWarped,color:a.fillStyle||a.strokeStyle,position:{x:P.x,y:P.y},transformData:c}),h.length<3)return;const f=Math.floor(I);h.length>f&&h.splice(0,h.length-f);const d=Math.min(h.length,I);a.save(),a.lineCap="butt",a.lineJoin="round";for(let t=d-2;t>0;t--){const n=h[t+1],r=h[t],c=h[t-1];if(!n||!r||!c)continue;const _=n.position,P=r.position,I=c.position,f=l.trailTransform?r.transformData??e:e;if(r.break||n.break||c.break)continue;a.setTransform(f.a,f.b,f.c,f.d,P.x,P.y);const u=(_.x+P.x)*s.half-P.x,g=(_.y+P.y)*s.half-P.y,x=(P.x+I.x)*s.half-P.x,y=(P.y+I.y)*s.half-P.y;a.beginPath(),a.moveTo(u,g),a.quadraticCurveTo(s.originPoint.x,s.originPoint.y,x,y);const b=Math.max(t/d*o,p,(l.trailMinWidth??-1)*i),m=a.globalAlpha;a.globalAlpha=l.trailFade?t/d:s.defaultAlpha,a.lineWidth=l.trailMaxWidth?Math.min(b,l.trailMaxWidth*i):b,a.strokeStyle=r.color,a.stroke(),a.globalAlpha=m}a.restore()}isInsideCanvas(t){const{canvasSize:e,direction:a,outMode:n,particle:r,radius:i}=t,l=r.position,c=r.trail;let _=l.x-i,o=l.x+i,p=l.y-i,h=l.y+i;if(c?.length){const t=Math.max(i,r.trailMaxWidth??0,r.trailMinWidth??0);for(const s of c)_=Math.min(_,s.position.x-t),o=Math.max(o,s.position.x+t),p=Math.min(p,s.position.y-t),h=Math.max(h,s.position.y+t)}const P=n===s.OutMode.destroy;return a===s.OutModeDirection.bottom?p<=e.height:a===s.OutModeDirection.left?o>=0:a===s.OutModeDirection.right?_<=e.width:a===s.OutModeDirection.top?h>=0:P?o>=0&&h>=0&&_<=e.width&&p<=e.height:l.x+i>=0&&l.y+i>=0&&l.x-i<=e.width&&l.y-i<=e.height}particleInit(t,e){e.trail=[];const a=e.effectData;e.trailFade=a?.fade??!0,e.trailLength=s.getRangeValue(a?.length??10)*t.retina.pixelRatio,e.trailMaxWidth=a?.maxWidth?s.getRangeValue(a.maxWidth)*t.retina.pixelRatio:void 0,e.trailMinWidth=a?.minWidth?s.getRangeValue(a.minWidth)*t.retina.pixelRatio:void 0,e.trailTransform=a?.transform??!1}}async function n(t){t.checkVersion("4.1.0"),await t.pluginManager.register(t=>{t.pluginManager.addEffect("trail",t=>Promise.resolve(new a(t)))})}const r=globalThis;r.__tsParticlesInternals=r.__tsParticlesInternals??{},r.loadTrailEffect=n,t.loadTrailEffect=n}),Object.assign(globalThis.window||globalThis,{loadTrailEffect:(globalThis.__tsParticlesInternals.effects.trail||{}).loadTrailEffect}),delete(globalThis.window||globalThis).tsparticlesInternalExports;

package/types/TrailDrawer.d.ts

@@ -1,4 +1,4 @@
-import { type Container, type ICoordinates, type IEffectDrawer, type IShapeDrawData, type IShapeValues, type Particle, type RangeValue } from "@tsparticles/engine";
+import { type Container, type ICoordinates, type IEffectDrawer, type IParticleCanvasBoundsData, type IShapeDrawData, type IShapeValues, type Particle, type RangeValue } from "@tsparticles/engine";
 export interface TrailStep {
     break: boolean;
     color: string | CanvasGradient | CanvasPattern;
@@ -27,8 +27,9 @@ export type TrailParticle = Particle & {
     trailTransform?: boolean;
 };
 export declare class TrailDrawer implements IEffectDrawer<TrailParticle> {
-    private readonly _container;
+    #private;
     constructor(container: Container);
     drawAfter(data: IShapeDrawData<TrailParticle>): void;
+    isInsideCanvas(data: IParticleCanvasBoundsData<TrailParticle>): boolean;
     particleInit(container: Container, particle: TrailParticle): void;
 }