@tsparticles/shape-image 4.0.0-alpha.5 → 4.0.0-beta.0

package/375.min.js

@@ -0,0 +1 @@
+"use strict";(this.webpackChunk_tsparticles_shape_image=this.webpackChunk_tsparticles_shape_image||[]).push([[375],{375(e,i,t){t.d(i,{ImagePreloaderPlugin:()=>a});var s=t(303);class r{gif;height;name;replaceColor;src;width;constructor(){this.src="",this.gif=!1}load(e){(0,s.isNull)(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 a{id="image-preloader";_engine;constructor(e){this._engine=e}async getPlugin(e){let{ImagePreloaderInstance:i}=await t.e(550).then(t.bind(t,550));return new i(this._engine,e)}loadOptions(e,i,t){if(!t?.preload)return;i.preload??=[];let s=i.preload;for(let e of t.preload){let i=s.find(i=>i.name===e.name||i.src===e.src);if(i)i.load(e);else{let i=new r;i.load(e),s.push(i)}}}needsPlugin(){return!0}}}}]);

package/550.min.js

@@ -0,0 +1 @@
+"use strict";(this.webpackChunk_tsparticles_shape_image=this.webpackChunk_tsparticles_shape_image||[]).push([[550],{550(e,s,t){t.d(s,{ImagePreloaderInstance:()=>i});class i{_container;_engine;constructor(e,s){this._engine=e,this._container=s}destroy(){this._engine.images?.delete(this._container)}}}}]);

package/682.min.js

@@ -0,0 +1 @@
+"use strict";(this.webpackChunk_tsparticles_shape_image=this.webpackChunk_tsparticles_shape_image||[]).push([[682,814],{814(e,t,a){a.d(t,{zS:()=>w,loadGifImage:()=>x});var i,o,n,r,l=a(183),s=a(303);let h=[0,4,2,1],g=[8,8,4,2];class d{data;pos;constructor(e){this.pos=0,this.data=new Uint8ClampedArray(e)}getString(e){let t=this.data.slice(this.pos,this.pos+e);return this.pos+=t.length,t.reduce((e,t)=>e+String.fromCharCode(t),"")}nextByte(){return this.data[this.pos++]}nextTwoBytes(){return this.pos+=2,this.data[this.pos-2]+(this.data[this.pos-1]<<8)}readSubBlocks(){let e="",t;do{t=this.data[this.pos++];for(let a=t;--a>=0;e+=String.fromCharCode(this.data[this.pos++]));}while(0!==t)return e}readSubBlocksBin(){let e=this.data[this.pos],t=0;for(let a=0;0!==e;a+=e+1,e=this.data[this.pos+a])t+=e;let a=new Uint8Array(t);e=this.data[this.pos++];for(let t=0;0!==e;e=this.data[this.pos++])for(let i=e;--i>=0;a[t++]=this.data[this.pos++]);return a}skipSubBlocks(){for(;0!==this.data[this.pos];this.pos+=this.data[this.pos]+1);this.pos++}}function f(e,t){let a=[];for(let i=0;i<t;i++)a.push({r:e.data[e.pos],g:e.data[e.pos+1],b:e.data[e.pos+2]}),e.pos+=3;return a}function c(e,t,a){let i=t>>>3,o=7&t;return(e[i]+(e[i+1]<<8)+(e[i+2]<<16)&(1<<a)-1<<o)>>>o}async function p(e,t,a,i,o,n,r){let l=t.frames[i(!0)];l.left=e.nextTwoBytes(),l.top=e.nextTwoBytes(),l.width=e.nextTwoBytes(),l.height=e.nextTwoBytes();let s=e.nextByte(),d=(128&s)==128;l.sortFlag=(32&s)==32,l.reserved=(24&s)>>>3,d&&(l.localColorTable=f(e,1<<(7&s)+1));let p=e=>{let{r:i,g:n,b:r}=(d?l.localColorTable:t.globalColorTable)[e];return e!==o(null)?{r:i,g:n,b:r,a:255}:{r:i,g:n,b:r,a:a?Math.trunc((i+n+r)/3):0}},m=(()=>{try{return new ImageData(l.width,l.height,n)}catch(e){if(e instanceof DOMException&&"IndexSizeError"===e.name)return null;throw e}})();if(null==m)throw EvalError("GIF frame size is to large");let u=e.nextByte(),w=e.readSubBlocksBin(),x=1<<u;if((64&s)==64){for(let a=0,o=u+1,n=0,s=[[0]],d=0;d<4;d++){if(h[d]<l.height){let e=0,t=0,i=!1;for(;!i;){let r=a;if(a=c(w,n,o),n+=o+1,a===x){o=u+1,s.length=x+2;for(let e=0;e<s.length;e++)s[e]=e<x?[e]:[]}else{for(let i of(a>=s.length?s.push(s[r].concat(s[r][0])):r!==x&&s.push(s[r].concat(s[a][0])),s[a])){let{r:a,g:o,b:n,a:r}=p(i);m.data.set([a,o,n,r],h[d]*l.width+g[d]*t+e%(4*l.width)),e+=4}s.length===1<<o&&o<12&&o++}e===4*l.width*(t+1)&&(t++,h[d]+g[d]*t>=l.height&&(i=!0))}}r?.(e.pos/(e.data.length-1),i(!1)+1,m,{x:l.left,y:l.top},{width:t.width,height:t.height})}l.image=m,l.bitmap=await createImageBitmap(m)}else{let a=0,o=u+1,n=0,s=-4,h=[[0]];for(;;){let e=a;if(a=c(w,n,o),n+=o,a===x){o=u+1,h.length=x+2;for(let e=0;e<h.length;e++)h[e]=e<x?[e]:[]}else{if(a===x+1)break;for(let t of(a>=h.length?h.push(h[e].concat(h[e][0])):e!==x&&h.push(h[e].concat(h[a][0])),h[a])){let{r:e,g:a,b:i,a:o}=p(t);s+=4,m.data.set([e,a,i,o],s)}h.length>=1<<o&&o<12&&o++}}l.image=m,l.bitmap=await createImageBitmap(m),r?.((e.pos+1)/e.data.length,i(!1)+1,l.image,{x:l.left,y:l.top},{width:t.width,height:t.height})}}async function m(e,t,a,i,o,n,l){switch(e.nextByte()){case r.EndOfFile:return!0;case r.Image:await p(e,t,a,i,o,n,l);break;case r.Extension:switch(e.nextByte()){case r.GraphicsControlExtension:{let a=t.frames[i(!1)];e.pos++;let n=e.nextByte();a.GCreserved=(224&n)>>>5,a.disposalMethod=(28&n)>>>2,a.userInputDelayFlag=(2&n)==2,a.delayTime=10*e.nextTwoBytes();let r=e.nextByte();(1&n)==1&&o(r),e.pos++;break}case r.ApplicationExtension:{e.pos++;let a={identifier:e.getString(8),authenticationCode:e.getString(3),data:e.readSubBlocksBin()};t.applicationExtensions.push(a);break}case r.CommentExtension:t.comments.push([i(!1),e.readSubBlocks()]);break;case r.PlainTextExtension:if(0===t.globalColorTable.length)throw EvalError("plain text extension without global color table");e.pos++,t.frames[i(!1)].plainTextData={left:e.nextTwoBytes(),top:e.nextTwoBytes(),width:e.nextTwoBytes(),height:e.nextTwoBytes(),charSize:{width:e.nextTwoBytes(),height:e.nextTwoBytes()},foregroundColor:e.nextByte(),backgroundColor:e.nextByte(),text:e.readSubBlocks()};break;default:e.skipSubBlocks()}break;default:throw EvalError("undefined block found")}return!1}async function u(e,t,a,i){i??=!1;let o=await fetch(e);if(!o.ok&&404===o.status)throw EvalError("file not found");let r=await o.arrayBuffer(),l={width:0,height:0,totalTime:0,colorRes:0,pixelAspectRatio:0,frames:[],sortFlag:!1,globalColorTable:[],backgroundImage:new ImageData(1,1,t),comments:[],applicationExtensions:[]},s=new d(new Uint8ClampedArray(r));if("GIF89a"!==s.getString(6))throw Error("not a supported GIF file");l.width=s.nextTwoBytes(),l.height=s.nextTwoBytes();let h=s.nextByte(),g=(128&h)==128;l.colorRes=(112&h)>>>4,l.sortFlag=(8&h)==8;let c=s.nextByte();l.pixelAspectRatio=s.nextByte(),0!==l.pixelAspectRatio&&(l.pixelAspectRatio=(l.pixelAspectRatio+15)/64),g&&(l.globalColorTable=f(s,1<<(7&h)+1));let p=(()=>{try{return new ImageData(l.width,l.height,t)}catch(e){if(e instanceof DOMException&&"IndexSizeError"===e.name)return null;throw e}})();if(null==p)throw Error("GIF frame size is to large");let{r:u,g:w,b:x}=l.globalColorTable[c];p.data.set(g?[u,w,x,255]:[0,0,0,0]);for(let e=4;e<p.data.length;e*=2)p.data.copyWithin(e,0,e);l.backgroundImage=p;let y=-1,b=!0,C=-1,I=e=>(e&&(b=!0),y),B=e=>(null!=e&&(C=e),C);try{do b&&(l.frames.push({left:0,top:0,width:0,height:0,disposalMethod:n.Replace,image:new ImageData(1,1,t),plainTextData:null,userInputDelayFlag:!1,delayTime:0,sortFlag:!1,localColorTable:[],reserved:0,GCreserved:0}),y++,C=-1,b=!1);while(!await m(s,l,i,I,B,t,a))for(let e of(l.frames.length--,l.frames)){if(e.userInputDelayFlag&&0===e.delayTime){l.totalTime=1/0;break}l.totalTime+=e.delayTime}return l}catch(e){if(e instanceof EvalError)throw Error(`error while parsing frame ${y.toString()} "${e.message}"`,{cause:e});throw e}}function w(e,t){let{context:a,radius:i,particle:o,delta:r}=e,l=o.image;if(!l?.gifData||!l.gif)return;let h=new OffscreenCanvas(l.gifData.width,l.gifData.height),g=h.getContext("2d",t);if(!g)throw Error("could not create offscreen canvas context");g.imageSmoothingQuality="low",g.imageSmoothingEnabled=!1,g.clearRect(s.originPoint.x,s.originPoint.y,h.width,h.height),o.gifLoopCount??=l.gifLoopCount??0;let d=o.gifFrame??0,f={x:-l.gifData.width*s.half,y:-l.gifData.height*s.half},c=l.gifData.frames[d];if(o.gifTime??=0,c.bitmap){switch(a.scale(i/l.gifData.width,i/l.gifData.height),c.disposalMethod){case n.UndefinedA:case n.UndefinedB:case n.UndefinedC:case n.UndefinedD:case n.Replace:g.drawImage(c.bitmap,c.left,c.top),a.drawImage(h,f.x,f.y),g.clearRect(s.originPoint.x,s.originPoint.y,h.width,h.height);break;case n.Combine:g.drawImage(c.bitmap,c.left,c.top),a.drawImage(h,f.x,f.y);break;case n.RestoreBackground:g.drawImage(c.bitmap,c.left,c.top),a.drawImage(h,f.x,f.y),g.clearRect(s.originPoint.x,s.originPoint.y,h.width,h.height),l.gifData.globalColorTable.length?g.putImageData(l.gifData.backgroundImage,f.x,f.y):g.putImageData(l.gifData.frames[0].image,f.x+c.left,f.y+c.top);break;case n.RestorePrevious:{let e=g.getImageData(s.originPoint.x,s.originPoint.y,h.width,h.height);g.drawImage(c.bitmap,c.left,c.top),a.drawImage(h,f.x,f.y),g.clearRect(s.originPoint.x,s.originPoint.y,h.width,h.height),g.putImageData(e,s.originPoint.x,s.originPoint.y)}}if(o.gifTime+=r.value,o.gifTime>c.delayTime){if(o.gifTime-=c.delayTime,++d>=l.gifData.frames.length){if(--o.gifLoopCount<=0)return;d=0,g.clearRect(s.originPoint.x,s.originPoint.y,h.width,h.height)}o.gifFrame=d}a.scale(l.gifData.width/i,l.gifData.height/i)}}async function x(e,t){if("gif"!==e.type)return void await (0,l.loadImage)(e);e.loading=!0;try{e.gifData=await u(e.source,t),e.gifLoopCount=function(e){for(let t of e.applicationExtensions)if(t.identifier+t.authenticationCode==="NETSCAPE2.0")return t.data[1]+(t.data[2]<<8);return NaN}(e.gifData),e.gifLoopCount||(e.gifLoopCount=1/0)}catch{e.error=!0}e.loading=!1}(i=n||(n={}))[i.Replace=0]="Replace",i[i.Combine=1]="Combine",i[i.RestoreBackground=2]="RestoreBackground",i[i.RestorePrevious=3]="RestorePrevious",i[i.UndefinedA=4]="UndefinedA",i[i.UndefinedB=5]="UndefinedB",i[i.UndefinedC=6]="UndefinedC",i[i.UndefinedD=7]="UndefinedD",(o=r||(r={}))[o.Extension=33]="Extension",o[o.ApplicationExtension=255]="ApplicationExtension",o[o.GraphicsControlExtension=249]="GraphicsControlExtension",o[o.PlainTextExtension=1]="PlainTextExtension",o[o.CommentExtension=254]="CommentExtension",o[o.Image=44]="Image",o[o.EndOfFile=59]="EndOfFile"},682(e,t,a){a.d(t,{ImageDrawer:()=>r});var i=a(303),o=a(183),n=a(814);class r{_engine;constructor(e){this._engine=e}draw(e){let{context:t,radius:a,particle:o,opacity:r}=e,l=o.image,s=l?.element;if(l){if(t.globalAlpha=r,l.gif&&l.gifData)(0,n.zS)(e,o.container.canvas.settings);else if(s){let e=l.ratio,o={x:-a,y:-a},n=a*i.double;t.drawImage(s,o.x,o.y,n,n/e)}t.globalAlpha=i.defaultAlpha}}getSidesCount(){return 12}async init(e){let t=e.actualOptions;if(!t.preload||!this._engine.loadImage)return;let a=[];for(let i of t.preload)a.push(this._engine.loadImage(e,i));await Promise.all(a)}loadShape(e){let{container:t}=e;if(!e.shape||!o.z.includes(e.shape))return;let a=e.shapeData;if(!a)return;let i=this._engine.getImages?.(t);i?.find(e=>e.name===a.name||e.source===a.src)||this.loadImageShape(t,a).then(()=>{this.loadShape(e)})}particleInit(e,t){if("image"!==t.shape&&"images"!==t.shape)return;let a=this._engine.getImages?.(e),n=t.shapeData;if(!n)return;let r=t.getFillColor(),l=a?.find(e=>e.name===n.name||e.source===n.src);if(!l)return;let s=n.replaceColor;l.loading?setTimeout(()=>{this.particleInit(e,t)}):(async()=>{let a;(a=l.svgData&&r?await (0,o.d)(l,n,r,t,e.hdr):{color:r,data:l,element:l.element,gif:l.gif,gifData:l.gifData,gifLoopCount:l.gifLoopCount,loaded:!0,ratio:n.width&&n.height?n.width/n.height:l.ratio??i.defaultRatio,replaceColor:s,source:n.src}).ratio||(a.ratio=1);let h=n.close??t.shapeClose;t.image=a,t.shapeClose=h})()}loadImageShape=async(e,t)=>{if(!this._engine.loadImage)throw Error("Image shape not initialized");await this._engine.loadImage(e,{gif:t.gif,name:t.name,replaceColor:t.replaceColor,src:t.src})}}}}]);

package/814.min.js

@@ -0,0 +1 @@
+"use strict";(this.webpackChunk_tsparticles_shape_image=this.webpackChunk_tsparticles_shape_image||[]).push([[814],{814(t,e,a){a.d(e,{zS:()=>w,loadGifImage:()=>x});var i,o,n,r,l=a(183),s=a(303);let h=[0,4,2,1],g=[8,8,4,2];class d{data;pos;constructor(t){this.pos=0,this.data=new Uint8ClampedArray(t)}getString(t){let 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;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;let a=new Uint8Array(e);t=this.data[this.pos++];for(let e=0;0!==t;t=this.data[this.pos++])for(let i=t;--i>=0;a[e++]=this.data[this.pos++]);return a}skipSubBlocks(){for(;0!==this.data[this.pos];this.pos+=this.data[this.pos]+1);this.pos++}}function f(t,e){let a=[];for(let i=0;i<e;i++)a.push({r:t.data[t.pos],g:t.data[t.pos+1],b:t.data[t.pos+2]}),t.pos+=3;return a}function c(t,e,a){let i=e>>>3,o=7&e;return(t[i]+(t[i+1]<<8)+(t[i+2]<<16)&(1<<a)-1<<o)>>>o}async function p(t,e,a,i,o,n,r){let l=e.frames[i(!0)];l.left=t.nextTwoBytes(),l.top=t.nextTwoBytes(),l.width=t.nextTwoBytes(),l.height=t.nextTwoBytes();let s=t.nextByte(),d=(128&s)==128;l.sortFlag=(32&s)==32,l.reserved=(24&s)>>>3,d&&(l.localColorTable=f(t,1<<(7&s)+1));let p=t=>{let{r:i,g:n,b:r}=(d?l.localColorTable:e.globalColorTable)[t];return t!==o(null)?{r:i,g:n,b:r,a:255}:{r:i,g:n,b:r,a:a?Math.trunc((i+n+r)/3):0}},u=(()=>{try{return new ImageData(l.width,l.height,n)}catch(t){if(t instanceof DOMException&&"IndexSizeError"===t.name)return null;throw t}})();if(null==u)throw EvalError("GIF frame size is to large");let m=t.nextByte(),w=t.readSubBlocksBin(),x=1<<m;if((64&s)==64){for(let a=0,o=m+1,n=0,s=[[0]],d=0;d<4;d++){if(h[d]<l.height){let t=0,e=0,i=!1;for(;!i;){let r=a;if(a=c(w,n,o),n+=o+1,a===x){o=m+1,s.length=x+2;for(let t=0;t<s.length;t++)s[t]=t<x?[t]:[]}else{for(let i of(a>=s.length?s.push(s[r].concat(s[r][0])):r!==x&&s.push(s[r].concat(s[a][0])),s[a])){let{r:a,g:o,b:n,a:r}=p(i);u.data.set([a,o,n,r],h[d]*l.width+g[d]*e+t%(4*l.width)),t+=4}s.length===1<<o&&o<12&&o++}t===4*l.width*(e+1)&&(e++,h[d]+g[d]*e>=l.height&&(i=!0))}}r?.(t.pos/(t.data.length-1),i(!1)+1,u,{x:l.left,y:l.top},{width:e.width,height:e.height})}l.image=u,l.bitmap=await createImageBitmap(u)}else{let a=0,o=m+1,n=0,s=-4,h=[[0]];for(;;){let t=a;if(a=c(w,n,o),n+=o,a===x){o=m+1,h.length=x+2;for(let t=0;t<h.length;t++)h[t]=t<x?[t]:[]}else{if(a===x+1)break;for(let e of(a>=h.length?h.push(h[t].concat(h[t][0])):t!==x&&h.push(h[t].concat(h[a][0])),h[a])){let{r:t,g:a,b:i,a:o}=p(e);s+=4,u.data.set([t,a,i,o],s)}h.length>=1<<o&&o<12&&o++}}l.image=u,l.bitmap=await createImageBitmap(u),r?.((t.pos+1)/t.data.length,i(!1)+1,l.image,{x:l.left,y:l.top},{width:e.width,height:e.height})}}async function u(t,e,a,i,o,n,l){switch(t.nextByte()){case r.EndOfFile:return!0;case r.Image:await p(t,e,a,i,o,n,l);break;case r.Extension:switch(t.nextByte()){case r.GraphicsControlExtension:{let a=e.frames[i(!1)];t.pos++;let n=t.nextByte();a.GCreserved=(224&n)>>>5,a.disposalMethod=(28&n)>>>2,a.userInputDelayFlag=(2&n)==2,a.delayTime=10*t.nextTwoBytes();let r=t.nextByte();(1&n)==1&&o(r),t.pos++;break}case r.ApplicationExtension:{t.pos++;let a={identifier:t.getString(8),authenticationCode:t.getString(3),data:t.readSubBlocksBin()};e.applicationExtensions.push(a);break}case r.CommentExtension:e.comments.push([i(!1),t.readSubBlocks()]);break;case r.PlainTextExtension:if(0===e.globalColorTable.length)throw EvalError("plain text extension without global color table");t.pos++,e.frames[i(!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()}break;default:throw EvalError("undefined block found")}return!1}async function m(t,e,a,i){i??=!1;let o=await fetch(t);if(!o.ok&&404===o.status)throw EvalError("file not found");let r=await o.arrayBuffer(),l={width:0,height:0,totalTime:0,colorRes:0,pixelAspectRatio:0,frames:[],sortFlag:!1,globalColorTable:[],backgroundImage:new ImageData(1,1,e),comments:[],applicationExtensions:[]},s=new d(new Uint8ClampedArray(r));if("GIF89a"!==s.getString(6))throw Error("not a supported GIF file");l.width=s.nextTwoBytes(),l.height=s.nextTwoBytes();let h=s.nextByte(),g=(128&h)==128;l.colorRes=(112&h)>>>4,l.sortFlag=(8&h)==8;let c=s.nextByte();l.pixelAspectRatio=s.nextByte(),0!==l.pixelAspectRatio&&(l.pixelAspectRatio=(l.pixelAspectRatio+15)/64),g&&(l.globalColorTable=f(s,1<<(7&h)+1));let p=(()=>{try{return new ImageData(l.width,l.height,e)}catch(t){if(t instanceof DOMException&&"IndexSizeError"===t.name)return null;throw t}})();if(null==p)throw Error("GIF frame size is to large");let{r:m,g:w,b:x}=l.globalColorTable[c];p.data.set(g?[m,w,x,255]:[0,0,0,0]);for(let t=4;t<p.data.length;t*=2)p.data.copyWithin(t,0,t);l.backgroundImage=p;let y=-1,b=!0,B=-1,C=t=>(t&&(b=!0),y),E=t=>(null!=t&&(B=t),B);try{do b&&(l.frames.push({left:0,top:0,width:0,height:0,disposalMethod:n.Replace,image:new ImageData(1,1,e),plainTextData:null,userInputDelayFlag:!1,delayTime:0,sortFlag:!1,localColorTable:[],reserved:0,GCreserved:0}),y++,B=-1,b=!1);while(!await u(s,l,i,C,E,e,a))for(let t of(l.frames.length--,l.frames)){if(t.userInputDelayFlag&&0===t.delayTime){l.totalTime=1/0;break}l.totalTime+=t.delayTime}return l}catch(t){if(t instanceof EvalError)throw Error(`error while parsing frame ${y.toString()} "${t.message}"`,{cause:t});throw t}}function w(t,e){let{context:a,radius:i,particle:o,delta:r}=t,l=o.image;if(!l?.gifData||!l.gif)return;let h=new OffscreenCanvas(l.gifData.width,l.gifData.height),g=h.getContext("2d",e);if(!g)throw Error("could not create offscreen canvas context");g.imageSmoothingQuality="low",g.imageSmoothingEnabled=!1,g.clearRect(s.originPoint.x,s.originPoint.y,h.width,h.height),o.gifLoopCount??=l.gifLoopCount??0;let d=o.gifFrame??0,f={x:-l.gifData.width*s.half,y:-l.gifData.height*s.half},c=l.gifData.frames[d];if(o.gifTime??=0,c.bitmap){switch(a.scale(i/l.gifData.width,i/l.gifData.height),c.disposalMethod){case n.UndefinedA:case n.UndefinedB:case n.UndefinedC:case n.UndefinedD:case n.Replace:g.drawImage(c.bitmap,c.left,c.top),a.drawImage(h,f.x,f.y),g.clearRect(s.originPoint.x,s.originPoint.y,h.width,h.height);break;case n.Combine:g.drawImage(c.bitmap,c.left,c.top),a.drawImage(h,f.x,f.y);break;case n.RestoreBackground:g.drawImage(c.bitmap,c.left,c.top),a.drawImage(h,f.x,f.y),g.clearRect(s.originPoint.x,s.originPoint.y,h.width,h.height),l.gifData.globalColorTable.length?g.putImageData(l.gifData.backgroundImage,f.x,f.y):g.putImageData(l.gifData.frames[0].image,f.x+c.left,f.y+c.top);break;case n.RestorePrevious:{let t=g.getImageData(s.originPoint.x,s.originPoint.y,h.width,h.height);g.drawImage(c.bitmap,c.left,c.top),a.drawImage(h,f.x,f.y),g.clearRect(s.originPoint.x,s.originPoint.y,h.width,h.height),g.putImageData(t,s.originPoint.x,s.originPoint.y)}}if(o.gifTime+=r.value,o.gifTime>c.delayTime){if(o.gifTime-=c.delayTime,++d>=l.gifData.frames.length){if(--o.gifLoopCount<=0)return;d=0,g.clearRect(s.originPoint.x,s.originPoint.y,h.width,h.height)}o.gifFrame=d}a.scale(l.gifData.width/i,l.gifData.height/i)}}async function x(t,e){if("gif"!==t.type)return void await (0,l.loadImage)(t);t.loading=!0;try{t.gifData=await m(t.source,e),t.gifLoopCount=function(t){for(let e of t.applicationExtensions)if(e.identifier+e.authenticationCode==="NETSCAPE2.0")return e.data[1]+(e.data[2]<<8);return NaN}(t.gifData),t.gifLoopCount||(t.gifLoopCount=1/0)}catch{t.error=!0}t.loading=!1}(i=n||(n={}))[i.Replace=0]="Replace",i[i.Combine=1]="Combine",i[i.RestoreBackground=2]="RestoreBackground",i[i.RestorePrevious=3]="RestorePrevious",i[i.UndefinedA=4]="UndefinedA",i[i.UndefinedB=5]="UndefinedB",i[i.UndefinedC=6]="UndefinedC",i[i.UndefinedD=7]="UndefinedD",(o=r||(r={}))[o.Extension=33]="Extension",o[o.ApplicationExtension=255]="ApplicationExtension",o[o.GraphicsControlExtension=249]="GraphicsControlExtension",o[o.PlainTextExtension=1]="PlainTextExtension",o[o.CommentExtension=254]="CommentExtension",o[o.Image=44]="Image",o[o.EndOfFile=59]="EndOfFile"}}]);

package/browser/GifUtils/ByteStream.js

@@ -1,4 +1,6 @@
 export class ByteStream {
+    data;
+    pos;
     constructor(bytes) {
         this.pos = 0;
         this.data = new Uint8ClampedArray(bytes);
@@ -17,7 +19,7 @@ export class ByteStream {
         return this.data[this.pos - increment] + (this.data[this.pos - previous] << shift);
     }
     readSubBlocks() {
-        let blockString = "", size = 0;
+        let blockString = "", size;
         const minCount = 0, emptySize = 0;
         do {
             size = this.data[this.pos++];

package/browser/GifUtils/Utils.js

@@ -1,13 +1,10 @@
-import { half } from "@tsparticles/engine";
 import { loadImage } from "../Utils.js";
+import { half, originPoint } from "@tsparticles/engine";
 import { InterlaceOffsets, InterlaceSteps } from "./Constants.js";
 import { ByteStream } from "./ByteStream.js";
 import { DisposalMethod } from "./Enums/DisposalMethod.js";
 import { GIFDataHeaders } from "./Types/GIFDataHeaders.js";
-const origin = {
-    x: 0,
-    y: 0,
-}, defaultFrame = 0, initialTime = 0, firstIndex = 0, defaultLoopCount = 0;
+const defaultFrame = 0, initialTime = 0, firstIndex = 0, defaultLoopCount = 0;
 function parseColorTable(byteStream, count) {
     const colors = [];
     for (let i = 0; i < count; i++) {
@@ -77,7 +74,13 @@ function parseExtensionBlock(byteStream, gif, getFrameIndex, getTransparencyInde
             break;
     }
 }
-async function parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTransparencyIndex, progressCallback) {
+function readBits(imageData, pos, len) {
+    const bytePos = pos >>> 3, bitPos = pos & 7;
+    return (((imageData[bytePos] + (imageData[bytePos + 1] << 8) + (imageData[bytePos + 2] << 16)) &
+        (((1 << len) - 1) << bitPos)) >>>
+        bitPos);
+}
+async function parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTransparencyIndex, canvasSettings, progressCallback) {
     const frame = gif.frames[getFrameIndex(true)];
     frame.left = byteStream.nextTwoBytes();
     frame.top = byteStream.nextTwoBytes();
@@ -96,10 +99,9 @@ async function parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTran
             return { r, g, b, a: 255 };
         }
         return { r, g, b, a: avgAlpha ? Math.trunc((r + g + b) / 3) : 0 };
-    };
-    const image = (() => {
+    }, image = (() => {
         try {
-            return new ImageData(frame.width, frame.height, { colorSpace: "srgb" });
+            return new ImageData(frame.width, frame.height, canvasSettings);
         }
         catch (error) {
             if (error instanceof DOMException && error.name === "IndexSizeError") {
@@ -112,19 +114,13 @@ async function parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTran
         throw new EvalError("GIF frame size is to large");
     }
     const minCodeSize = byteStream.nextByte(), imageData = byteStream.readSubBlocksBin(), clearCode = 1 << minCodeSize;
-    const readBits = (pos, len) => {
-        const bytePos = pos >>> 3, bitPos = pos & 7;
-        return (((imageData[bytePos] + (imageData[bytePos + 1] << 8) + (imageData[bytePos + 2] << 16)) &
-            (((1 << len) - 1) << bitPos)) >>>
-            bitPos);
-    };
     if (interlacedFlag) {
         for (let code = 0, size = minCodeSize + 1, pos = 0, dic = [[0]], pass = 0; pass < 4; pass++) {
             if (InterlaceOffsets[pass] < frame.height) {
                 let pixelPos = 0, lineIndex = 0, exit = false;
                 while (!exit) {
                     const last = code;
-                    code = readBits(pos, size);
+                    code = readBits(imageData, pos, size);
                     pos += size + 1;
                     if (code === clearCode) {
                         size = minCodeSize + 1;
@@ -169,7 +165,7 @@ async function parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTran
         const dic = [[0]];
         for (;;) {
             const last = code;
-            code = readBits(pos, size);
+            code = readBits(imageData, pos, size);
             pos += size;
             if (code === clearCode) {
                 size = minCodeSize + 1;
@@ -190,8 +186,8 @@ async function parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTran
                 }
                 for (const item of dic[code]) {
                     const { r, g, b, a } = getColor(item);
-                    image.data.set([r, g, b, a], pixelPos);
                     pixelPos += 4;
+                    image.data.set([r, g, b, a], pixelPos);
                 }
                 if (dic.length >= 1 << size && size < 0xc) {
                     size++;
@@ -203,12 +199,12 @@ async function parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTran
         progressCallback?.((byteStream.pos + 1) / byteStream.data.length, getFrameIndex(false) + 1, frame.image, { x: frame.left, y: frame.top }, { width: gif.width, height: gif.height });
     }
 }
-async function parseBlock(byteStream, gif, avgAlpha, getFrameIndex, getTransparencyIndex, progressCallback) {
+async function parseBlock(byteStream, gif, avgAlpha, getFrameIndex, getTransparencyIndex, canvasSettings, progressCallback) {
     switch (byteStream.nextByte()) {
         case GIFDataHeaders.EndOfFile:
             return true;
         case GIFDataHeaders.Image:
-            await parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTransparencyIndex, progressCallback);
+            await parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTransparencyIndex, canvasSettings, progressCallback);
             break;
         case GIFDataHeaders.Extension:
             parseExtensionBlock(byteStream, gif, getFrameIndex, getTransparencyIndex);
@@ -225,16 +221,15 @@ export function getGIFLoopAmount(gif) {
         }
         return extension.data[1] + (extension.data[2] << 8);
     }
-    return NaN;
+    return Number.NaN;
 }
-export async function decodeGIF(gifURL, progressCallback, avgAlpha) {
+export async function decodeGIF(gifURL, canvasSettings, progressCallback, avgAlpha) {
     avgAlpha ??= false;
     const res = await fetch(gifURL);
     if (!res.ok && res.status === 404) {
         throw new EvalError("file not found");
     }
-    const buffer = await res.arrayBuffer();
-    const gif = {
+    const buffer = await res.arrayBuffer(), gif = {
         width: 0,
         height: 0,
         totalTime: 0,
@@ -243,7 +238,7 @@ export async function decodeGIF(gifURL, progressCallback, avgAlpha) {
         frames: [],
         sortFlag: false,
         globalColorTable: [],
-        backgroundImage: new ImageData(1, 1, { colorSpace: "srgb" }),
+        backgroundImage: new ImageData(1, 1, canvasSettings),
         comments: [],
         applicationExtensions: [],
     }, byteStream = new ByteStream(new Uint8ClampedArray(buffer));
@@ -265,7 +260,7 @@ export async function decodeGIF(gifURL, progressCallback, avgAlpha) {
     }
     const backgroundImage = (() => {
         try {
-            return new ImageData(gif.width, gif.height, { colorSpace: "srgb" });
+            return new ImageData(gif.width, gif.height, canvasSettings);
         }
         catch (error) {
             if (error instanceof DOMException && error.name === "IndexSizeError") {
@@ -289,8 +284,7 @@ export async function decodeGIF(gifURL, progressCallback, avgAlpha) {
             incrementFrameIndex = true;
         }
         return frameIndex;
-    };
-    const getTransparencyIndex = (newValue) => {
+    }, getTransparencyIndex = (newValue) => {
         if (newValue != null) {
             transparencyIndex = newValue;
         }
@@ -305,7 +299,7 @@ export async function decodeGIF(gifURL, progressCallback, avgAlpha) {
                     width: 0,
                     height: 0,
                     disposalMethod: DisposalMethod.Replace,
-                    image: new ImageData(1, 1, { colorSpace: "srgb" }),
+                    image: new ImageData(1, 1, canvasSettings),
                     plainTextData: null,
                     userInputDelayFlag: false,
                     delayTime: 0,
@@ -318,7 +312,7 @@ export async function decodeGIF(gifURL, progressCallback, avgAlpha) {
                 transparencyIndex = -1;
                 incrementFrameIndex = false;
             }
-        } while (!(await parseBlock(byteStream, gif, avgAlpha, getframeIndex, getTransparencyIndex, progressCallback)));
+        } while (!(await parseBlock(byteStream, gif, avgAlpha, getframeIndex, getTransparencyIndex, canvasSettings, progressCallback)));
         gif.frames.length--;
         for (const frame of gif.frames) {
             if (frame.userInputDelayFlag && frame.delayTime === 0) {
@@ -331,23 +325,23 @@ export async function decodeGIF(gifURL, progressCallback, avgAlpha) {
     }
     catch (error) {
         if (error instanceof EvalError) {
-            throw new Error(`error while parsing frame ${frameIndex.toString()} "${error.message}"`);
+            throw new Error(`error while parsing frame ${frameIndex.toString()} "${error.message}"`, { cause: error });
         }
         throw error;
     }
 }
-export function drawGif(data) {
+export function drawGif(data, canvasSettings) {
     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");
+    const offscreenCanvas = new OffscreenCanvas(image.gifData.width, image.gifData.height), offscreenContext = offscreenCanvas.getContext("2d", canvasSettings);
     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);
+    offscreenContext.clearRect(originPoint.x, originPoint.y, offscreenCanvas.width, offscreenCanvas.height);
     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];
@@ -364,7 +358,7 @@ export function drawGif(data) {
         case DisposalMethod.Replace:
             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.clearRect(originPoint.x, originPoint.y, offscreenCanvas.width, offscreenCanvas.height);
             break;
         case DisposalMethod.Combine:
             offscreenContext.drawImage(frame.bitmap, frame.left, frame.top);
@@ -373,7 +367,7 @@ export function drawGif(data) {
         case DisposalMethod.RestoreBackground:
             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.clearRect(originPoint.x, originPoint.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);
             }
@@ -383,11 +377,11 @@ export function drawGif(data) {
             break;
         case DisposalMethod.RestorePrevious:
             {
-                const previousImageData = offscreenContext.getImageData(origin.x, origin.y, offscreenCanvas.width, offscreenCanvas.height);
+                const previousImageData = offscreenContext.getImageData(originPoint.x, originPoint.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);
+                offscreenContext.clearRect(originPoint.x, originPoint.y, offscreenCanvas.width, offscreenCanvas.height);
+                offscreenContext.putImageData(previousImageData, originPoint.x, originPoint.y);
             }
             break;
     }
@@ -399,20 +393,20 @@ export function drawGif(data) {
                 return;
             }
             frameIndex = firstIndex;
-            offscreenContext.clearRect(origin.x, origin.y, offscreenCanvas.width, offscreenCanvas.height);
+            offscreenContext.clearRect(originPoint.x, originPoint.y, offscreenCanvas.width, offscreenCanvas.height);
         }
         particle.gifFrame = frameIndex;
     }
     context.scale(image.gifData.width / radius, image.gifData.height / radius);
 }
-export async function loadGifImage(image) {
+export async function loadGifImage(image, canvasSettings) {
     if (image.type !== "gif") {
         await loadImage(image);
         return;
     }
     image.loading = true;
     try {
-        image.gifData = await decodeGIF(image.source);
+        image.gifData = await decodeGIF(image.source, canvasSettings);
         image.gifLoopCount = getGIFLoopAmount(image.gifData);
         if (!image.gifLoopCount) {
             image.gifLoopCount = Infinity;

package/browser/ImageDrawer.js

@@ -1,27 +1,12 @@
 import { defaultAlpha, defaultRatio, double, } from "@tsparticles/engine";
-import { replaceImageColor } from "./Utils.js";
+import { replaceImageColor, shapeTypes } from "./Utils.js";
 import { drawGif } from "./GifUtils/Utils.js";
 const sides = 12;
 export class ImageDrawer {
+    _engine;
     constructor(engine) {
-        this.validTypes = ["image", "images"];
-        this.loadImageShape = async (imageShape) => {
-            if (!this._engine.loadImage) {
-                throw new Error(`Image shape not initialized`);
-            }
-            await this._engine.loadImage({
-                gif: imageShape.gif,
-                name: imageShape.name,
-                replaceColor: imageShape.replaceColor,
-                src: imageShape.src,
-            });
-        };
         this._engine = engine;
     }
-    addImage(image) {
-        this._engine.images ??= [];
-        this._engine.images.push(image);
-    }
     draw(data) {
         const { context, radius, particle, opacity } = data, image = particle.image, element = image?.element;
         if (!image) {
@@ -29,7 +14,7 @@ export class ImageDrawer {
         }
         context.globalAlpha = opacity;
         if (image.gif && image.gifData) {
-            drawGif(data);
+            drawGif(data, particle.container.canvas.settings);
         }
         else if (element) {
             const ratio = image.ratio, pos = {
@@ -48,36 +33,38 @@ export class ImageDrawer {
         if (!options.preload || !this._engine.loadImage) {
             return;
         }
+        const promises = [];
         for (const imageData of options.preload) {
-            await this._engine.loadImage(imageData);
+            promises.push(this._engine.loadImage(container, imageData));
         }
+        await Promise.all(promises);
     }
     loadShape(particle) {
-        if (particle.shape !== "image" && particle.shape !== "images") {
+        const { container } = particle;
+        if (!particle.shape || !shapeTypes.includes(particle.shape)) {
             return;
         }
-        this._engine.images ??= [];
         const imageData = particle.shapeData;
         if (!imageData) {
             return;
         }
-        const image = this._engine.images.find((t) => t.name === imageData.name || t.source === imageData.src);
-        if (!image) {
-            void this.loadImageShape(imageData).then(() => {
-                this.loadShape(particle);
-            });
+        const images = this._engine.getImages?.(container), image = images?.find((t) => t.name === imageData.name || t.source === imageData.src);
+        if (image) {
+            return;
         }
+        void this.loadImageShape(container, imageData).then(() => {
+            this.loadShape(particle);
+        });
     }
     particleInit(container, particle) {
         if (particle.shape !== "image" && particle.shape !== "images") {
             return;
         }
-        this._engine.images ??= [];
-        const images = this._engine.images, imageData = particle.shapeData;
+        const images = this._engine.getImages?.(container), imageData = particle.shapeData;
         if (!imageData) {
             return;
         }
-        const color = particle.getFillColor(), image = images.find((t) => t.name === imageData.name || t.source === imageData.src);
+        const color = particle.getFillColor(), image = images?.find((t) => t.name === imageData.name || t.source === imageData.src);
         if (!image) {
             return;
         }
@@ -102,9 +89,7 @@ export class ImageDrawer {
                     gifData: image.gifData,
                     gifLoopCount: image.gifLoopCount,
                     loaded: true,
-                    ratio: imageData.width && imageData.height
-                        ? imageData.width / imageData.height
-                        : (image.ratio ?? defaultRatio),
+                    ratio: imageData.width && imageData.height ? imageData.width / imageData.height : (image.ratio ?? defaultRatio),
                     replaceColor: replaceColor,
                     source: imageData.src,
                 };
@@ -112,14 +97,23 @@ export class ImageDrawer {
             if (!imageRes.ratio) {
                 imageRes.ratio = 1;
             }
-            const fill = imageData.fill ?? particle.shapeFill, close = imageData.close ?? particle.shapeClose, imageShape = {
+            const close = imageData.close ?? particle.shapeClose, imageShape = {
                 image: imageRes,
-                fill,
                 close,
             };
             particle.image = imageShape.image;
-            particle.shapeFill = imageShape.fill;
             particle.shapeClose = imageShape.close;
         })();
     }
+    loadImageShape = async (container, imageShape) => {
+        if (!this._engine.loadImage) {
+            throw new Error(`Image shape not initialized`);
+        }
+        await this._engine.loadImage(container, {
+            gif: imageShape.gif,
+            name: imageShape.name,
+            replaceColor: imageShape.replaceColor,
+            src: imageShape.src,
+        });
+    };
 }

package/browser/ImagePreloader.js

@@ -1,11 +1,13 @@
 import { Preload } from "./Options/Classes/Preload.js";
 export class ImagePreloaderPlugin {
-    constructor() {
-        this.id = "imagePreloader";
+    id = "image-preloader";
+    _engine;
+    constructor(engine) {
+        this._engine = engine;
     }
-    async getPlugin() {
-        await Promise.resolve();
-        return {};
+    async getPlugin(container) {
+        const { ImagePreloaderInstance } = await import("./ImagePreloaderInstance.js");
+        return new ImagePreloaderInstance(this._engine, container);
     }
     loadOptions(_container, options, source) {
         if (!source?.preload) {

package/browser/ImagePreloaderInstance.js

@@ -0,0 +1,11 @@
+export class ImagePreloaderInstance {
+    _container;
+    _engine;
+    constructor(engine, container) {
+        this._engine = engine;
+        this._container = container;
+    }
+    destroy() {
+        this._engine.images?.delete(this._container);
+    }
+}

package/browser/Options/Classes/Preload.js

@@ -1,5 +1,11 @@
 import { isNull } from "@tsparticles/engine";
 export class Preload {
+    gif;
+    height;
+    name;
+    replaceColor;
+    src;
+    width;
     constructor() {
         this.src = "";
         this.gif = false;

package/browser/Utils.js

@@ -1,4 +1,5 @@
 import { getLogger, getStyleFromHsl } from "@tsparticles/engine";
+export const shapeTypes = ["image", "images"];
 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, hdr = false) {
@@ -8,13 +9,13 @@ function replaceColorSvg(imageShape, color, opacity, hdr = false) {
     }
     const colorStyle = getStyleFromHsl(color, hdr, opacity);
     if (svgData.includes("fill")) {
-        return svgData.replace(currentColorRegex, () => colorStyle);
+        return svgData.replaceAll(currentColorRegex, () => colorStyle);
     }
     const preFillIndex = svgData.indexOf(">");
     return `${svgData.substring(stringStart, preFillIndex)} fill="${colorStyle}"${svgData.substring(preFillIndex)}`;
 }
 export async function loadImage(image) {
-    return new Promise((resolve) => {
+    return new Promise(resolve => {
         image.loading = true;
         const img = new Image();
         image.element = img;
@@ -39,12 +40,12 @@ export async function downloadSvgImage(image) {
     }
     image.loading = true;
     const response = await fetch(image.source);
-    if (!response.ok) {
-        getLogger().error("Image not found");
-        image.error = true;
+    if (response.ok) {
+        image.svgData = await response.text();
     }
     else {
-        image.svgData = await response.text();
+        getLogger().error("Image not found");
+        image.error = true;
     }
     image.loading = false;
 }

package/browser/index.js

@@ -1,14 +1,25 @@
+import { shapeTypes } from "./Utils.js";
 const extLength = 3;
 function addLoadImageToEngine(engine) {
-    if (engine.loadImage) {
-        return;
-    }
-    engine.loadImage = async (data) => {
+    engine.getImages ??= (container) => {
+        engine.images ??= new Map();
+        let images = engine.images.get(container);
+        if (!images) {
+            images = [];
+            engine.images.set(container, images);
+        }
+        return images;
+    };
+    engine.loadImage ??= async (container, data) => {
+        if (!engine.getImages) {
+            throw new Error("No images collection found");
+        }
         if (!data.name && !data.src) {
             throw new Error("No image source provided");
         }
-        engine.images ??= [];
-        if (engine.images.some((t) => t.name === data.name || t.source === data.src)) {
+        engine.images ??= new Map();
+        const containerImages = engine.getImages(container);
+        if (containerImages.some((t) => t.name === data.name || t.source === data.src)) {
             return;
         }
         try {
@@ -22,11 +33,12 @@ function addLoadImageToEngine(engine) {
                 replaceColor: data.replaceColor,
                 ratio: data.width && data.height ? data.width / data.height : undefined,
             };
-            engine.images.push(image);
+            containerImages.push(image);
+            engine.images.set(container, containerImages);
             let imageFunc;
             if (data.gif) {
                 const { loadGifImage } = await import("./GifUtils/Utils.js");
-                imageFunc = loadGifImage;
+                imageFunc = (img) => loadGifImage(img, { colorSpace: "srgb" });
             }
             else if (data.replaceColor) {
                 const { downloadSvgImage } = await import("./Utils.js");
@@ -44,12 +56,14 @@ function addLoadImageToEngine(engine) {
     };
 }
 export async function loadImageShape(engine) {
-    engine.checkVersion("4.0.0-alpha.5");
+    engine.checkVersion("4.0.0-beta.0");
     await engine.register(async (e) => {
-        const { ImageDrawer } = await import("./ImageDrawer.js"), { ImagePreloaderPlugin } = await import("./ImagePreloader.js");
+        const { ImagePreloaderPlugin } = await import("./ImagePreloader.js");
         addLoadImageToEngine(e);
-        const preloader = new ImagePreloaderPlugin();
-        e.addPlugin(preloader);
-        e.addShape(new ImageDrawer(e));
+        e.addPlugin(new ImagePreloaderPlugin(e));
+        e.addShape(shapeTypes, async () => {
+            const { ImageDrawer } = await import("./ImageDrawer.js");
+            return new ImageDrawer(e);
+        });
     });
 }

package/cjs/GifUtils/ByteStream.js

@@ -1,4 +1,6 @@
 export class ByteStream {
+    data;
+    pos;
     constructor(bytes) {
         this.pos = 0;
         this.data = new Uint8ClampedArray(bytes);
@@ -17,7 +19,7 @@ export class ByteStream {
         return this.data[this.pos - increment] + (this.data[this.pos - previous] << shift);
     }
     readSubBlocks() {
-        let blockString = "", size = 0;
+        let blockString = "", size;
         const minCount = 0, emptySize = 0;
         do {
             size = this.data[this.pos++];