@tsparticles/plugin-emitters-shape-canvas 4.0.0-beta.0 → 4.0.0-beta.10

package/85.min.js

@@ -0,0 +1,2 @@
+"use strict";(this.webpackChunk_tsparticles_plugin_emitters_shape_canvas=this.webpackChunk_tsparticles_plugin_emitters_shape_canvas||[]).push([[85],{85(t,e,i){i.d(e,{EmittersCanvasShapeGenerator:()=>p});var s=i(303),a=i(526),l=i(425);class o extends a.EmitterShapeBase{filter;pixelData;scale;_container;constructor(t,e,i,a,l){super(e,i,a,l),this._container=t;const o=l.filter;let r=t=>t.a>0;if((0,s.isString)(o)){if(o in globalThis){const t=globalThis[o];(0,s.isFunction)(t)&&(r=t)}}else r=o;this.filter=r,this.scale=l.scale,this.pixelData={pixels:[],height:0,width:0}}async init(){let t,e=this.options,i=e.selector,a=e.pixels,o=e.image,r=e.element,n=e.text,h=a.offset;if(o){let e=o.src;if(!e)return;t=await (0,l.getImageData)(e,h,this._container.canvas.render.settings)}else if(r??i){let e=r??(i&&(0,s.safeDocument)().querySelector(i));if(!e)return;let a=e.getContext("2d",this._container.canvas.render.settings);if(!a)return;t=(0,l.getCanvasImageData)(a,e,h)}else{let e=(0,l.getTextData)(n,h,this.fill,this._container.canvas.render.settings);if((0,s.isNull)(e))return;t=e}this.pixelData=t}randomPosition(){let{height:t,width:e}=this.pixelData,i=this.pixelData,a=this.position,l=this.scale,o={x:a.x-e*l*s.half,y:a.y-t*l*s.half};for(let a=0;a<100;a++){let a=Math.floor((0,s.getRandom)()*e*t),r={x:a%e,y:Math.floor(a/e)},n=i.pixels[r.y];if(!n)continue;let h=n[r.x];if(h&&this.filter(h))return{position:{x:r.x*l+o.x,y:r.y*l+o.y},color:{...h},opacity:h.a}}return null}resize(t,e){super.resize(t,e)}}class r{offset;constructor(){this.offset=4}load(t){(0,s.isNull)(t)||void 0!==t.offset&&(this.offset=t.offset)}}class n{family;size;style;variant;weight;constructor(){this.family="Verdana",this.size=32,this.style="",this.variant="",this.weight=""}load(t){(0,s.isNull)(t)||(void 0!==t.family&&(this.family=t.family),void 0!==t.size&&(this.size=t.size),void 0!==t.style&&(this.style=t.style),void 0!==t.variant&&(this.variant=t.variant),void 0!==t.weight&&(this.weight=t.weight))}}class h{separator;spacing;constructor(){this.separator=`
+`,this.spacing=0}load(t){(0,s.isNull)(t)||(void 0!==t.separator&&(this.separator=t.separator),void 0!==t.spacing&&(this.spacing=t.spacing))}}class c{color;font;lines;text;constructor(){this.color="#000000",this.font=new n,this.lines=new h,this.text=""}load(t){(0,s.isNull)(t)||(void 0!==t.color&&(this.color=t.color),this.font.load(t.font),this.lines.load(t.lines),void 0!==t.text&&(this.text=t.text))}}class f{element;filter;image;pixels;scale;selector;text;constructor(){this.filter=t=>t.a>0,this.pixels=new r,this.scale=1,this.selector="",this.text=new c}load(t){(0,s.isNull)(t)||(void 0!==t.element&&(this.element=t.element),void 0!==t.filter&&(this.filter=t.filter),this.pixels.load(t.pixels),void 0!==t.scale&&(this.scale=t.scale),void 0!==t.selector&&(this.selector=t.selector),void 0!==t.image&&(this.image=t.image),this.text.load(t.text))}}class p{generate(t,e,i,s,a){let l=new f;return l.load(a),new o(t,e,i,s,l)}}}}]);

package/README.md

