@tsparticles/plugin-trail 4.0.0-beta.0 → 4.0.0-beta.10

package/169.min.js

@@ -0,0 +1 @@
+"use strict";(this.webpackChunk_tsparticles_plugin_trail=this.webpackChunk_tsparticles_plugin_trail||[]).push([[169],{169(l,i,t){t.d(i,{TrailPlugin:()=>s});var e=t(303);class a{color;image;load(l){(0,e.isNull)(l)||(void 0!==l.color&&(this.color=e.OptionsColor.create(this.color,l.color)),void 0!==l.image&&(this.image=l.image))}}class n{enable;fill;length;constructor(){this.enable=!1,this.length=10,this.fill=new a}load(l){(0,e.isNull)(l)||(void 0!==l.enable&&(this.enable=l.enable),void 0!==l.fill&&this.fill.load(l.fill),void 0!==l.length&&(this.length=l.length))}}class s{id="trail";_pluginManager;constructor(l){this._pluginManager=l}async getPlugin(l){let{TrailPluginInstance:i}=await t.e(443).then(t.bind(t,443));return new i(this._pluginManager,l)}loadOptions(l,i,t){if(!this.needsPlugin())return;let e=i.trail;e?.load||(i.trail=e=new n),e.load(t?.trail)}needsPlugin(){return!0}}}}]);

package/443.min.js

@@ -0,0 +1 @@
+"use strict";(this.webpackChunk_tsparticles_plugin_trail=this.webpackChunk_tsparticles_plugin_trail||[]).push([[443],{443(r,e,t){t.d(e,{TrailPluginInstance:()=>a});var i=t(303);class a{_container;_pluginManager;_trailFill;constructor(r,e){this._container=e,this._pluginManager=r}canvasClear(){let r=this._container,e=r.actualOptions.trail,t=this._trailFill;if(!e?.enable||!t||e.length<=0)return!1;let a=!1,l=r.canvas;return t.color?(l.render.paintBase((0,i.getStyleFromRgb)(t.color,r.hdr,t.opacity)),a=!0):t.image&&(l.render.paintImage(t.image,t.opacity),a=!0),a}async init(){try{await this._initTrail()}catch(r){(0,i.getLogger)().error(r)}}_initTrail=async()=>{let r=this._container.actualOptions.trail;if(!r?.enable)return;let e=r.fill,t=i.inverseFactorNumerator/r.length;if(e.color){let r=(0,i.rangeColorToRgb)(this._pluginManager,e.color);if(!r)return;this._trailFill={color:{...r},opacity:t}}else await new Promise((r,a)=>{if(!e.image)return;let l=(0,i.safeDocument)().createElement("img");l.addEventListener("load",()=>{this._trailFill={image:l,opacity:t},r()}),l.addEventListener("error",r=>{(0,i.getLogger)().error(r),a(Error("Error loading image"))}),l.src=e.image})}}}}]);

package/README.md

