@tsparticles/shape-image 3.0.3 → 3.2.0

package/21.min.js

@@ -0,0 +1,2 @@
+/*! For license information please see 21.min.js.LICENSE.txt */
+(this.webpackChunk_tsparticles_shape_image=this.webpackChunk_tsparticles_shape_image||[]).push([[21],{21:(e,a,i)=>{i.d(a,{ImageDrawer:()=>s});var t=i(533);class s{constructor(e){this.loadImageShape=async e=>{if(!this._engine.loadImage)throw new Error(`${t.errorPrefix} image shape not initialized`);await this._engine.loadImage({gif:e.gif,name:e.name,replaceColor:e.replaceColor??!1,src:e.src})},this._engine=e}addImage(e){this._engine.images||(this._engine.images=[]),this._engine.images.push(e)}async draw(e){const{context:a,radius:t,particle:s,opacity:n}=e,o=s.image,r=o?.element;if(o){if(a.globalAlpha=n,o.gif&&o.gifData){const{drawGif:a}=await i.e(618).then(i.bind(i,618));a(e)}else if(r){const e=o.ratio,i={x:-t,y:-t},s=2*t;a.drawImage(r,i.x,i.y,s,s/e)}a.globalAlpha=1}}getSidesCount(){return 12}async init(e){const a=e.actualOptions;if(a.preload&&this._engine.loadImage)for(const e of a.preload)await this._engine.loadImage(e)}async loadShape(e){if("image"!==e.shape&&"images"!==e.shape)return;this._engine.images||(this._engine.images=[]);const a=e.shapeData;if(!a)return;this._engine.images.find((e=>e.name===a.name||e.source===a.src))||(await this.loadImageShape(a),await this.loadShape(e))}async particleInit(e,a){if("image"!==a.shape&&"images"!==a.shape)return;this._engine.images||(this._engine.images=[]);const t=this._engine.images,s=a.shapeData;if(!s)return;const n=a.getFillColor(),o=t.find((e=>e.name===s.name||e.source===s.src));if(!o)return;const r=s.replaceColor??o.replaceColor;if(o.loading)return void setTimeout((()=>{this.particleInit(e,a)}));let l;if(o.svgData&&n){const{replaceImageColor:e}=await Promise.resolve().then(i.bind(i,103));l=await e(o,s,n,a)}else l={color:n,data:o,element:o.element,gif:o.gif,gifData:o.gifData,gifLoopCount:o.gifLoopCount,loaded:!0,ratio:s.width&&s.height?s.width/s.height:o.ratio??1,replaceColor:r,source:s.src};l.ratio||(l.ratio=1);const g={image:l,fill:s.fill??a.shapeFill,close:s.close??a.shapeClose};a.image=g.image,a.shapeFill=g.fill,a.shapeClose=g.close}}}}]);

package/21.min.js.LICENSE.txt

@@ -0,0 +1 @@
+/*! tsParticles Image Shape v3.2.0 by Matteo Bruni */

package/618.min.js