@@ -8,6 +8,12 @@
 
 [tsParticles](https://github.com/tsparticles/tsparticles) plugin for adding the emitters shape canvas support.
 
+## 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
@@ -77,3 +83,19 @@ import { loadEmittersShapeCanvasPlugin } from "@tsparticles/plugin-emitters-shap
   await loadEmittersShapeCanvasPlugin(tsParticles);
 })();
 ```
+
+## Option mapping
+
+- This package primarily extends runtime behavior or rendering and may not expose a single dedicated root options key.
+- Use the usage example in this README and combine with the nearest options section in the docs.
+
+## Common pitfalls
+
+- Calling `tsParticles.load(...)` before `loadEmittersPlugin(...)`
+- 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/EmittersCanvasShape.js

@@ -39,21 +39,21 @@ export class EmittersCanvasShape extends EmitterShapeBase {
             if (!url) {
                 return;
             }
-            pixelData = await getImageData(url, offset, this._container.canvas.settings);
+            pixelData = await getImageData(url, offset, this._container.canvas.render.settings);
         }
         else if (element ?? selector) {
             const canvas = element ?? (selector && safeDocument().querySelector(selector));
             if (!canvas) {
                 return;
             }
-            const context = canvas.getContext("2d", this._container.canvas.settings);
+            const context = canvas.getContext("2d", this._container.canvas.render.settings);
             if (!context) {
                 return;
             }
             pixelData = getCanvasImageData(context, canvas, offset);
         }
         else {
-            const data = getTextData(text, offset, this.fill, this._container.canvas.settings);
+            const data = getTextData(text, offset, this.fill, this._container.canvas.render.settings);
             if (isNull(data)) {
                 return;
             }

package/browser/index.js

@@ -1,9 +1,9 @@
 export async function loadEmittersShapeCanvas(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 { ensureEmittersPluginLoaded } = await import("@tsparticles/plugin-emitters");
         ensureEmittersPluginLoaded(e);
         const { EmittersCanvasShapeGenerator } = await import("./EmittersCanvasShapeGenerator.js");
-        e.addEmitterShapeGenerator?.("canvas", new EmittersCanvasShapeGenerator());
+        e.pluginManager.addEmitterShapeGenerator?.("canvas", new EmittersCanvasShapeGenerator());
     });
 }

package/cjs/EmittersCanvasShape.js

@@ -39,21 +39,21 @@ export class EmittersCanvasShape extends EmitterShapeBase {
             if (!url) {
                 return;
             }
-            pixelData = await getImageData(url, offset, this._container.canvas.settings);
+            pixelData = await getImageData(url, offset, this._container.canvas.render.settings);
         }
         else if (element ?? selector) {
             const canvas = element ?? (selector && safeDocument().querySelector(selector));
             if (!canvas) {
                 return;
             }
-            const context = canvas.getContext("2d", this._container.canvas.settings);
+            const context = canvas.getContext("2d", this._container.canvas.render.settings);
             if (!context) {
                 return;
             }
             pixelData = getCanvasImageData(context, canvas, offset);
         }
         else {
-            const data = getTextData(text, offset, this.fill, this._container.canvas.settings);
+            const data = getTextData(text, offset, this.fill, this._container.canvas.render.settings);
             if (isNull(data)) {
                 return;
             }

package/cjs/index.js

@@ -1,9 +1,9 @@
 export async function loadEmittersShapeCanvas(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 { ensureEmittersPluginLoaded } = await import("@tsparticles/plugin-emitters");
         ensureEmittersPluginLoaded(e);
         const { EmittersCanvasShapeGenerator } = await import("./EmittersCanvasShapeGenerator.js");
-        e.addEmitterShapeGenerator?.("canvas", new EmittersCanvasShapeGenerator());
+        e.pluginManager.addEmitterShapeGenerator?.("canvas", new EmittersCanvasShapeGenerator());
     });
 }

package/dist_browser_EmittersCanvasShapeGenerator_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 */   EmittersCanvasShape: () => (/* binding */ EmittersCanvasShape)\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_emitters__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @tsparticles/plugin-emitters */ \"@tsparticles/plugin-emitters\");\n/* harmony import */ var _tsparticles_canvas_utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @tsparticles/canvas-utils */ \"@tsparticles/canvas-utils\");\n\n\n\nconst maxRetries = 100;\nclass EmittersCanvasShape extends _tsparticles_plugin_emitters__WEBPACK_IMPORTED_MODULE_1__.EmitterShapeBase {\n    filter;\n    pixelData;\n    scale;\n    _container;\n    constructor(container, position, size, fill, options){\n        super(position, size, fill, options);\n        this._container = container;\n        const filter = options.filter, minAlpha = 0;\n        let filterFunc = (pixel)=>pixel.a > minAlpha;\n        if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isString)(filter)) {\n            if (filter in globalThis) {\n                const wndFilter = globalThis[filter];\n                if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isFunction)(wndFilter)) {\n                    filterFunc = wndFilter;\n                }\n            }\n        } else {\n            filterFunc = filter;\n        }\n        this.filter = filterFunc;\n        this.scale = options.scale;\n        this.pixelData = {\n            pixels: [],\n            height: 0,\n            width: 0\n        };\n    }\n    async init() {\n        let pixelData;\n        const options = this.options, selector = options.selector, pixels = options.pixels, image = options.image, element = options.element, text = options.text, offset = pixels.offset;\n        if (image) {\n            const url = image.src;\n            if (!url) {\n                return;\n            }\n            pixelData = await (0,_tsparticles_canvas_utils__WEBPACK_IMPORTED_MODULE_2__.getImageData)(url, offset, this._container.canvas.settings);\n        } else if (element ?? selector) {\n            const canvas = element ?? (selector && (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.safeDocument)().querySelector(selector));\n            if (!canvas) {\n                return;\n            }\n            const context = canvas.getContext(\"2d\", this._container.canvas.settings);\n            if (!context) {\n                return;\n            }\n            pixelData = (0,_tsparticles_canvas_utils__WEBPACK_IMPORTED_MODULE_2__.getCanvasImageData)(context, canvas, offset);\n        } else {\n            const data = (0,_tsparticles_canvas_utils__WEBPACK_IMPORTED_MODULE_2__.getTextData)(text, offset, this.fill, this._container.canvas.settings);\n            if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isNull)(data)) {\n                return;\n            }\n            pixelData = data;\n        }\n        this.pixelData = pixelData;\n    }\n    randomPosition() {\n        const { height, width } = this.pixelData, data = this.pixelData, position = this.position, scale = this.scale, positionOffset = {\n            x: position.x - width * scale * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half,\n            y: position.y - height * scale * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half\n        };\n        for(let i = 0; i < maxRetries; i++){\n            const nextIndex = Math.floor((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRandom)() * width * height), pixelPos = {\n                x: nextIndex % width,\n                y: Math.floor(nextIndex / width)\n            }, row = data.pixels[pixelPos.y];\n            if (!row) {\n                continue;\n            }\n            const pixel = row[pixelPos.x];\n            if (!pixel) {\n                continue;\n            }\n            const shouldCreateParticle = this.filter(pixel);\n            if (!shouldCreateParticle) {\n                continue;\n            }\n            return {\n                position: {\n                    x: pixelPos.x * scale + positionOffset.x,\n                    y: pixelPos.y * scale + positionOffset.y\n                },\n                color: {\n                    ...pixel\n                },\n                opacity: pixel.a\n            };\n        }\n        return null;\n    }\n    resize(position, size) {\n        super.resize(position, size);\n    }\n}\n\n\n//# sourceURL=webpack://@tsparticles/plugin-emitters-shape-canvas/./dist/browser/EmittersCanvasShape.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   EmittersCanvasShape: () => (/* binding */ EmittersCanvasShape)\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_emitters__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @tsparticles/plugin-emitters */ \"@tsparticles/plugin-emitters\");\n/* harmony import */ var _tsparticles_canvas_utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @tsparticles/canvas-utils */ \"@tsparticles/canvas-utils\");\n\n\n\nconst maxRetries = 100;\nclass EmittersCanvasShape extends _tsparticles_plugin_emitters__WEBPACK_IMPORTED_MODULE_1__.EmitterShapeBase {\n    filter;\n    pixelData;\n    scale;\n    _container;\n    constructor(container, position, size, fill, options){\n        super(position, size, fill, options);\n        this._container = container;\n        const filter = options.filter, minAlpha = 0;\n        let filterFunc = (pixel)=>pixel.a > minAlpha;\n        if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isString)(filter)) {\n            if (filter in globalThis) {\n                const wndFilter = globalThis[filter];\n                if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isFunction)(wndFilter)) {\n                    filterFunc = wndFilter;\n                }\n            }\n        } else {\n            filterFunc = filter;\n        }\n        this.filter = filterFunc;\n        this.scale = options.scale;\n        this.pixelData = {\n            pixels: [],\n            height: 0,\n            width: 0\n        };\n    }\n    async init() {\n        let pixelData;\n        const options = this.options, selector = options.selector, pixels = options.pixels, image = options.image, element = options.element, text = options.text, offset = pixels.offset;\n        if (image) {\n            const url = image.src;\n            if (!url) {\n                return;\n            }\n            pixelData = await (0,_tsparticles_canvas_utils__WEBPACK_IMPORTED_MODULE_2__.getImageData)(url, offset, this._container.canvas.render.settings);\n        } else if (element ?? selector) {\n            const canvas = element ?? (selector && (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.safeDocument)().querySelector(selector));\n            if (!canvas) {\n                return;\n            }\n            const context = canvas.getContext(\"2d\", this._container.canvas.render.settings);\n            if (!context) {\n                return;\n            }\n            pixelData = (0,_tsparticles_canvas_utils__WEBPACK_IMPORTED_MODULE_2__.getCanvasImageData)(context, canvas, offset);\n        } else {\n            const data = (0,_tsparticles_canvas_utils__WEBPACK_IMPORTED_MODULE_2__.getTextData)(text, offset, this.fill, this._container.canvas.render.settings);\n            if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isNull)(data)) {\n                return;\n            }\n            pixelData = data;\n        }\n        this.pixelData = pixelData;\n    }\n    randomPosition() {\n        const { height, width } = this.pixelData, data = this.pixelData, position = this.position, scale = this.scale, positionOffset = {\n            x: position.x - width * scale * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half,\n            y: position.y - height * scale * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half\n        };\n        for(let i = 0; i < maxRetries; i++){\n            const nextIndex = Math.floor((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRandom)() * width * height), pixelPos = {\n                x: nextIndex % width,\n                y: Math.floor(nextIndex / width)\n            }, row = data.pixels[pixelPos.y];\n            if (!row) {\n                continue;\n            }\n            const pixel = row[pixelPos.x];\n            if (!pixel) {\n                continue;\n            }\n            const shouldCreateParticle = this.filter(pixel);\n            if (!shouldCreateParticle) {\n                continue;\n            }\n            return {\n                position: {\n                    x: pixelPos.x * scale + positionOffset.x,\n                    y: pixelPos.y * scale + positionOffset.y\n                },\n                color: {\n                    ...pixel\n                },\n                opacity: pixel.a\n            };\n        }\n        return null;\n    }\n    resize(position, size) {\n        super.resize(position, size);\n    }\n}\n\n\n//# sourceURL=webpack://@tsparticles/plugin-emitters-shape-canvas/./dist/browser/EmittersCanvasShape.js?\n}");
 
 /***/ },
 

package/esm/EmittersCanvasShape.js

@@ -39,21 +39,21 @@ export class EmittersCanvasShape extends EmitterShapeBase {
             if (!url) {
                 return;
             }
-            pixelData = await getImageData(url, offset, this._container.canvas.settings);
+            pixelData = await getImageData(url, offset, this._container.canvas.render.settings);
         }
         else if (element ?? selector) {
             const canvas = element ?? (selector && safeDocument().querySelector(selector));
             if (!canvas) {
                 return;
             }
-            const context = canvas.getContext("2d", this._container.canvas.settings);
+            const context = canvas.getContext("2d", this._container.canvas.render.settings);
             if (!context) {
                 return;
             }
             pixelData = getCanvasImageData(context, canvas, offset);
         }
         else {
-            const data = getTextData(text, offset, this.fill, this._container.canvas.settings);
+            const data = getTextData(text, offset, this.fill, this._container.canvas.render.settings);
             if (isNull(data)) {
                 return;
             }

package/esm/index.js

@@ -1,9 +1,9 @@
 export async function loadEmittersShapeCanvas(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 { ensureEmittersPluginLoaded } = await import("@tsparticles/plugin-emitters");
         ensureEmittersPluginLoaded(e);
         const { EmittersCanvasShapeGenerator } = await import("./EmittersCanvasShapeGenerator.js");
-        e.addEmitterShapeGenerator?.("canvas", new EmittersCanvasShapeGenerator());
+        e.pluginManager.addEmitterShapeGenerator?.("canvas", new EmittersCanvasShapeGenerator());
     });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsparticles/plugin-emitters-shape-canvas",
-  "version": "4.0.0-beta.0",
+  "version": "4.0.0-beta.10",
   "description": "tsParticles emitters shape canvas plugin",
   "homepage": "https://particles.js.org",
   "repository": {
@@ -94,15 +94,14 @@
       "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/canvas-utils": "4.0.0-beta.0",
-    "@tsparticles/engine": "4.0.0-beta.0",
-    "@tsparticles/plugin-emitters": "4.0.0-beta.0"
+  "peerDependencies": {
+    "@tsparticles/canvas-utils": "4.0.0-beta.10",
+    "@tsparticles/engine": "4.0.0-beta.10",
+    "@tsparticles/plugin-emitters": "4.0.0-beta.10"
   },
   "publishConfig": {
     "access": "public"