@@ -8,6 +8,12 @@
 
 [tsParticles](https://github.com/tsparticles/tsparticles) plugin for handling trail feature.
 
+## Quick checklist
+
+1. Install `@tsparticles/engine` (or use the CDN bundle below)
+2. Call the package loader function(s) before `tsParticles.load(...)`
+3. Apply the package options in your `tsParticles.load(...)` config
+
 ## How to use it
 
 ### CDN / Vanilla JS / jQuery
@@ -72,3 +78,24 @@ import { loadTrailPlugin } from "@tsparticles/plugin-trail";
   await loadTrailPlugin(tsParticles);
 })();
 ```
+
+## Option mapping
+
+- Primary options key: `trail`
+
+```json
+{
+  "trail": {}
+}
+```
+
+## Common pitfalls
+
+- Calling `tsParticles.load(...)` before `loadTrailPlugin(...)`
+- Verify required peer packages before enabling advanced options
+- Change one option group at a time to isolate regressions quickly
+
+## Related docs
+
+- All packages catalog: <https://github.com/tsparticles/tsparticles>
+- Main docs: <https://particles.js.org/docs/>

package/browser/TrailPlugin.js

@@ -1,13 +1,13 @@
 import { Trail } from "./Options/Classes/Trail.js";
 export class TrailPlugin {
     id = "trail";
-    _engine;
-    constructor(engine) {
-        this._engine = engine;
+    _pluginManager;
+    constructor(pluginManager) {
+        this._pluginManager = pluginManager;
     }
     async getPlugin(container) {
         const { TrailPluginInstance } = await import("./TrailPluginInstance.js");
-        return new TrailPluginInstance(container, this._engine);
+        return new TrailPluginInstance(this._pluginManager, container);
     }
     loadOptions(_container, options, source) {
         if (!this.needsPlugin()) {

package/browser/TrailPluginInstance.js

@@ -2,11 +2,11 @@ import { getLogger, getStyleFromRgb, inverseFactorNumerator, rangeColorToRgb, sa
 const minimumLength = 0;
 export class TrailPluginInstance {
     _container;
-    _engine;
+    _pluginManager;
     _trailFill;
-    constructor(container, engine) {
+    constructor(pluginManager, container) {
         this._container = container;
-        this._engine = engine;
+        this._pluginManager = pluginManager;
     }
     canvasClear() {
         const container = this._container, trail = container.actualOptions.trail, trailFill = this._trailFill;
@@ -16,11 +16,11 @@ export class TrailPluginInstance {
         let handled = false;
         const canvas = container.canvas;
         if (trailFill.color) {
-            canvas.paintBase(getStyleFromRgb(trailFill.color, container.hdr, trailFill.opacity));
+            canvas.render.paintBase(getStyleFromRgb(trailFill.color, container.hdr, trailFill.opacity));
             handled = true;
         }
         else if (trailFill.image) {
-            canvas.paintImage(trailFill.image, trailFill.opacity);
+            canvas.render.paintImage(trailFill.image, trailFill.opacity);
             handled = true;
         }
         return handled;
@@ -40,7 +40,7 @@ export class TrailPluginInstance {
         }
         const trailFill = trail.fill, opacity = inverseFactorNumerator / trail.length;
         if (trailFill.color) {
-            const fillColor = rangeColorToRgb(this._engine, trailFill.color);
+            const fillColor = rangeColorToRgb(this._pluginManager, trailFill.color);
             if (!fillColor) {
                 return;
             }

package/browser/index.js

@@ -1,7 +1,7 @@
 export async function loadTrailPlugin(engine) {
-    engine.checkVersion("4.0.0-beta.0");
-    await engine.register(async (e) => {
+    engine.checkVersion("4.0.0-beta.10");
+    await engine.pluginManager.register(async (e) => {
         const { TrailPlugin } = await import("./TrailPlugin.js");
-        e.addPlugin(new TrailPlugin(engine));
+        e.pluginManager.addPlugin(new TrailPlugin(e.pluginManager));
     });
 }

package/cjs/TrailPlugin.js

@@ -1,13 +1,13 @@
 import { Trail } from "./Options/Classes/Trail.js";
 export class TrailPlugin {
     id = "trail";
-    _engine;
-    constructor(engine) {
-        this._engine = engine;
+    _pluginManager;
+    constructor(pluginManager) {
+        this._pluginManager = pluginManager;
     }
     async getPlugin(container) {
         const { TrailPluginInstance } = await import("./TrailPluginInstance.js");
-        return new TrailPluginInstance(container, this._engine);
+        return new TrailPluginInstance(this._pluginManager, container);
     }
     loadOptions(_container, options, source) {
         if (!this.needsPlugin()) {

package/cjs/TrailPluginInstance.js

@@ -2,11 +2,11 @@ import { getLogger, getStyleFromRgb, inverseFactorNumerator, rangeColorToRgb, sa
 const minimumLength = 0;
 export class TrailPluginInstance {
     _container;
-    _engine;
+    _pluginManager;
     _trailFill;
-    constructor(container, engine) {
+    constructor(pluginManager, container) {
         this._container = container;
-        this._engine = engine;
+        this._pluginManager = pluginManager;
     }
     canvasClear() {
         const container = this._container, trail = container.actualOptions.trail, trailFill = this._trailFill;
@@ -16,11 +16,11 @@ export class TrailPluginInstance {
         let handled = false;
         const canvas = container.canvas;
         if (trailFill.color) {
-            canvas.paintBase(getStyleFromRgb(trailFill.color, container.hdr, trailFill.opacity));
+            canvas.render.paintBase(getStyleFromRgb(trailFill.color, container.hdr, trailFill.opacity));
             handled = true;
         }
         else if (trailFill.image) {
-            canvas.paintImage(trailFill.image, trailFill.opacity);
+            canvas.render.paintImage(trailFill.image, trailFill.opacity);
             handled = true;
         }
         return handled;
@@ -40,7 +40,7 @@ export class TrailPluginInstance {
         }
         const trailFill = trail.fill, opacity = inverseFactorNumerator / trail.length;
         if (trailFill.color) {
-            const fillColor = rangeColorToRgb(this._engine, trailFill.color);
+            const fillColor = rangeColorToRgb(this._pluginManager, trailFill.color);
             if (!fillColor) {
                 return;
             }

package/cjs/index.js

@@ -1,7 +1,7 @@
 export async function loadTrailPlugin(engine) {
-    engine.checkVersion("4.0.0-beta.0");
-    await engine.register(async (e) => {
+    engine.checkVersion("4.0.0-beta.10");
+    await engine.pluginManager.register(async (e) => {
         const { TrailPlugin } = await import("./TrailPlugin.js");
-        e.addPlugin(new TrailPlugin(engine));
+        e.pluginManager.addPlugin(new TrailPlugin(e.pluginManager));
     });
 }

package/dist_browser_TrailPluginInstance_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-beta.0
+ * v4.0.0-beta.10
  */
 "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 */   TrailPluginInstance: () => (/* binding */ TrailPluginInstance)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n\nconst minimumLength = 0;\nclass TrailPluginInstance {\n    _container;\n    _engine;\n    _trailFill;\n    constructor(container, engine){\n        this._container = container;\n        this._engine = engine;\n    }\n    canvasClear() {\n        const container = this._container, trail = container.actualOptions.trail, trailFill = this._trailFill;\n        if (!trail?.enable || !trailFill || trail.length <= minimumLength) {\n            return false;\n        }\n        let handled = false;\n        const canvas = container.canvas;\n        if (trailFill.color) {\n            canvas.paintBase((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getStyleFromRgb)(trailFill.color, container.hdr, trailFill.opacity));\n            handled = true;\n        } else if (trailFill.image) {\n            canvas.paintImage(trailFill.image, trailFill.opacity);\n            handled = true;\n        }\n        return handled;\n    }\n    async init() {\n        try {\n            await this._initTrail();\n        } catch (e) {\n            (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getLogger)().error(e);\n        }\n    }\n    _initTrail = async ()=>{\n        const options = this._container.actualOptions, trail = options.trail;\n        if (!trail?.enable) {\n            return;\n        }\n        const trailFill = trail.fill, opacity = _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.inverseFactorNumerator / trail.length;\n        if (trailFill.color) {\n            const fillColor = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.rangeColorToRgb)(this._engine, trailFill.color);\n            if (!fillColor) {\n                return;\n            }\n            this._trailFill = {\n                color: {\n                    ...fillColor\n                },\n                opacity\n            };\n        } else {\n            await new Promise((resolve, reject)=>{\n                if (!trailFill.image) {\n                    return;\n                }\n                const img = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.safeDocument)().createElement(\"img\");\n                img.addEventListener(\"load\", ()=>{\n                    this._trailFill = {\n                        image: img,\n                        opacity\n                    };\n                    resolve();\n                });\n                img.addEventListener(\"error\", (evt)=>{\n                    (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getLogger)().error(evt);\n                    reject(new Error(\"Error loading image\"));\n                });\n                img.src = trailFill.image;\n            });\n        }\n    };\n}\n\n\n//# sourceURL=webpack://@tsparticles/plugin-trail/./dist/browser/TrailPluginInstance.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   TrailPluginInstance: () => (/* binding */ TrailPluginInstance)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n\nconst minimumLength = 0;\nclass TrailPluginInstance {\n    _container;\n    _pluginManager;\n    _trailFill;\n    constructor(pluginManager, container){\n        this._container = container;\n        this._pluginManager = pluginManager;\n    }\n    canvasClear() {\n        const container = this._container, trail = container.actualOptions.trail, trailFill = this._trailFill;\n        if (!trail?.enable || !trailFill || trail.length <= minimumLength) {\n            return false;\n        }\n        let handled = false;\n        const canvas = container.canvas;\n        if (trailFill.color) {\n            canvas.render.paintBase((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getStyleFromRgb)(trailFill.color, container.hdr, trailFill.opacity));\n            handled = true;\n        } else if (trailFill.image) {\n            canvas.render.paintImage(trailFill.image, trailFill.opacity);\n            handled = true;\n        }\n        return handled;\n    }\n    async init() {\n        try {\n            await this._initTrail();\n        } catch (e) {\n            (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getLogger)().error(e);\n        }\n    }\n    _initTrail = async ()=>{\n        const options = this._container.actualOptions, trail = options.trail;\n        if (!trail?.enable) {\n            return;\n        }\n        const trailFill = trail.fill, opacity = _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.inverseFactorNumerator / trail.length;\n        if (trailFill.color) {\n            const fillColor = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.rangeColorToRgb)(this._pluginManager, trailFill.color);\n            if (!fillColor) {\n                return;\n            }\n            this._trailFill = {\n                color: {\n                    ...fillColor\n                },\n                opacity\n            };\n        } else {\n            await new Promise((resolve, reject)=>{\n                if (!trailFill.image) {\n                    return;\n                }\n                const img = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.safeDocument)().createElement(\"img\");\n                img.addEventListener(\"load\", ()=>{\n                    this._trailFill = {\n                        image: img,\n                        opacity\n                    };\n                    resolve();\n                });\n                img.addEventListener(\"error\", (evt)=>{\n                    (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getLogger)().error(evt);\n                    reject(new Error(\"Error loading image\"));\n                });\n                img.src = trailFill.image;\n            });\n        }\n    };\n}\n\n\n//# sourceURL=webpack://@tsparticles/plugin-trail/./dist/browser/TrailPluginInstance.js?\n}");
 
 /***/ }
 

package/dist_browser_TrailPlugin_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-beta.0
+ * v4.0.0-beta.10
  */
 "use strict";
 /*
@@ -43,7 +43,7 @@ eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpa
   \*************************************/
 (__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 */   TrailPlugin: () => (/* binding */ TrailPlugin)\n/* harmony export */ });\n/* harmony import */ var _Options_Classes_Trail_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Options/Classes/Trail.js */ \"./dist/browser/Options/Classes/Trail.js\");\n\nclass TrailPlugin {\n    id = \"trail\";\n    _engine;\n    constructor(engine){\n        this._engine = engine;\n    }\n    async getPlugin(container) {\n        const { TrailPluginInstance } = await __webpack_require__.e(/*! import() */ \"dist_browser_TrailPluginInstance_js\").then(__webpack_require__.bind(__webpack_require__, /*! ./TrailPluginInstance.js */ \"./dist/browser/TrailPluginInstance.js\"));\n        return new TrailPluginInstance(container, this._engine);\n    }\n    loadOptions(_container, options, source) {\n        if (!this.needsPlugin()) {\n            return;\n        }\n        let trailOptions = options.trail;\n        if (!trailOptions?.load) {\n            options.trail = trailOptions = new _Options_Classes_Trail_js__WEBPACK_IMPORTED_MODULE_0__.Trail();\n        }\n        trailOptions.load(source?.trail);\n    }\n    needsPlugin() {\n        return true;\n    }\n}\n\n\n//# sourceURL=webpack://@tsparticles/plugin-trail/./dist/browser/TrailPlugin.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   TrailPlugin: () => (/* binding */ TrailPlugin)\n/* harmony export */ });\n/* harmony import */ var _Options_Classes_Trail_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Options/Classes/Trail.js */ \"./dist/browser/Options/Classes/Trail.js\");\n\nclass TrailPlugin {\n    id = \"trail\";\n    _pluginManager;\n    constructor(pluginManager){\n        this._pluginManager = pluginManager;\n    }\n    async getPlugin(container) {\n        const { TrailPluginInstance } = await __webpack_require__.e(/*! import() */ \"dist_browser_TrailPluginInstance_js\").then(__webpack_require__.bind(__webpack_require__, /*! ./TrailPluginInstance.js */ \"./dist/browser/TrailPluginInstance.js\"));\n        return new TrailPluginInstance(this._pluginManager, container);\n    }\n    loadOptions(_container, options, source) {\n        if (!this.needsPlugin()) {\n            return;\n        }\n        let trailOptions = options.trail;\n        if (!trailOptions?.load) {\n            options.trail = trailOptions = new _Options_Classes_Trail_js__WEBPACK_IMPORTED_MODULE_0__.Trail();\n        }\n        trailOptions.load(source?.trail);\n    }\n    needsPlugin() {\n        return true;\n    }\n}\n\n\n//# sourceURL=webpack://@tsparticles/plugin-trail/./dist/browser/TrailPlugin.js?\n}");
 
 /***/ }
 

package/esm/TrailPlugin.js

@@ -1,13 +1,13 @@
 import { Trail } from "./Options/Classes/Trail.js";
 export class TrailPlugin {
     id = "trail";
-    _engine;
-    constructor(engine) {
-        this._engine = engine;
+    _pluginManager;
+    constructor(pluginManager) {
+        this._pluginManager = pluginManager;
     }
     async getPlugin(container) {
         const { TrailPluginInstance } = await import("./TrailPluginInstance.js");
-        return new TrailPluginInstance(container, this._engine);
+        return new TrailPluginInstance(this._pluginManager, container);
     }
     loadOptions(_container, options, source) {
         if (!this.needsPlugin()) {

package/esm/TrailPluginInstance.js

@@ -2,11 +2,11 @@ import { getLogger, getStyleFromRgb, inverseFactorNumerator, rangeColorToRgb, sa
 const minimumLength = 0;
 export class TrailPluginInstance {
     _container;
-    _engine;
+    _pluginManager;
     _trailFill;
-    constructor(container, engine) {
+    constructor(pluginManager, container) {
         this._container = container;
-        this._engine = engine;
+        this._pluginManager = pluginManager;
     }
     canvasClear() {
         const container = this._container, trail = container.actualOptions.trail, trailFill = this._trailFill;
@@ -16,11 +16,11 @@ export class TrailPluginInstance {
         let handled = false;
         const canvas = container.canvas;
         if (trailFill.color) {
-            canvas.paintBase(getStyleFromRgb(trailFill.color, container.hdr, trailFill.opacity));
+            canvas.render.paintBase(getStyleFromRgb(trailFill.color, container.hdr, trailFill.opacity));
             handled = true;
         }
         else if (trailFill.image) {
-            canvas.paintImage(trailFill.image, trailFill.opacity);
+            canvas.render.paintImage(trailFill.image, trailFill.opacity);
             handled = true;
         }
         return handled;
@@ -40,7 +40,7 @@ export class TrailPluginInstance {
         }
         const trailFill = trail.fill, opacity = inverseFactorNumerator / trail.length;
         if (trailFill.color) {
-            const fillColor = rangeColorToRgb(this._engine, trailFill.color);
+            const fillColor = rangeColorToRgb(this._pluginManager, trailFill.color);
             if (!fillColor) {
                 return;
             }

package/esm/index.js

@@ -1,7 +1,7 @@
 export async function loadTrailPlugin(engine) {
-    engine.checkVersion("4.0.0-beta.0");
-    await engine.register(async (e) => {
+    engine.checkVersion("4.0.0-beta.10");
+    await engine.pluginManager.register(async (e) => {
         const { TrailPlugin } = await import("./TrailPlugin.js");
-        e.addPlugin(new TrailPlugin(engine));
+        e.pluginManager.addPlugin(new TrailPlugin(e.pluginManager));
     });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsparticles/plugin-trail",
-  "version": "4.0.0-beta.0",
+  "version": "4.0.0-beta.10",
   "description": "tsParticles trail plugin",
   "homepage": "https://particles.js.org",
   "repository": {
@@ -80,13 +80,12 @@
       "browser": "./browser/index.js",
       "import": "./esm/index.js",
       "require": "./cjs/index.js",
-      "umd": "./umd/index.js",
-      "default": "./cjs/index.js"
+      "default": "./esm/index.js"
     },
     "./package.json": "./package.json"
   },
-  "dependencies": {
-    "@tsparticles/engine": "4.0.0-beta.0"
+  "peerDependencies": {
+    "@tsparticles/engine": "4.0.0-beta.10"
   },
   "publishConfig": {
     "access": "public"