@@ -0,0 +1,2 @@
+/*! For license information please see 618.min.js.LICENSE.txt */
+(this.webpackChunk_tsparticles_shape_image=this.webpackChunk_tsparticles_shape_image||[]).push([[618],{618:(t,e,a)=>{a.d(e,{drawGif:()=>p,loadGifImage:()=>w});const o=[0,4,2,1],i=[8,8,4,2];class r{constructor(t){this.pos=0,this.data=new Uint8ClampedArray(t)}getString(t){const e=this.data.slice(this.pos,this.pos+t);return this.pos+=e.length,e.reduce(((t,e)=>t+String.fromCharCode(e)),"")}nextByte(){return this.data[this.pos++]}nextTwoBytes(){return this.pos+=2,this.data[this.pos-2]+(this.data[this.pos-1]<<8)}readSubBlocks(){let t="",e=0;do{e=this.data[this.pos++];for(let a=e;--a>=0;t+=String.fromCharCode(this.data[this.pos++]));}while(0!==e);return t}readSubBlocksBin(){let t=this.data[this.pos],e=0;for(let a=0;0!==t;a+=t+1,t=this.data[this.pos+a])e+=t;const a=new Uint8Array(e);t=this.data[this.pos++];for(let e=0;0!==t;t=this.data[this.pos++])for(let o=t;--o>=0;a[e++]=this.data[this.pos++]);return a}skipSubBlocks(){for(const t=1,e=0;this.data[this.pos]!==e;this.pos+=this.data[this.pos]+t);this.pos++}}const s={x:0,y:0},n=0,l=.5,h=0,c=0,g=0;function f(t,e){const a=[];for(let o=0;o<e;o++)a.push({r:t.data[t.pos],g:t.data[t.pos+1],b:t.data[t.pos+2]}),t.pos+=3;return a}async function d(t,e,a,r,s,n){switch(t.nextByte()){case 59:return!0;case 44:await async function(t,e,a,r,s,n){const l=e.frames[r(!0)];l.left=t.nextTwoBytes(),l.top=t.nextTwoBytes(),l.width=t.nextTwoBytes(),l.height=t.nextTwoBytes();const h=t.nextByte(),c=128==(128&h),g=64==(64&h);l.sortFlag=32==(32&h),l.reserved=(24&h)>>>3;const d=1<<1+(7&h);c&&(l.localColorTable=f(t,d));const p=t=>{const{r:o,g:i,b:r}=(c?l.localColorTable:e.globalColorTable)[t];return t!==s(null)?{r:o,g:i,b:r,a:255}:{r:o,g:i,b:r,a:a?~~((o+i+r)/3):0}},w=(()=>{try{return new ImageData(l.width,l.height,{colorSpace:"srgb"})}catch(t){if(t instanceof DOMException&&"IndexSizeError"===t.name)return null;throw t}})();if(null==w)throw new EvalError("GIF frame size is to large");const u=t.nextByte(),m=t.readSubBlocksBin(),y=1<<u,b=(t,e)=>{const a=t>>>3,o=7&t;return(m[a]+(m[a+1]<<8)+(m[a+2]<<16)&(1<<e)-1<<o)>>>o};if(g){for(let a=0,s=u+1,h=0,c=[[0]],g=0;g<4;g++){if(o[g]<l.height){let t=0,e=0,r=!1;for(;!r;){const n=a;if(a=b(h,s),h+=s+1,a===y){s=u+1,c.length=y+2;for(let t=0;t<c.length;t++)c[t]=t<y?[t]:[]}else{a>=c.length?c.push(c[n].concat(c[n][0])):n!==y&&c.push(c[n].concat(c[a][0]));for(const r of c[a]){const{r:a,g:s,b:n,a:h}=p(r);w.data.set([a,s,n,h],o[g]*l.width+i[g]*e+t%(4*l.width)),t+=4}c.length===1<<s&&s<12&&s++}t===4*l.width*(e+1)&&(e++,o[g]+i[g]*e>=l.height&&(r=!0))}}n?.(t.pos/(t.data.length-1),r(!1)+1,w,{x:l.left,y:l.top},{width:e.width,height:e.height})}l.image=w,l.bitmap=await createImageBitmap(w)}else{let a=0,o=u+1,i=0,s=-4,h=!1;const c=[[0]];for(;!h;){const t=a;if(a=b(i,o),i+=o,a===y){o=u+1,c.length=y+2;for(let t=0;t<c.length;t++)c[t]=t<y?[t]:[]}else{if(a===y+1){h=!0;break}a>=c.length?c.push(c[t].concat(c[t][0])):t!==y&&c.push(c[t].concat(c[a][0]));for(const t of c[a]){const{r:e,g:a,b:o,a:i}=p(t);w.data.set([e,a,o,i],s+=4)}c.length>=1<<o&&o<12&&o++}}l.image=w,l.bitmap=await createImageBitmap(w),n?.((t.pos+1)/t.data.length,r(!1)+1,l.image,{x:l.left,y:l.top},{width:e.width,height:e.height})}}(t,e,a,r,s,n);break;case 33:!function(t,e,a,o){switch(t.nextByte()){case 249:{const i=e.frames[a(!1)];t.pos++;const r=t.nextByte();i.GCreserved=(224&r)>>>5,i.disposalMethod=(28&r)>>>2,i.userInputDelayFlag=2==(2&r);const s=1==(1&r);i.delayTime=10*t.nextTwoBytes();const n=t.nextByte();s&&o(n),t.pos++;break}case 255:{t.pos++;const a={identifier:t.getString(8),authenticationCode:t.getString(3),data:t.readSubBlocksBin()};e.applicationExtensions.push(a);break}case 254:e.comments.push([a(!1),t.readSubBlocks()]);break;case 1:if(0===e.globalColorTable.length)throw new EvalError("plain text extension without global color table");t.pos++,e.frames[a(!1)].plainTextData={left:t.nextTwoBytes(),top:t.nextTwoBytes(),width:t.nextTwoBytes(),height:t.nextTwoBytes(),charSize:{width:t.nextTwoBytes(),height:t.nextTwoBytes()},foregroundColor:t.nextByte(),backgroundColor:t.nextByte(),text:t.readSubBlocks()};break;default:t.skipSubBlocks()}}(t,e,r,s);break;default:throw new EvalError("undefined block found")}return!1}function p(t){const{context:e,radius:a,particle:o,delta:i}=t,r=o.image;if(!r?.gifData||!r.gif)return;const f=new OffscreenCanvas(r.gifData.width,r.gifData.height),d=f.getContext("2d");if(!d)throw new Error("could not create offscreen canvas context");d.imageSmoothingQuality="low",d.imageSmoothingEnabled=!1,d.clearRect(s.x,s.y,f.width,f.height),void 0===o.gifLoopCount&&(o.gifLoopCount=r.gifLoopCount??g);let p=o.gifFrame??n;const w={x:-r.gifData.width*l,y:-r.gifData.height*l},u=r.gifData.frames[p];if(void 0===o.gifTime&&(o.gifTime=h),u.bitmap){switch(e.scale(a/r.gifData.width,a/r.gifData.height),u.disposalMethod){case 4:case 5:case 6:case 7:case 0:d.drawImage(u.bitmap,u.left,u.top),e.drawImage(f,w.x,w.y),d.clearRect(s.x,s.y,f.width,f.height);break;case 1:d.drawImage(u.bitmap,u.left,u.top),e.drawImage(f,w.x,w.y);break;case 2:d.drawImage(u.bitmap,u.left,u.top),e.drawImage(f,w.x,w.y),d.clearRect(s.x,s.y,f.width,f.height),r.gifData.globalColorTable.length?d.putImageData(r.gifData.backgroundImage,w.x,w.y):d.putImageData(r.gifData.frames[c].image,w.x+u.left,w.y+u.top);break;case 3:{const t=d.getImageData(s.x,s.y,f.width,f.height);d.drawImage(u.bitmap,u.left,u.top),e.drawImage(f,w.x,w.y),d.clearRect(s.x,s.y,f.width,f.height),d.putImageData(t,s.x,s.y)}}if(o.gifTime+=i.value,o.gifTime>u.delayTime){if(o.gifTime-=u.delayTime,++p>=r.gifData.frames.length){if(--o.gifLoopCount<=g)return;p=c,d.clearRect(s.x,s.y,f.width,f.height)}o.gifFrame=p}e.scale(r.gifData.width/a,r.gifData.height/a)}}async function w(t){if("gif"===t.type){t.loading=!0;try{t.gifData=await async function(t,e,a){a||(a=!1);const o=await fetch(t);if(!o.ok&&404===o.status)throw new EvalError("file not found");const i=await o.arrayBuffer(),s={width:0,height:0,totalTime:0,colorRes:0,pixelAspectRatio:0,frames:[],sortFlag:!1,globalColorTable:[],backgroundImage:new ImageData(1,1,{colorSpace:"srgb"}),comments:[],applicationExtensions:[]},n=new r(new Uint8ClampedArray(i));if("GIF89a"!==n.getString(6))throw new Error("not a supported GIF file");s.width=n.nextTwoBytes(),s.height=n.nextTwoBytes();const l=n.nextByte(),h=128==(128&l);s.colorRes=(112&l)>>>4,s.sortFlag=8==(8&l);const c=1<<1+(7&l),g=n.nextByte();s.pixelAspectRatio=n.nextByte(),0!==s.pixelAspectRatio&&(s.pixelAspectRatio=(s.pixelAspectRatio+15)/64),h&&(s.globalColorTable=f(n,c));const p=(()=>{try{return new ImageData(s.width,s.height,{colorSpace:"srgb"})}catch(t){if(t instanceof DOMException&&"IndexSizeError"===t.name)return null;throw t}})();if(null==p)throw new Error("GIF frame size is to large");const{r:w,g:u,b:m}=s.globalColorTable[g];p.data.set(h?[w,u,m,255]:[0,0,0,0]);for(let t=4;t<p.data.length;t*=2)p.data.copyWithin(t,0,t);s.backgroundImage=p;let y=-1,b=!0,x=-1;const B=t=>(t&&(b=!0),y),T=t=>(null!=t&&(x=t),x);try{do{b&&(s.frames.push({left:0,top:0,width:0,height:0,disposalMethod:0,image:new ImageData(1,1,{colorSpace:"srgb"}),plainTextData:null,userInputDelayFlag:!1,delayTime:0,sortFlag:!1,localColorTable:[],reserved:0,GCreserved:0}),y++,x=-1,b=!1)}while(!await d(n,s,a,B,T,e));s.frames.length--;for(const t of s.frames){if(t.userInputDelayFlag&&0===t.delayTime){s.totalTime=1/0;break}s.totalTime+=t.delayTime}return s}catch(t){if(t instanceof EvalError)throw new Error(`error while parsing frame ${y} "${t.message}"`);throw t}}(t.source),t.gifLoopCount=function(t){for(const e of t.applicationExtensions)if(e.identifier+e.authenticationCode==="NETSCAPE2.0")return e.data[1]+(e.data[2]<<8);return NaN}(t.gifData)??g,t.gifLoopCount||(t.gifLoopCount=1/0)}catch{t.error=!0}t.loading=!1}else{const{loadImage:e}=await Promise.resolve().then(a.bind(a,103));await e(t)}}}}]);

