@tsparticles/plugin-emitters-shape-canvas 3.0.3 → 3.2.0

package/tsparticles.plugin.emitters.shape.canvas.min.js

@@ -1,2 +1,2 @@
 /*! For license information please see tsparticles.plugin.emitters.shape.canvas.min.js.LICENSE.txt */
-!function(t,e){if("object"==typeof exports&&"object"==typeof module)module.exports=e(require("@tsparticles/plugin-emitters"),require("@tsparticles/engine"));else if("function"==typeof define&&define.amd)define(["@tsparticles/plugin-emitters","@tsparticles/engine"],e);else{var i="object"==typeof exports?e(require("@tsparticles/plugin-emitters"),require("@tsparticles/engine")):e(t.window,t.window);for(var s in i)("object"==typeof exports?exports:t)[s]=i[s]}}(this,((t,e)=>(()=>{"use strict";var i={533:t=>{t.exports=e},68:e=>{e.exports=t}},s={};function o(t){var e=s[t];if(void 0!==e)return e.exports;var r=s[t]={exports:{}};return i[t](r,r.exports,o),r.exports}o.d=(t,e)=>{for(var i in e)o.o(e,i)&&!o.o(t,i)&&Object.defineProperty(t,i,{enumerable:!0,get:e[i]})},o.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),o.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};var r={};return(()=>{o.r(r),o.d(r,{loadEmittersShapeCanvas:()=>f});var t=o(68),e=o(533);function i(t,e,i,s=!0){const o=t.getImageData(0,0,e.width,e.height).data;s&&t.clearRect(0,0,e.width,e.height);const r=[];for(let t=0;t<o.length;t+=i){const s=t/i,n={x:s%e.width,y:Math.floor(s/e.width)};r[n.y]||(r[n.y]=[]),r[n.y][n.x]={r:o[t],g:o[t+1],b:o[t+2],a:o[t+3]/255}}return{pixels:r,width:Math.min(...r.map((t=>t.length))),height:r.length}}class s extends t.EmitterShapeBase{constructor(t,i,s,o){super(t,i,s,o);const r=o.filter;let n=t=>t.a>0;if(void 0!==r)if((0,e.isString)(r)){if(Object.hasOwn(window,r)){const t=window[r];(0,e.isFunction)(t)&&(n=t)}}else n=r;this.filter=n,this.scale=o.scale,this.pixelData={pixels:[],height:0,width:0}}async init(){let t;const s=this.options,o=s.selector,r=s.pixels,n=s.image,a=s.element,l=s.text,c=r.offset;if(n){const s=n.src;if(!s)return;t=await function(t,s){const o=new Image;o.crossOrigin="Anonymous";const r=new Promise(((t,r)=>{o.onerror=r,o.onload=()=>{const n=document.createElement("canvas");n.width=o.width,n.height=o.height;const a=n.getContext("2d");if(!a)return r(new Error(`${e.errorPrefix} Could not get canvas context`));a.drawImage(o,0,0,o.width,o.height,0,0,n.width,n.height),t(i(a,n,s))}}));return o.src=t,r}(s,c)}else if(l){const s=function(t,s,o){const r=document.createElement("canvas"),n=r.getContext("2d"),{font:a,text:l,lines:c,color:h}=t;if(!l||!n)return;const d=l.split(c.separator),f=(0,e.isNumber)(a.size)?`${a.size}px`:a.size,p=[];let u=0,g=0;for(const t of d){n.font=`${a.style||""} ${a.variant||""} ${a.weight||""} ${f} ${a.family}`;const e=n.measureText(t),i={measure:e,text:t,height:e.actualBoundingBoxAscent+e.actualBoundingBoxDescent,width:e.width};u=Math.max(u||0,i.width),g+=i.height+c.spacing,p.push(i)}r.width=u,r.height=g;let x=0;for(const t of p)n.font=`${a.style||""} ${a.variant||""} ${a.weight||""} ${f} ${a.family}`,o?(n.fillStyle=h,n.fillText(t.text,0,x+t.measure.actualBoundingBoxAscent)):(n.strokeStyle=h,n.strokeText(t.text,0,x+t.measure.actualBoundingBoxAscent)),x+=t.height+c.spacing;return i(n,r,s)}(l,c,this.fill);if(!s)return;t=s}else if(a||o){const e=a||o&&document.querySelector(o);if(!e)return;const s=e.getContext("2d");if(!s)return;t=i(s,e,c)}t&&(this.pixelData=t)}async randomPosition(){const{height:t,width:i}=this.pixelData,s=this.pixelData,o=this.position,r=this.scale,n=o.x-i*r/2,a=o.y-t*r/2;for(let o=0;o<100;o++){const o=Math.floor((0,e.getRandom)()*i*t),l={x:o%i,y:Math.floor(o/i)},c=s.pixels[l.y][l.x];if(this.filter(c))return{position:{x:l.x*r+n,y:l.y*r+a},color:{...c},opacity:c.a}}return null}resize(t,e){super.resize(t,e)}}class n{constructor(){this.offset=4}load(t){t&&void 0!==t.offset&&(this.offset=t.offset)}}class a{constructor(){this.family="Verdana",this.size=32,this.style="",this.variant="",this.weight=""}load(t){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 l{constructor(){this.separator="\n",this.spacing=0}load(t){t&&(void 0!==t.separator&&(this.separator=t.separator),void 0!==t.spacing&&(this.spacing=t.spacing))}}class c{constructor(){this.color="#000000",this.font=new a,this.lines=new l,this.text=""}load(t){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 h{constructor(){this.filter=t=>t.a>0,this.pixels=new n,this.scale=1,this.selector="",this.text=new c}load(t){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 d{generate(t,e,i,o){const r=new h;return r.load(o),new s(t,e,i,r)}}async function f(t,e=!0){const i=t;i.addEmitterShapeGenerator&&i.addEmitterShapeGenerator("canvas",new d),await i.refresh(e)}})(),r})()));
+!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("@tsparticles/plugin-emitters"),require("@tsparticles/engine"));else if("function"==typeof define&&define.amd)define(["@tsparticles/plugin-emitters","@tsparticles/engine"],t);else{var r="object"==typeof exports?t(require("@tsparticles/plugin-emitters"),require("@tsparticles/engine")):t(e.window,e.window);for(var i in r)("object"==typeof exports?exports:e)[i]=r[i]}}(this,((e,t)=>(()=>{var r,i,n={533:e=>{e.exports=t},68:t=>{t.exports=e}},o={};function a(e){var t=o[e];if(void 0!==t)return t.exports;var r=o[e]={exports:{}};return n[e](r,r.exports,a),r.exports}a.m=n,a.d=(e,t)=>{for(var r in t)a.o(t,r)&&!a.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},a.f={},a.e=e=>Promise.all(Object.keys(a.f).reduce(((t,r)=>(a.f[r](e,t),t)),[])),a.u=e=>e+".min.js",a.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),a.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r={},i="@tsparticles/plugin-emitters-shape-canvas:",a.l=(e,t,n,o)=>{if(r[e])r[e].push(t);else{var s,p;if(void 0!==n)for(var c=document.getElementsByTagName("script"),l=0;l<c.length;l++){var u=c[l];if(u.getAttribute("src")==e||u.getAttribute("data-webpack")==i+n){s=u;break}}s||(p=!0,(s=document.createElement("script")).charset="utf-8",s.timeout=120,a.nc&&s.setAttribute("nonce",a.nc),s.setAttribute("data-webpack",i+n),s.src=e),r[e]=[t];var d=(t,i)=>{s.onerror=s.onload=null,clearTimeout(f);var n=r[e];if(delete r[e],s.parentNode&&s.parentNode.removeChild(s),n&&n.forEach((e=>e(i))),t)return t(i)},f=setTimeout(d.bind(null,void 0,{type:"timeout",target:s}),12e4);s.onerror=d.bind(null,s.onerror),s.onload=d.bind(null,s.onload),p&&document.head.appendChild(s)}},a.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},(()=>{var e;a.g.importScripts&&(e=a.g.location+"");var t=a.g.document;if(!e&&t&&(t.currentScript&&(e=t.currentScript.src),!e)){var r=t.getElementsByTagName("script");if(r.length)for(var i=r.length-1;i>-1&&!e;)e=r[i--].src}if(!e)throw new Error("Automatic publicPath is not supported in this browser");e=e.replace(/#.*$/,"").replace(/\?.*$/,"").replace(/\/[^\/]+$/,"/"),a.p=e})(),(()=>{var e={926:0};a.f.j=(t,r)=>{var i=a.o(e,t)?e[t]:void 0;if(0!==i)if(i)r.push(i[2]);else{var n=new Promise(((r,n)=>i=e[t]=[r,n]));r.push(i[2]=n);var o=a.p+a.u(t),s=new Error;a.l(o,(r=>{if(a.o(e,t)&&(0!==(i=e[t])&&(e[t]=void 0),i)){var n=r&&("load"===r.type?"missing":r.type),o=r&&r.target&&r.target.src;s.message="Loading chunk "+t+" failed.\n("+n+": "+o+")",s.name="ChunkLoadError",s.type=n,s.request=o,i[1](s)}}),"chunk-"+t,t)}};var t=(t,r)=>{var i,n,o=r[0],s=r[1],p=r[2],c=0;if(o.some((t=>0!==e[t]))){for(i in s)a.o(s,i)&&(a.m[i]=s[i]);if(p)p(a)}for(t&&t(r);c<o.length;c++)n=o[c],a.o(e,n)&&e[n]&&e[n][0](),e[n]=0},r=this.webpackChunk_tsparticles_plugin_emitters_shape_canvas=this.webpackChunk_tsparticles_plugin_emitters_shape_canvas||[];r.forEach(t.bind(null,0)),r.push=t.bind(null,r.push.bind(r))})();var s={};return(()=>{async function e(e,t=!0){const r=e,{EmittersCanvasShapeGenerator:i}=await a.e(720).then(a.bind(a,720));r.addEmitterShapeGenerator?.("canvas",new i),await r.refresh(t)}a.r(s),a.d(s,{loadEmittersShapeCanvas:()=>e})})(),s})()));

package/tsparticles.plugin.emitters.shape.canvas.min.js.LICENSE.txt

@@ -1 +1 @@
-/*! tsParticles Emitters Shape Canvas Plugin v3.0.3 by Matteo Bruni */
+/*! tsParticles Emitters Shape Canvas Plugin v3.2.0 by Matteo Bruni */

package/types/types.d.ts

@@ -1,12 +1,12 @@
 import type { IRgba } from "@tsparticles/engine";
-export type CanvasPixelData = {
+export interface CanvasPixelData {
     height: number;
     pixels: IRgba[][];
     width: number;
-};
-export type TextLineData = {
+}
+export interface TextLineData {
     height: number;
     measure: TextMetrics;
     text: string;
     width: number;
-};
+}

package/types/utils.d.ts

@@ -1,5 +1,5 @@
 import type { CanvasPixelData } from "./types.js";
-import type { IDimension } from "@tsparticles/engine";
+import { type IDimension } from "@tsparticles/engine";
 import type { TextOptions } from "./Options/Classes/TextOptions.js";
 export declare function getCanvasImageData(ctx: CanvasRenderingContext2D, size: IDimension, offset: number, clear?: boolean): CanvasPixelData;
 export declare function getImageData(src: string, offset: number): Promise<CanvasPixelData>;

package/umd/EmittersCanvasShape.js

@@ -13,11 +13,12 @@
     const plugin_emitters_1 = require("@tsparticles/plugin-emitters");
     const engine_1 = require("@tsparticles/engine");
     const utils_js_1 = require("./utils.js");
+    const maxRetries = 100, half = 0.5;
     class EmittersCanvasShape extends plugin_emitters_1.EmitterShapeBase {
         constructor(position, size, fill, options) {
             super(position, size, fill, options);
-            const filter = options.filter;
-            let filterFunc = (pixel) => pixel.a > 0;
+            const filter = options.filter, minAlpha = 0;
+            let filterFunc = (pixel) => pixel.a > minAlpha;
             if (filter !== undefined) {
                 if ((0, engine_1.isString)(filter)) {
                     if (Object.hasOwn(window, filter)) {
@@ -56,8 +57,8 @@
                 }
                 pixelData = data;
             }
-            else if (element || selector) {
-                const canvas = element || (selector && document.querySelector(selector));
+            else if (element ?? selector) {
+                const canvas = element ?? (selector && document.querySelector(selector));
                 if (!canvas) {
                     return;
                 }
@@ -73,12 +74,11 @@
             this.pixelData = pixelData;
         }
         async randomPosition() {
-            const { height, width } = this.pixelData, data = this.pixelData, position = this.position, scale = this.scale;
-            const positionOffset = {
-                x: position.x - (width * scale) / 2,
-                y: position.y - (height * scale) / 2,
+            const { height, width } = this.pixelData, data = this.pixelData, position = this.position, scale = this.scale, positionOffset = {
+                x: position.x - width * scale * half,
+                y: position.y - height * scale * half,
             };
-            for (let i = 0; i < 100; i++) {
+            for (let i = 0; i < maxRetries; i++) {
                 const nextIndex = Math.floor((0, engine_1.getRandom)() * width * height), pixelPos = {
                     x: nextIndex % width,
                     y: Math.floor(nextIndex / width),
@@ -86,16 +86,16 @@
                 if (!shouldCreateParticle) {
                     continue;
                 }
-                return {
+                return Promise.resolve({
                     position: {
                         x: pixelPos.x * scale + positionOffset.x,
                         y: pixelPos.y * scale + positionOffset.y,
                     },
                     color: { ...pixel },
                     opacity: pixel.a,
-                };
+                });
             }
-            return null;
+            return Promise.resolve(null);
         }
         resize(position, size) {
             super.resize(position, size);

package/umd/Options/Classes/EmittersCanvasShapeOptions.js

@@ -12,9 +12,10 @@
     exports.EmittersCanvasShapeOptions = void 0;
     const PixelsOptions_js_1 = require("./PixelsOptions.js");
     const TextOptions_js_1 = require("./TextOptions.js");
+    const minAlpha = 0;
     class EmittersCanvasShapeOptions {
         constructor() {
-            this.filter = (pixel) => pixel.a > 0;
+            this.filter = (pixel) => pixel.a > minAlpha;
             this.pixels = new PixelsOptions_js_1.PixelsOptions();
             this.scale = 1;
             this.selector = "";

package/umd/index.js

@@ -1,20 +1,42 @@
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 (function (factory) {
     if (typeof module === "object" && typeof module.exports === "object") {
         var v = factory(require, exports);
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "./EmittersCanvasShapeGenerator.js"], factory);
+        define(["require", "exports"], factory);
     }
 })(function (require, exports) {
     "use strict";
+    var __syncRequire = typeof module === "object" && typeof module.exports === "object";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.loadEmittersShapeCanvas = void 0;
-    const EmittersCanvasShapeGenerator_js_1 = require("./EmittersCanvasShapeGenerator.js");
     async function loadEmittersShapeCanvas(engine, refresh = true) {
-        const emittersEngine = engine;
-        emittersEngine.addEmitterShapeGenerator &&
-            emittersEngine.addEmitterShapeGenerator("canvas", new EmittersCanvasShapeGenerator_js_1.EmittersCanvasShapeGenerator());
+        const emittersEngine = engine, { EmittersCanvasShapeGenerator } = await (__syncRequire ? Promise.resolve().then(() => __importStar(require("./EmittersCanvasShapeGenerator.js"))) : new Promise((resolve_1, reject_1) => { require(["./EmittersCanvasShapeGenerator.js"], resolve_1, reject_1); }).then(__importStar));
+        emittersEngine.addEmitterShapeGenerator?.("canvas", new EmittersCanvasShapeGenerator());
         await emittersEngine.refresh(refresh);
     }
     exports.loadEmittersShapeCanvas = loadEmittersShapeCanvas;

package/umd/utils.js

@@ -11,10 +11,14 @@
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.getTextData = exports.getImageData = exports.getCanvasImageData = void 0;
     const engine_1 = require("@tsparticles/engine");
+    const origin = {
+        x: 0,
+        y: 0,
+    }, minWidth = 0;
     function getCanvasImageData(ctx, size, offset, clear = true) {
-        const imageData = ctx.getImageData(0, 0, size.width, size.height).data;
+        const imageData = ctx.getImageData(origin.x, origin.y, size.width, size.height).data;
         if (clear) {
-            ctx.clearRect(0, 0, size.width, size.height);
+            ctx.clearRect(origin.x, origin.y, size.width, size.height);
         }
         const pixels = [];
         for (let i = 0; i < imageData.length; i += offset) {
@@ -25,11 +29,17 @@
             if (!pixels[pos.y]) {
                 pixels[pos.y] = [];
             }
+            const indexesOffset = {
+                r: 0,
+                g: 1,
+                b: 2,
+                a: 3,
+            }, alphaFactor = 255;
             pixels[pos.y][pos.x] = {
-                r: imageData[i],
-                g: imageData[i + 1],
-                b: imageData[i + 2],
-                a: imageData[i + 3] / 255,
+                r: imageData[i + indexesOffset.r],
+                g: imageData[i + indexesOffset.g],
+                b: imageData[i + indexesOffset.b],
+                a: imageData[i + indexesOffset.a] / alphaFactor,
             };
         }
         return {
@@ -52,7 +62,7 @@
                 if (!context) {
                     return reject(new Error(`${engine_1.errorPrefix} Could not get canvas context`));
                 }
-                context.drawImage(image, 0, 0, image.width, image.height, 0, 0, canvas.width, canvas.height);
+                context.drawImage(image, origin.x, origin.y, image.width, image.height, origin.x, origin.y, canvas.width, canvas.height);
                 resolve(getCanvasImageData(context, canvas, offset));
             };
         });
@@ -75,7 +85,7 @@
                 height: measure.actualBoundingBoxAscent + measure.actualBoundingBoxDescent,
                 width: measure.width,
             };
-            maxWidth = Math.max(maxWidth || 0, lineData.width);
+            maxWidth = Math.max(maxWidth || minWidth, lineData.width);
             totalHeight += lineData.height + linesOptions.spacing;
             linesData.push(lineData);
         }
@@ -86,11 +96,11 @@
             context.font = `${font.style || ""} ${font.variant || ""} ${font.weight || ""} ${fontSize} ${font.family}`;
             if (fill) {
                 context.fillStyle = color;
-                context.fillText(line.text, 0, currentHeight + line.measure.actualBoundingBoxAscent);
+                context.fillText(line.text, origin.x, currentHeight + line.measure.actualBoundingBoxAscent);
             }
             else {
                 context.strokeStyle = color;
-                context.strokeText(line.text, 0, currentHeight + line.measure.actualBoundingBoxAscent);
+                context.strokeText(line.text, origin.x, currentHeight + line.measure.actualBoundingBoxAscent);
             }
             currentHeight += line.height + linesOptions.spacing;
         }