package/618.min.js.LICENSE.txt

@@ -0,0 +1 @@
+/*! tsParticles Image Shape v3.2.0 by Matteo Bruni */

package/623.min.js

@@ -0,0 +1,2 @@
+/*! For license information please see 623.min.js.LICENSE.txt */
+(this.webpackChunk_tsparticles_shape_image=this.webpackChunk_tsparticles_shape_image||[]).push([[623],{623:(e,i,s)=>{s.d(i,{ImagePreloaderPlugin:()=>r});class o{constructor(){this.src="",this.gif=!1}load(e){e&&(void 0!==e.gif&&(this.gif=e.gif),void 0!==e.height&&(this.height=e.height),void 0!==e.name&&(this.name=e.name),void 0!==e.replaceColor&&(this.replaceColor=e.replaceColor),void 0!==e.src&&(this.src=e.src),void 0!==e.width&&(this.width=e.width))}}class r{constructor(e){this.id="imagePreloader",this._engine=e}async getPlugin(){return await Promise.resolve(),{}}loadOptions(e,i){if(!i?.preload)return;e.preload||(e.preload=[]);const s=e.preload;for(const e of i.preload){const i=s.find((i=>i.name===e.name||i.src===e.src));if(i)i.load(e);else{const i=new o;i.load(e),s.push(i)}}}needsPlugin(){return!0}}}}]);

package/623.min.js.LICENSE.txt

@@ -0,0 +1 @@
+/*! tsParticles Image Shape v3.2.0 by Matteo Bruni */

package/browser/GifUtils/ByteStream.js

@@ -12,32 +12,36 @@ export class ByteStream {
         return this.data[this.pos++];
     }
     nextTwoBytes() {
-        this.pos += 2;
-        return this.data[this.pos - 2] + (this.data[this.pos - 1] << 8);
+        const increment = 2, previous = 1, shift = 8;
+        this.pos += increment;
+        return this.data[this.pos - increment] + (this.data[this.pos - previous] << shift);
     }
     readSubBlocks() {
         let blockString = "", size = 0;
+        const minCount = 0, emptySize = 0;
         do {
             size = this.data[this.pos++];
-            for (let count = size; --count >= 0; blockString += String.fromCharCode(this.data[this.pos++])) {
+            for (let count = size; --count >= minCount; blockString += String.fromCharCode(this.data[this.pos++])) {
             }
-        } while (size !== 0);
+        } while (size !== emptySize);
         return blockString;
     }
     readSubBlocksBin() {
-        let size = 0, len = 0;
-        for (let offset = 0; (size = this.data[this.pos + offset]) !== 0; offset += size + 1) {
+        let size = this.data[this.pos], len = 0;
+        const emptySize = 0, increment = 1;
+        for (let offset = 0; size !== emptySize; offset += size + increment, size = this.data[this.pos + offset]) {
             len += size;
         }
         const blockData = new Uint8Array(len);
-        for (let i = 0; (size = this.data[this.pos++]) !== 0;) {
-            for (let count = size; --count >= 0; blockData[i++] = this.data[this.pos++]) {
+        size = this.data[this.pos++];
+        for (let i = 0; size !== emptySize; size = this.data[this.pos++]) {
+            for (let count = size; --count >= emptySize; blockData[i++] = this.data[this.pos++]) {
             }
         }
         return blockData;
     }
     skipSubBlocks() {
-        for (; this.data[this.pos] !== 0; this.pos += this.data[this.pos] + 1) {
+        for (const increment = 1, noData = 0; this.data[this.pos] !== noData; this.pos += this.data[this.pos] + increment) {
         }
         this.pos++;
     }

package/browser/GifUtils/Utils.js

@@ -1,5 +1,9 @@
 import { InterlaceOffsets, InterlaceSteps } from "./Constants.js";
 import { ByteStream } from "./ByteStream.js";
+const origin = {
+    x: 0,
+    y: 0,
+}, defaultFrame = 0, half = 0.5, initialTime = 0, firstIndex = 0, defaultLoopCount = 0;
 function parseColorTable(byteStream, count) {
     const colors = [];
     for (let i = 0; i < count; i++) {
@@ -12,7 +16,7 @@ function parseColorTable(byteStream, count) {
     }
     return colors;
 }
-async function parseExtensionBlock(byteStream, gif, getFrameIndex, getTransparencyIndex) {
+function parseExtensionBlock(byteStream, gif, getFrameIndex, getTransparencyIndex) {
     switch (byteStream.nextByte()) {
         case 249: {
             const frame = gif.frames[getFrameIndex(false)];
@@ -84,7 +88,10 @@ async function parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTran
     }
     const getColor = (index) => {
         const { r, g, b } = (localColorTableFlag ? frame.localColorTable : gif.globalColorTable)[index];
-        return { r, g, b, a: index === getTransparencyIndex(null) ? (avgAlpha ? ~~((r + g + b) / 3) : 0) : 255 };
+        if (index !== getTransparencyIndex(null)) {
+            return { r, g, b, a: 255 };
+        }
+        return { r, g, b, a: avgAlpha ? ~~((r + g + b) / 3) : 0 };
     };
     const image = (() => {
         try {
@@ -110,7 +117,8 @@ async function parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTran
     if (interlacedFlag) {
         for (let code = 0, size = minCodeSize + 1, pos = 0, dic = [[0]], pass = 0; pass < 4; pass++) {
             if (InterlaceOffsets[pass] < frame.height) {
-                for (let pixelPos = 0, lineIndex = 0;;) {
+                let pixelPos = 0, lineIndex = 0, exit = false;
+                while (!exit) {
                     const last = code;
                     code = readBits(pos, size);
                     pos += size + 1;
@@ -128,8 +136,8 @@ async function parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTran
                         else if (last !== clearCode) {
                             dic.push(dic[last].concat(dic[code][0]));
                         }
-                        for (let i = 0; i < dic[code].length; i++) {
-                            const { r, g, b, a } = getColor(dic[code][i]);
+                        for (const item of dic[code]) {
+                            const { r, g, b, a } = getColor(item);
                             image.data.set([r, g, b, a], InterlaceOffsets[pass] * frame.width +
                                 InterlaceSteps[pass] * lineIndex +
                                 (pixelPos % (frame.width * 4)));
@@ -142,7 +150,7 @@ async function parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTran
                     if (pixelPos === frame.width * 4 * (lineIndex + 1)) {
                         lineIndex++;
                         if (InterlaceOffsets[pass] + InterlaceSteps[pass] * lineIndex >= frame.height) {
-                            break;
+                            exit = true;
                         }
                     }
                 }
@@ -153,7 +161,9 @@ async function parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTran
         frame.bitmap = await createImageBitmap(image);
     }
     else {
-        for (let code = 0, size = minCodeSize + 1, pos = 0, dic = [[0]], pixelPos = -4;;) {
+        let code = 0, size = minCodeSize + 1, pos = 0, pixelPos = -4, exit = false;
+        const dic = [[0]];
+        while (!exit) {
             const last = code;
             code = readBits(pos, size);
             pos += size;
@@ -166,6 +176,7 @@ async function parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTran
             }
             else {
                 if (code === clearCode + 1) {
+                    exit = true;
                     break;
                 }
                 if (code >= dic.length) {
@@ -174,8 +185,8 @@ async function parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTran
                 else if (last !== clearCode) {
                     dic.push(dic[last].concat(dic[code][0]));
                 }
-                for (let i = 0; i < dic[code].length; i++) {
-                    const { r, g, b, a } = getColor(dic[code][i]);
+                for (const item of dic[code]) {
+                    const { r, g, b, a } = getColor(item);
                     image.data.set([r, g, b, a], (pixelPos += 4));
                 }
                 if (dic.length >= 1 << size && size < 0xc) {
@@ -196,7 +207,7 @@ async function parseBlock(byteStream, gif, avgAlpha, getFrameIndex, getTranspare
             await parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTransparencyIndex, progressCallback);
             break;
         case 33:
-            await parseExtensionBlock(byteStream, gif, getFrameIndex, getTransparencyIndex);
+            parseExtensionBlock(byteStream, gif, getFrameIndex, getTransparencyIndex);
             break;
         default:
             throw new EvalError("undefined block found");
@@ -322,3 +333,95 @@ export async function decodeGIF(gifURL, progressCallback, avgAlpha) {
         throw error;
     }
 }
+export function drawGif(data) {
+    const { context, radius, particle, delta } = data, image = particle.image;
+    if (!image?.gifData || !image.gif) {
+        return;
+    }
+    const offscreenCanvas = new OffscreenCanvas(image.gifData.width, image.gifData.height), offscreenContext = offscreenCanvas.getContext("2d");
+    if (!offscreenContext) {
+        throw new Error("could not create offscreen canvas context");
+    }
+    offscreenContext.imageSmoothingQuality = "low";
+    offscreenContext.imageSmoothingEnabled = false;
+    offscreenContext.clearRect(origin.x, origin.y, offscreenCanvas.width, offscreenCanvas.height);
+    if (particle.gifLoopCount === undefined) {
+        particle.gifLoopCount = image.gifLoopCount ?? defaultLoopCount;
+    }
+    let frameIndex = particle.gifFrame ?? defaultFrame;
+    const pos = { x: -image.gifData.width * half, y: -image.gifData.height * half }, frame = image.gifData.frames[frameIndex];
+    if (particle.gifTime === undefined) {
+        particle.gifTime = initialTime;
+    }
+    if (!frame.bitmap) {
+        return;
+    }
+    context.scale(radius / image.gifData.width, radius / image.gifData.height);
+    switch (frame.disposalMethod) {
+        case 4:
+        case 5:
+        case 6:
+        case 7:
+        case 0:
+            offscreenContext.drawImage(frame.bitmap, frame.left, frame.top);
+            context.drawImage(offscreenCanvas, pos.x, pos.y);
+            offscreenContext.clearRect(origin.x, origin.y, offscreenCanvas.width, offscreenCanvas.height);
+            break;
+        case 1:
+            offscreenContext.drawImage(frame.bitmap, frame.left, frame.top);
+            context.drawImage(offscreenCanvas, pos.x, pos.y);
+            break;
+        case 2:
+            offscreenContext.drawImage(frame.bitmap, frame.left, frame.top);
+            context.drawImage(offscreenCanvas, pos.x, pos.y);
+            offscreenContext.clearRect(origin.x, origin.y, offscreenCanvas.width, offscreenCanvas.height);
+            if (!image.gifData.globalColorTable.length) {
+                offscreenContext.putImageData(image.gifData.frames[firstIndex].image, pos.x + frame.left, pos.y + frame.top);
+            }
+            else {
+                offscreenContext.putImageData(image.gifData.backgroundImage, pos.x, pos.y);
+            }
+            break;
+        case 3:
+            {
+                const previousImageData = offscreenContext.getImageData(origin.x, origin.y, offscreenCanvas.width, offscreenCanvas.height);
+                offscreenContext.drawImage(frame.bitmap, frame.left, frame.top);
+                context.drawImage(offscreenCanvas, pos.x, pos.y);
+                offscreenContext.clearRect(origin.x, origin.y, offscreenCanvas.width, offscreenCanvas.height);
+                offscreenContext.putImageData(previousImageData, origin.x, origin.y);
+            }
+            break;
+    }
+    particle.gifTime += delta.value;
+    if (particle.gifTime > frame.delayTime) {
+        particle.gifTime -= frame.delayTime;
+        if (++frameIndex >= image.gifData.frames.length) {
+            if (--particle.gifLoopCount <= defaultLoopCount) {
+                return;
+            }
+            frameIndex = firstIndex;
+            offscreenContext.clearRect(origin.x, origin.y, offscreenCanvas.width, offscreenCanvas.height);
+        }
+        particle.gifFrame = frameIndex;
+    }
+    context.scale(image.gifData.width / radius, image.gifData.height / radius);
+}
+export async function loadGifImage(image) {
+    if (image.type !== "gif") {
+        const { loadImage } = await import("../Utils.js");
+        await loadImage(image);
+        return;
+    }
+    image.loading = true;
+    try {
+        image.gifData = await decodeGIF(image.source);
+        image.gifLoopCount = getGIFLoopAmount(image.gifData) ?? defaultLoopCount;
+        if (!image.gifLoopCount) {
+            image.gifLoopCount = Infinity;
+        }
+    }
+    catch {
+        image.error = true;
+    }
+    image.loading = false;
+}

package/browser/ImageDrawer.js

@@ -1,5 +1,5 @@
 import { errorPrefix } from "@tsparticles/engine";
-import { replaceImageColor } from "./Utils.js";
+const double = 2, defaultAlpha = 1, sides = 12, defaultRatio = 1;
 export class ImageDrawer {
     constructor(engine) {
         this.loadImageShape = async (imageShape) => {
@@ -21,92 +21,27 @@ export class ImageDrawer {
         }
         this._engine.images.push(image);
     }
-    draw(data) {
-        const { context, radius, particle, opacity, delta } = data, image = particle.image, element = image?.element;
+    async draw(data) {
+        const { context, radius, particle, opacity } = data, image = particle.image, element = image?.element;
         if (!image) {
             return;
         }
         context.globalAlpha = opacity;
         if (image.gif && image.gifData) {
-            const offscreenCanvas = new OffscreenCanvas(image.gifData.width, image.gifData.height), offscreenContext = offscreenCanvas.getContext("2d");
-            if (!offscreenContext) {
-                throw new Error("could not create offscreen canvas context");
-            }
-            offscreenContext.imageSmoothingQuality = "low";
-            offscreenContext.imageSmoothingEnabled = false;
-            offscreenContext.clearRect(0, 0, offscreenCanvas.width, offscreenCanvas.height);
-            if (particle.gifLoopCount === undefined) {
-                particle.gifLoopCount = image.gifLoopCount ?? 0;
-            }
-            let frameIndex = particle.gifFrame ?? 0;
-            const pos = { x: -image.gifData.width * 0.5, y: -image.gifData.height * 0.5 }, frame = image.gifData.frames[frameIndex];
-            if (particle.gifTime === undefined) {
-                particle.gifTime = 0;
-            }
-            if (!frame.bitmap) {
-                return;
-            }
-            context.scale(radius / image.gifData.width, radius / image.gifData.height);
-            switch (frame.disposalMethod) {
-                case 4:
-                case 5:
-                case 6:
-                case 7:
-                case 0:
-                    offscreenContext.drawImage(frame.bitmap, frame.left, frame.top);
-                    context.drawImage(offscreenCanvas, pos.x, pos.y);
-                    offscreenContext.clearRect(0, 0, offscreenCanvas.width, offscreenCanvas.height);
-                    break;
-                case 1:
-                    offscreenContext.drawImage(frame.bitmap, frame.left, frame.top);
-                    context.drawImage(offscreenCanvas, pos.x, pos.y);
-                    break;
-                case 2:
-                    offscreenContext.drawImage(frame.bitmap, frame.left, frame.top);
-                    context.drawImage(offscreenCanvas, pos.x, pos.y);
-                    offscreenContext.clearRect(0, 0, offscreenCanvas.width, offscreenCanvas.height);
-                    if (image.gifData.globalColorTable.length === 0) {
-                        offscreenContext.putImageData(image.gifData.frames[0].image, pos.x + frame.left, pos.y + frame.top);
-                    }
-                    else {
-                        offscreenContext.putImageData(image.gifData.backgroundImage, pos.x, pos.y);
-                    }
-                    break;
-                case 3:
-                    {
-                        const previousImageData = offscreenContext.getImageData(0, 0, offscreenCanvas.width, offscreenCanvas.height);
-                        offscreenContext.drawImage(frame.bitmap, frame.left, frame.top);
-                        context.drawImage(offscreenCanvas, pos.x, pos.y);
-                        offscreenContext.clearRect(0, 0, offscreenCanvas.width, offscreenCanvas.height);
-                        offscreenContext.putImageData(previousImageData, 0, 0);
-                    }
-                    break;
-            }
-            particle.gifTime += delta.value;
-            if (particle.gifTime > frame.delayTime) {
-                particle.gifTime -= frame.delayTime;
-                if (++frameIndex >= image.gifData.frames.length) {
-                    if (--particle.gifLoopCount <= 0) {
-                        return;
-                    }
-                    frameIndex = 0;
-                    offscreenContext.clearRect(0, 0, offscreenCanvas.width, offscreenCanvas.height);
-                }
-                particle.gifFrame = frameIndex;
-            }
-            context.scale(image.gifData.width / radius, image.gifData.height / radius);
+            const { drawGif } = await import("./GifUtils/Utils.js");
+            drawGif(data);
         }
         else if (element) {
             const ratio = image.ratio, pos = {
                 x: -radius,
                 y: -radius,
-            }, diameter = radius * 2;
+            }, diameter = radius * double;
             context.drawImage(element, pos.x, pos.y, diameter, diameter / ratio);
         }
-        context.globalAlpha = 1;
+        context.globalAlpha = defaultAlpha;
     }
     getSidesCount() {
-        return 12;
+        return sides;
     }
     async init(container) {
         const options = container.actualOptions;
@@ -117,7 +52,7 @@ export class ImageDrawer {
             await this._engine.loadImage(imageData);
         }
     }
-    loadShape(particle) {
+    async loadShape(particle) {
         if (particle.shape !== "image" && particle.shape !== "images") {
             return;
         }
@@ -130,12 +65,11 @@ export class ImageDrawer {
         }
         const image = this._engine.images.find((t) => t.name === imageData.name || t.source === imageData.src);
         if (!image) {
-            this.loadImageShape(imageData).then(() => {
-                this.loadShape(particle);
-            });
+            await this.loadImageShape(imageData);
+            await this.loadShape(particle);
         }
     }
-    particleInit(container, particle) {
+    async particleInit(container, particle) {
         if (particle.shape !== "image" && particle.shape !== "images") {
             return;
         }
@@ -153,40 +87,41 @@ export class ImageDrawer {
         const replaceColor = imageData.replaceColor ?? image.replaceColor;
         if (image.loading) {
             setTimeout(() => {
-                this.particleInit(container, particle);
+                void this.particleInit(container, particle);
             });
             return;
         }
-        (async () => {
-            let imageRes;
-            if (image.svgData && color) {
-                imageRes = await replaceImageColor(image, imageData, color, particle);
-            }
-            else {
-                imageRes = {
-                    color,
-                    data: image,
-                    element: image.element,
-                    gif: image.gif,
-                    gifData: image.gifData,
-                    gifLoopCount: image.gifLoopCount,
-                    loaded: true,
-                    ratio: imageData.width && imageData.height ? imageData.width / imageData.height : image.ratio ?? 1,
-                    replaceColor: replaceColor,
-                    source: imageData.src,
-                };
-            }
-            if (!imageRes.ratio) {
-                imageRes.ratio = 1;
-            }
-            const fill = imageData.fill ?? particle.shapeFill, close = imageData.close ?? particle.shapeClose, imageShape = {
-                image: imageRes,
-                fill,
-                close,
+        let imageRes;
+        if (image.svgData && color) {
+            const { replaceImageColor } = await import("./Utils.js");
+            imageRes = await replaceImageColor(image, imageData, color, particle);
+        }
+        else {
+            imageRes = {
+                color,
+                data: image,
+                element: image.element,
+                gif: image.gif,
+                gifData: image.gifData,
+                gifLoopCount: image.gifLoopCount,
+                loaded: true,
+                ratio: imageData.width && imageData.height
+                    ? imageData.width / imageData.height
+                    : image.ratio ?? defaultRatio,
+                replaceColor: replaceColor,
+                source: imageData.src,
             };
-            particle.image = imageShape.image;
-            particle.shapeFill = imageShape.fill;
-            particle.shapeClose = imageShape.close;
-        })();
+        }
+        if (!imageRes.ratio) {
+            imageRes.ratio = 1;
+        }
+        const fill = imageData.fill ?? particle.shapeFill, close = imageData.close ?? particle.shapeClose, imageShape = {
+            image: imageRes,
+            fill,
+            close,
+        };
+        particle.image = imageShape.image;
+        particle.shapeFill = imageShape.fill;
+        particle.shapeClose = imageShape.close;
     }
 }

package/browser/ImagePreloader.js

@@ -4,11 +4,12 @@ export class ImagePreloaderPlugin {
         this.id = "imagePreloader";
         this._engine = engine;
     }
-    getPlugin() {
+    async getPlugin() {
+        await Promise.resolve();
         return {};
     }
     loadOptions(options, source) {
-        if (!source || !source.preload) {
+        if (!source?.preload) {
             return;
         }
         if (!options.preload) {

package/browser/Utils.js

@@ -1,5 +1,5 @@
 import { errorPrefix, getLogger, getStyleFromHsl } from "@tsparticles/engine";
-import { decodeGIF, getGIFLoopAmount } from "./GifUtils/Utils.js";
+const stringStart = 0, defaultOpacity = 1;
 const currentColorRegex = /(#(?:[0-9a-f]{2}){2,4}|(#[0-9a-f]{3})|(rgb|hsl)a?\((-?\d+%?[,\s]+){2,3}\s*[\d.]+%?\))|currentcolor/gi;
 function replaceColorSvg(imageShape, color, opacity) {
     const { svgData } = imageShape;
@@ -11,7 +11,7 @@ function replaceColorSvg(imageShape, color, opacity) {
         return svgData.replace(currentColorRegex, () => colorStyle);
     }
     const preFillIndex = svgData.indexOf(">");
-    return `${svgData.substring(0, preFillIndex)} fill="${colorStyle}"${svgData.substring(preFillIndex)}`;
+    return `${svgData.substring(stringStart, preFillIndex)} fill="${colorStyle}"${svgData.substring(preFillIndex)}`;
 }
 export async function loadImage(image) {
     return new Promise((resolve) => {
@@ -32,24 +32,6 @@ export async function loadImage(image) {
         img.src = image.source;
     });
 }
-export async function loadGifImage(image) {
-    if (image.type !== "gif") {
-        await loadImage(image);
-        return;
-    }
-    image.loading = true;
-    try {
-        image.gifData = await decodeGIF(image.source);
-        image.gifLoopCount = getGIFLoopAmount(image.gifData) ?? 0;
-        if (image.gifLoopCount === 0) {
-            image.gifLoopCount = Infinity;
-        }
-    }
-    catch {
-        image.error = true;
-    }
-    image.loading = false;
-}
 export async function downloadSvgImage(image) {
     if (image.type !== "svg") {
         await loadImage(image);
@@ -67,7 +49,7 @@ export async function downloadSvgImage(image) {
     image.loading = false;
 }
 export function replaceImageColor(image, imageData, color, particle) {
-    const svgColoredData = replaceColorSvg(image, color, particle.opacity?.value ?? 1), imageRes = {
+    const svgColoredData = replaceColorSvg(image, color, particle.opacity?.value ?? defaultOpacity), imageRes = {
         color,
         gif: imageData.gif,
         data: {
@@ -87,7 +69,7 @@ export function replaceImageColor(image, imageData, color, particle) {
             resolve(imageRes);
             domUrl.revokeObjectURL(url);
         });
-        img.addEventListener("error", async () => {
+        const errorHandler = async () => {
             domUrl.revokeObjectURL(url);
             const img2 = {
                 ...image,
@@ -98,7 +80,8 @@ export function replaceImageColor(image, imageData, color, particle) {
             imageRes.loaded = true;
             imageRes.element = img2.element;
             resolve(imageRes);
-        });
+        };
+        img.addEventListener("error", () => void errorHandler());
         img.src = url;
     });
 }

package/browser/index.js

@@ -1,7 +1,6 @@
-import { downloadSvgImage, loadGifImage, loadImage } from "./Utils.js";
-import { ImageDrawer } from "./ImageDrawer.js";
-import { ImagePreloaderPlugin } from "./ImagePreloader.js";
+import { downloadSvgImage, loadImage } from "./Utils.js";
 import { errorPrefix } from "@tsparticles/engine";
+const extLength = 3;
 function addLoadImageToEngine(engine) {
     if (engine.loadImage) {
         return;
@@ -21,14 +20,21 @@ function addLoadImageToEngine(engine) {
                 gif: data.gif ?? false,
                 name: data.name ?? data.src,
                 source: data.src,
-                type: data.src.substring(data.src.length - 3),
+                type: data.src.substring(data.src.length - extLength),
                 error: false,
                 loading: true,
                 replaceColor: data.replaceColor,
                 ratio: data.width && data.height ? data.width / data.height : undefined,
             };
             engine.images.push(image);
-            const imageFunc = data.gif ? loadGifImage : data.replaceColor ? downloadSvgImage : loadImage;
+            let imageFunc;
+            if (data.gif) {
+                const { loadGifImage } = await import("./GifUtils/Utils.js");
+                imageFunc = loadGifImage;
+            }
+            else {
+                imageFunc = data.replaceColor ? downloadSvgImage : loadImage;
+            }
             await imageFunc(image);
         }
         catch {
@@ -38,6 +44,7 @@ function addLoadImageToEngine(engine) {
 }
 export async function loadImageShape(engine, refresh = true) {
     addLoadImageToEngine(engine);
+    const { ImagePreloaderPlugin } = await import("./ImagePreloader.js"), { ImageDrawer } = await import("./ImageDrawer.js");
     const preloader = new ImagePreloaderPlugin(engine);
     await engine.addPlugin(preloader, refresh);
     await engine.addShape(["image", "images"], new ImageDrawer(engine), refresh);

package/cjs/GifUtils/ByteStream.js

@@ -15,32 +15,36 @@ class ByteStream {
         return this.data[this.pos++];
     }
     nextTwoBytes() {
-        this.pos += 2;
-        return this.data[this.pos - 2] + (this.data[this.pos - 1] << 8);
+        const increment = 2, previous = 1, shift = 8;
+        this.pos += increment;
+        return this.data[this.pos - increment] + (this.data[this.pos - previous] << shift);
     }
     readSubBlocks() {
         let blockString = "", size = 0;
+        const minCount = 0, emptySize = 0;
         do {
             size = this.data[this.pos++];
-            for (let count = size; --count >= 0; blockString += String.fromCharCode(this.data[this.pos++])) {
+            for (let count = size; --count >= minCount; blockString += String.fromCharCode(this.data[this.pos++])) {
             }
-        } while (size !== 0);
+        } while (size !== emptySize);
         return blockString;
     }
     readSubBlocksBin() {
-        let size = 0, len = 0;
-        for (let offset = 0; (size = this.data[this.pos + offset]) !== 0; offset += size + 1) {
+        let size = this.data[this.pos], len = 0;
+        const emptySize = 0, increment = 1;
+        for (let offset = 0; size !== emptySize; offset += size + increment, size = this.data[this.pos + offset]) {
             len += size;
         }
         const blockData = new Uint8Array(len);
-        for (let i = 0; (size = this.data[this.pos++]) !== 0;) {
-            for (let count = size; --count >= 0; blockData[i++] = this.data[this.pos++]) {
+        size = this.data[this.pos++];
+        for (let i = 0; size !== emptySize; size = this.data[this.pos++]) {
+            for (let count = size; --count >= emptySize; blockData[i++] = this.data[this.pos++]) {
             }
         }
         return blockData;
     }
     skipSubBlocks() {
-        for (; this.data[this.pos] !== 0; this.pos += this.data[this.pos] + 1) {
+        for (const increment = 1, noData = 0; this.data[this.pos] !== noData; this.pos += this.data[this.pos] + increment) {
         }
         this.pos++;
     }