@tsparticles/shape-image 3.1.0 → 3.2.1

package/tsparticles.shape.image.min.js

@@ -1,2 +1,2 @@
 /*! For license information please see tsparticles.shape.image.min.js.LICENSE.txt */
-!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("@tsparticles/engine"));else if("function"==typeof define&&define.amd)define(["@tsparticles/engine"],t);else{var a="object"==typeof exports?t(require("@tsparticles/engine")):t(e.window);for(var o in a)("object"==typeof exports?exports:e)[o]=a[o]}}(this,(e=>(()=>{"use strict";var t={533:t=>{t.exports=e}},a={};function o(e){var i=a[e];if(void 0!==i)return i.exports;var r=a[e]={exports:{}};return t[e](r,r.exports,o),r.exports}o.d=(e,t)=>{for(var a in t)o.o(t,a)&&!o.o(e,a)&&Object.defineProperty(e,a,{enumerable:!0,get:t[a]})},o.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var i={};return(()=>{o.r(i),o.d(i,{loadImageShape:()=>C});var e=o(533);const t=[0,4,2,1],a=[8,8,4,2];class r{constructor(e){this.pos=0,this.data=new Uint8ClampedArray(e)}getString(e){const 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=0;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=0,t=0;for(let a=0;0!==e;a+=e+1,e=this.data[this.pos+a])t+=e;const a=new Uint8Array(t);for(let t=0;0!==e;e=this.data[this.pos++])for(let o=e;--o>=0;a[t++]=this.data[this.pos++]);return a}skipSubBlocks(){for(const e=1,t=0;this.data[this.pos]!==t;this.pos+=this.data[this.pos]+e);this.pos++}}function n(e,t){const a=[];for(let o=0;o<t;o++)a.push({r:e.data[e.pos],g:e.data[e.pos+1],b:e.data[e.pos+2]}),e.pos+=3;return a}async function s(e,o,i,r,s,l){switch(e.nextByte()){case 59:return!0;case 44:await async function(e,o,i,r,s,l){const c=o.frames[r(!0)];c.left=e.nextTwoBytes(),c.top=e.nextTwoBytes(),c.width=e.nextTwoBytes(),c.height=e.nextTwoBytes();const g=e.nextByte(),h=128==(128&g),d=64==(64&g);c.sortFlag=32==(32&g),c.reserved=(24&g)>>>3;const f=1<<1+(7&g);h&&(c.localColorTable=n(e,f));const p=e=>{const{r:t,g:a,b:r}=(h?c.localColorTable:o.globalColorTable)[e];return e!==s(null)?{r:t,g:a,b:r,a:255}:{r:t,g:a,b:r,a:i?~~((t+a+r)/3):0}},m=(()=>{try{return new ImageData(c.width,c.height,{colorSpace:"srgb"})}catch(e){if(e instanceof DOMException&&"IndexSizeError"===e.name)return null;throw e}})();if(null==m)throw new EvalError("GIF frame size is to large");const u=e.nextByte(),w=e.readSubBlocksBin(),y=1<<u,b=(e,t)=>{const a=e>>>3,o=7&e;return(w[a]+(w[a+1]<<8)+(w[a+2]<<16)&(1<<t)-1<<o)>>>o};if(d){for(let i=0,n=u+1,s=0,g=[[0]],h=0;h<4;h++){if(t[h]<c.height){let e=0,o=0,r=!1;for(;!r;){const l=i;if(i=b(s,n),s+=n+1,i===y){n=u+1,g.length=y+2;for(let e=0;e<g.length;e++)g[e]=e<y?[e]:[]}else{i>=g.length?g.push(g[l].concat(g[l][0])):l!==y&&g.push(g[l].concat(g[i][0]));for(const r of g[i]){const{r:i,g:n,b:s,a:l}=p(r);m.data.set([i,n,s,l],t[h]*c.width+a[h]*o+e%(4*c.width)),e+=4}g.length===1<<n&&n<12&&n++}e===4*c.width*(o+1)&&(o++,t[h]+a[h]*o>=c.height&&(r=!0))}}l?.(e.pos/(e.data.length-1),r(!1)+1,m,{x:c.left,y:c.top},{width:o.width,height:o.height})}c.image=m,c.bitmap=await createImageBitmap(m)}else{let t=0,a=u+1,i=0,n=-4,s=!1;const g=[[0]];for(;!s;){const e=t;if(t=b(i,a),i+=a,t===y){a=u+1,g.length=y+2;for(let e=0;e<g.length;e++)g[e]=e<y?[e]:[]}else{if(t===y+1){s=!0;break}t>=g.length?g.push(g[e].concat(g[e][0])):e!==y&&g.push(g[e].concat(g[t][0]));for(const e of g[t]){const{r:t,g:a,b:o,a:i}=p(e);m.data.set([t,a,o,i],n+=4)}g.length>=1<<a&&a<12&&a++}}c.image=m,c.bitmap=await createImageBitmap(m),l?.((e.pos+1)/e.data.length,r(!1)+1,c.image,{x:c.left,y:c.top},{width:o.width,height:o.height})}}(e,o,i,r,s,l);break;case 33:!function(e,t,a,o){switch(e.nextByte()){case 249:{const i=t.frames[a(!1)];e.pos++;const r=e.nextByte();i.GCreserved=(224&r)>>>5,i.disposalMethod=(28&r)>>>2,i.userInputDelayFlag=2==(2&r);const n=1==(1&r);i.delayTime=10*e.nextTwoBytes();const s=e.nextByte();n&&o(s),e.pos++;break}case 255:{e.pos++;const a={identifier:e.getString(8),authenticationCode:e.getString(3),data:e.readSubBlocksBin()};t.applicationExtensions.push(a);break}case 254:t.comments.push([a(!1),e.readSubBlocks()]);break;case 1:if(0===t.globalColorTable.length)throw new EvalError("plain text extension without global color table");e.pos++,t.frames[a(!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()}}(e,o,r,s);break;default:throw new EvalError("undefined block found")}return!1}const l=0,c=0,g=/(#(?:[0-9a-f]{2}){2,4}|(#[0-9a-f]{3})|(rgb|hsl)a?\((-?\d+%?[,\s]+){2,3}\s*[\d.]+%?\))|currentcolor/gi;async function h(t){return new Promise((a=>{t.loading=!0;const o=new Image;t.element=o,o.addEventListener("load",(()=>{t.loading=!1,a()})),o.addEventListener("error",(()=>{t.element=void 0,t.error=!0,t.loading=!1,(0,e.getLogger)().error(`${e.errorPrefix} loading image: ${t.source}`),a()})),o.src=t.source}))}async function d(e){if("gif"===e.type){e.loading=!0;try{e.gifData=await async function(e,t,a){a||(a=!1);const o=await fetch(e);if(!o.ok&&404===o.status)throw new EvalError("file not found");const i=await o.arrayBuffer(),l={width:0,height:0,totalTime:0,colorRes:0,pixelAspectRatio:0,frames:[],sortFlag:!1,globalColorTable:[],backgroundImage:new ImageData(1,1,{colorSpace:"srgb"}),comments:[],applicationExtensions:[]},c=new r(new Uint8ClampedArray(i));if("GIF89a"!==c.getString(6))throw new Error("not a supported GIF file");l.width=c.nextTwoBytes(),l.height=c.nextTwoBytes();const g=c.nextByte(),h=128==(128&g);l.colorRes=(112&g)>>>4,l.sortFlag=8==(8&g);const d=1<<1+(7&g),f=c.nextByte();l.pixelAspectRatio=c.nextByte(),0!==l.pixelAspectRatio&&(l.pixelAspectRatio=(l.pixelAspectRatio+15)/64),h&&(l.globalColorTable=n(c,d));const p=(()=>{try{return new ImageData(l.width,l.height,{colorSpace:"srgb"})}catch(e){if(e instanceof DOMException&&"IndexSizeError"===e.name)return null;throw e}})();if(null==p)throw new Error("GIF frame size is to large");const{r:m,g:u,b:w}=l.globalColorTable[f];p.data.set(h?[m,u,w,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,x=-1;const C=e=>(e&&(b=!0),y),v=e=>(null!=e&&(x=e),x);try{do{b&&(l.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 s(c,l,a,C,v,t));l.frames.length--;for(const e of 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 new Error(`error while parsing frame ${y} "${e.message}"`);throw e}}(e.source),e.gifLoopCount=function(e){for(const t of e.applicationExtensions)if(t.identifier+t.authenticationCode==="NETSCAPE2.0")return t.data[1]+(t.data[2]<<8);return NaN}(e.gifData)??c,e.gifLoopCount||(e.gifLoopCount=1/0)}catch{e.error=!0}e.loading=!1}else await h(e)}async function f(t){if("svg"!==t.type)return void await h(t);t.loading=!0;const a=await fetch(t.source);a.ok?t.svgData=await a.text():((0,e.getLogger)().error(`${e.errorPrefix} Image not found`),t.error=!0),t.loading=!1}function p(t,a,o,i){const r=function(t,a,o){const{svgData:i}=t;if(!i)return"";const r=(0,e.getStyleFromHsl)(a,o);if(i.includes("fill"))return i.replace(g,(()=>r));const n=i.indexOf(">");return`${i.substring(l,n)} fill="${r}"${i.substring(n)}`}(t,o,i.opacity?.value??1),n={color:o,gif:a.gif,data:{...t,svgData:r},loaded:!1,ratio:a.width/a.height,replaceColor:a.replaceColor,source:a.src};return new Promise((e=>{const a=new Blob([r],{type:"image/svg+xml"}),o=URL||window.URL||window.webkitURL||window,i=o.createObjectURL(a),s=new Image;s.addEventListener("load",(()=>{n.loaded=!0,n.element=s,e(n),o.revokeObjectURL(i)}));s.addEventListener("error",(()=>{(async()=>{o.revokeObjectURL(i);const a={...t,error:!1,loading:!0};await h(a),n.loaded=!0,n.element=a.element,e(n)})()})),s.src=i}))}const m=0,u=0;class w{constructor(t){this.loadImageShape=async t=>{if(!this._engine.loadImage)throw new Error(`${e.errorPrefix} image shape not initialized`);await this._engine.loadImage({gif:t.gif,name:t.name,replaceColor:t.replaceColor??!1,src:t.src})},this._engine=t}addImage(e){this._engine.images||(this._engine.images=[]),this._engine.images.push(e)}draw(e){const{context:t,radius:a,particle:o,opacity:i,delta:r}=e,n=o.image,s=n?.element;if(n){if(t.globalAlpha=i,n.gif&&n.gifData){const e=new OffscreenCanvas(n.gifData.width,n.gifData.height),i=e.getContext("2d");if(!i)throw new Error("could not create offscreen canvas context");i.imageSmoothingQuality="low",i.imageSmoothingEnabled=!1,i.clearRect(m,u,e.width,e.height),void 0===o.gifLoopCount&&(o.gifLoopCount=n.gifLoopCount??0);let s=o.gifFrame??0;const l={x:.5*-n.gifData.width,y:.5*-n.gifData.height},c=n.gifData.frames[s];if(void 0===o.gifTime&&(o.gifTime=0),!c.bitmap)return;switch(t.scale(a/n.gifData.width,a/n.gifData.height),c.disposalMethod){case 4:case 5:case 6:case 7:case 0:i.drawImage(c.bitmap,c.left,c.top),t.drawImage(e,l.x,l.y),i.clearRect(m,u,e.width,e.height);break;case 1:i.drawImage(c.bitmap,c.left,c.top),t.drawImage(e,l.x,l.y);break;case 2:i.drawImage(c.bitmap,c.left,c.top),t.drawImage(e,l.x,l.y),i.clearRect(m,u,e.width,e.height),n.gifData.globalColorTable.length?i.putImageData(n.gifData.backgroundImage,l.x,l.y):i.putImageData(n.gifData.frames[0].image,l.x+c.left,l.y+c.top);break;case 3:{const a=i.getImageData(m,u,e.width,e.height);i.drawImage(c.bitmap,c.left,c.top),t.drawImage(e,l.x,l.y),i.clearRect(m,u,e.width,e.height),i.putImageData(a,m,u)}}if(o.gifTime+=r.value,o.gifTime>c.delayTime){if(o.gifTime-=c.delayTime,++s>=n.gifData.frames.length){if(--o.gifLoopCount<=0)return;s=0,i.clearRect(m,u,e.width,e.height)}o.gifFrame=s}t.scale(n.gifData.width/a,n.gifData.height/a)}else if(s){const e=n.ratio,o={x:-a,y:-a},i=2*a;t.drawImage(s,o.x,o.y,i,i/e)}t.globalAlpha=1}}getSidesCount(){return 12}async init(e){const t=e.actualOptions;if(t.preload&&this._engine.loadImage)for(const e of t.preload)await this._engine.loadImage(e)}loadShape(e){if("image"!==e.shape&&"images"!==e.shape)return;this._engine.images||(this._engine.images=[]);const t=e.shapeData;if(!t)return;this._engine.images.find((e=>e.name===t.name||e.source===t.src))||this.loadImageShape(t).then((()=>{this.loadShape(e)}))}particleInit(e,t){if("image"!==t.shape&&"images"!==t.shape)return;this._engine.images||(this._engine.images=[]);const a=this._engine.images,o=t.shapeData;if(!o)return;const i=t.getFillColor(),r=a.find((e=>e.name===o.name||e.source===o.src));if(!r)return;const n=o.replaceColor??r.replaceColor;r.loading?setTimeout((()=>{this.particleInit(e,t)})):(async()=>{let e;e=r.svgData&&i?await p(r,o,i,t):{color:i,data:r,element:r.element,gif:r.gif,gifData:r.gifData,gifLoopCount:r.gifLoopCount,loaded:!0,ratio:o.width&&o.height?o.width/o.height:r.ratio??1,replaceColor:n,source:o.src},e.ratio||(e.ratio=1);const a={image:e,fill:o.fill??t.shapeFill,close:o.close??t.shapeClose};t.image=a.image,t.shapeFill=a.fill,t.shapeClose=a.close})()}}class y{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 b{constructor(e){this.id="imagePreloader",this._engine=e}getPlugin(){return{}}loadOptions(e,t){if(!t?.preload)return;e.preload||(e.preload=[]);const a=e.preload;for(const e of t.preload){const t=a.find((t=>t.name===e.name||t.src===e.src));if(t)t.load(e);else{const t=new y;t.load(e),a.push(t)}}}needsPlugin(){return!0}}const x=3;async function C(t,a=!0){!function(t){t.loadImage||(t.loadImage=async a=>{if(!a.name&&!a.src)throw new Error(`${e.errorPrefix} no image source provided`);if(t.images||(t.images=[]),!t.images.find((e=>e.name===a.name||e.source===a.src)))try{const e={gif:a.gif??!1,name:a.name??a.src,source:a.src,type:a.src.substring(a.src.length-x),error:!1,loading:!0,replaceColor:a.replaceColor,ratio:a.width&&a.height?a.width/a.height:void 0};let o;t.images.push(e),o=a.gif?d:a.replaceColor?f:h,await o(e)}catch{throw new Error(`${e.errorPrefix} ${a.name??a.src} not found`)}})}(t);const o=new b(t);await t.addPlugin(o,a),await t.addShape(["image","images"],new w(t),a)}})(),i})()));
+!function(e,r){if("object"==typeof exports&&"object"==typeof module)module.exports=r(require("@tsparticles/engine"));else if("function"==typeof define&&define.amd)define(["@tsparticles/engine"],r);else{var t="object"==typeof exports?r(require("@tsparticles/engine")):r(e.window);for(var o in t)("object"==typeof exports?exports:e)[o]=t[o]}}(this,(e=>(()=>{var r,t,o={103:(e,r,t)=>{t.d(r,{d:()=>c,loadImage:()=>s,replaceImageColor:()=>l});var o=t(533);const a=0,n=1,i=/(#(?:[0-9a-f]{2}){2,4}|(#[0-9a-f]{3})|(rgb|hsl)a?\((-?\d+%?[,\s]+){2,3}\s*[\d.]+%?\))|currentcolor/gi;async function s(e){return new Promise((r=>{e.loading=!0;const t=new Image;e.element=t,t.addEventListener("load",(()=>{e.loading=!1,r()})),t.addEventListener("error",(()=>{e.element=void 0,e.error=!0,e.loading=!1,(0,o.getLogger)().error(`${o.errorPrefix} loading image: ${e.source}`),r()})),t.src=e.source}))}async function c(e){if("svg"!==e.type)return void await s(e);e.loading=!0;const r=await fetch(e.source);r.ok?e.svgData=await r.text():((0,o.getLogger)().error(`${o.errorPrefix} Image not found`),e.error=!0),e.loading=!1}function l(e,r,t,c){const l=function(e,r,t){const{svgData:n}=e;if(!n)return"";const s=(0,o.getStyleFromHsl)(r,t);if(n.includes("fill"))return n.replace(i,(()=>s));const c=n.indexOf(">");return`${n.substring(a,c)} fill="${s}"${n.substring(c)}`}(e,t,c.opacity?.value??n),d={color:t,gif:r.gif,data:{...e,svgData:l},loaded:!1,ratio:r.width/r.height,replaceColor:r.replaceColor,source:r.src};return new Promise((r=>{const t=new Blob([l],{type:"image/svg+xml"}),o=URL||window.URL||window.webkitURL||window,a=o.createObjectURL(t),n=new Image;n.addEventListener("load",(()=>{d.loaded=!0,d.element=n,r(d),o.revokeObjectURL(a)}));n.addEventListener("error",(()=>{(async()=>{o.revokeObjectURL(a);const t={...e,error:!1,loading:!0};await s(t),d.loaded=!0,d.element=t.element,r(d)})()})),n.src=a}))}},533:r=>{r.exports=e}},a={};function n(e){var r=a[e];if(void 0!==r)return r.exports;var t=a[e]={exports:{}};return o[e](t,t.exports,n),t.exports}n.m=o,n.n=e=>{var r=e&&e.__esModule?()=>e.default:()=>e;return n.d(r,{a:r}),r},n.d=(e,r)=>{for(var t in r)n.o(r,t)&&!n.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:r[t]})},n.f={},n.e=e=>Promise.all(Object.keys(n.f).reduce(((r,t)=>(n.f[t](e,r),r)),[])),n.u=e=>e+".min.js",n.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),n.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r),r={},t="@tsparticles/shape-image:",n.l=(e,o,a,i)=>{if(r[e])r[e].push(o);else{var s,c;if(void 0!==a)for(var l=document.getElementsByTagName("script"),d=0;d<l.length;d++){var u=l[d];if(u.getAttribute("src")==e||u.getAttribute("data-webpack")==t+a){s=u;break}}s||(c=!0,(s=document.createElement("script")).charset="utf-8",s.timeout=120,n.nc&&s.setAttribute("nonce",n.nc),s.setAttribute("data-webpack",t+a),s.src=e),r[e]=[o];var g=(t,o)=>{s.onerror=s.onload=null,clearTimeout(f);var a=r[e];if(delete r[e],s.parentNode&&s.parentNode.removeChild(s),a&&a.forEach((e=>e(o))),t)return t(o)},f=setTimeout(g.bind(null,void 0,{type:"timeout",target:s}),12e4);s.onerror=g.bind(null,s.onerror),s.onload=g.bind(null,s.onload),c&&document.head.appendChild(s)}},n.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},(()=>{var e;n.g.importScripts&&(e=n.g.location+"");var r=n.g.document;if(!e&&r&&(r.currentScript&&(e=r.currentScript.src),!e)){var t=r.getElementsByTagName("script");if(t.length)for(var o=t.length-1;o>-1&&!e;)e=t[o--].src}if(!e)throw new Error("Automatic publicPath is not supported in this browser");e=e.replace(/#.*$/,"").replace(/\?.*$/,"").replace(/\/[^\/]+$/,"/"),n.p=e})(),(()=>{var e={852:0};n.f.j=(r,t)=>{var o=n.o(e,r)?e[r]:void 0;if(0!==o)if(o)t.push(o[2]);else{var a=new Promise(((t,a)=>o=e[r]=[t,a]));t.push(o[2]=a);var i=n.p+n.u(r),s=new Error;n.l(i,(t=>{if(n.o(e,r)&&(0!==(o=e[r])&&(e[r]=void 0),o)){var a=t&&("load"===t.type?"missing":t.type),i=t&&t.target&&t.target.src;s.message="Loading chunk "+r+" failed.\n("+a+": "+i+")",s.name="ChunkLoadError",s.type=a,s.request=i,o[1](s)}}),"chunk-"+r,r)}};var r=(r,t)=>{var o,a,i=t[0],s=t[1],c=t[2],l=0;if(i.some((r=>0!==e[r]))){for(o in s)n.o(s,o)&&(n.m[o]=s[o]);if(c)c(n)}for(r&&r(t);l<i.length;l++)a=i[l],n.o(e,a)&&e[a]&&e[a][0](),e[a]=0},t=this.webpackChunk_tsparticles_shape_image=this.webpackChunk_tsparticles_shape_image||[];t.forEach(r.bind(null,0)),t.push=r.bind(null,t.push.bind(t))})();var i={};return(()=>{n.r(i),n.d(i,{loadImageShape:()=>o});var e=n(103),r=n(533);const t=3;async function o(o,a=!0){!function(o){o.loadImage||(o.loadImage=async a=>{if(!a.name&&!a.src)throw new Error(`${r.errorPrefix} no image source provided`);if(o.images||(o.images=[]),!o.images.find((e=>e.name===a.name||e.source===a.src)))try{const r={gif:a.gif??!1,name:a.name??a.src,source:a.src,type:a.src.substring(a.src.length-t),error:!1,loading:!0,replaceColor:a.replaceColor,ratio:a.width&&a.height?a.width/a.height:void 0};let i;if(o.images.push(r),a.gif){const{loadGifImage:e}=await n.e(618).then(n.bind(n,618));i=e}else i=a.replaceColor?e.d:e.loadImage;await i(r)}catch{throw new Error(`${r.errorPrefix} ${a.name??a.src} not found`)}})}(o);const{ImagePreloaderPlugin:i}=await n.e(623).then(n.bind(n,623)),{ImageDrawer:s}=await n.e(21).then(n.bind(n,21)),c=new i(o);await o.addPlugin(c,a),await o.addShape(["image","images"],new s(o),a)}})(),i})()));

package/tsparticles.shape.image.min.js.LICENSE.txt

@@ -1 +1 @@
-/*! tsParticles Image Shape v3.1.0 by Matteo Bruni */
+/*! tsParticles Image Shape v3.2.1 by Matteo Bruni */

package/types/GifUtils/Utils.d.ts

@@ -1,4 +1,8 @@
+import type { IShapeDrawData } from "@tsparticles/engine";
+import type { IImage, ImageParticle } from "../Utils.js";
 import type { GIF } from "./Types/GIF.js";
 import type { GIFProgressCallbackFunction } from "./Types/GIFProgressCallbackFunction.js";
 export declare function getGIFLoopAmount(gif: GIF): number;
 export declare function decodeGIF(gifURL: string, progressCallback?: GIFProgressCallbackFunction, avgAlpha?: boolean): Promise<GIF>;
+export declare function drawGif(data: IShapeDrawData<ImageParticle>): void;
+export declare function loadGifImage(image: IImage): Promise<void>;

package/types/ImageDrawer.d.ts

@@ -1,14 +1,14 @@
 import { type Container, type IShapeDrawData, type IShapeDrawer } from "@tsparticles/engine";
-import { type IImage, type ImageParticle } from "./Utils.js";
+import type { IImage, ImageParticle } from "./Utils.js";
 import type { ImageContainer, ImageEngine } from "./types.js";
 export declare class ImageDrawer implements IShapeDrawer<ImageParticle> {
     private readonly _engine;
     constructor(engine: ImageEngine);
     addImage(image: IImage): void;
-    draw(data: IShapeDrawData<ImageParticle>): void;
+    draw(data: IShapeDrawData<ImageParticle>): Promise<void>;
     getSidesCount(): number;
     init(container: ImageContainer): Promise<void>;
-    loadShape(particle: ImageParticle): void;
-    particleInit(container: Container, particle: ImageParticle): void;
+    loadShape(particle: ImageParticle): Promise<void>;
+    particleInit(container: Container, particle: ImageParticle): Promise<void>;
     private readonly loadImageShape;
 }

package/types/ImagePreloader.d.ts

@@ -4,7 +4,7 @@ export declare class ImagePreloaderPlugin implements IPlugin {
     readonly id: string;
     private readonly _engine;
     constructor(engine: Engine);
-    getPlugin(): IContainerPlugin;
+    getPlugin(): Promise<IContainerPlugin>;
     loadOptions(options: PreloadOptions, source?: RecursivePartial<IPreloadOptions>): void;
     needsPlugin(): boolean;
 }

package/types/Utils.d.ts

@@ -35,6 +35,5 @@ export type ImageParticle = Particle & {
     image?: IParticleImage;
 };
 export declare function loadImage(image: IImage): Promise<void>;
-export declare function loadGifImage(image: IImage): Promise<void>;
 export declare function downloadSvgImage(image: IImage): Promise<void>;
 export declare function replaceImageColor(image: IImage, imageData: IImageShape, color: IHsl, particle: Particle): Promise<IParticleImage>;

package/umd/GifUtils/ByteStream.js

@@ -39,12 +39,13 @@
             return blockString;
         }
         readSubBlocksBin() {
-            let size = 0, len = 0;
+            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);
+            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++]) {
                 }

package/umd/GifUtils/Utils.js

@@ -1,3 +1,26 @@
+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);
@@ -8,10 +31,15 @@
     }
 })(function (require, exports) {
     "use strict";
+    var __syncRequire = typeof module === "object" && typeof module.exports === "object";
     Object.defineProperty(exports, "__esModule", { value: true });
-    exports.decodeGIF = exports.getGIFLoopAmount = void 0;
+    exports.loadGifImage = exports.drawGif = exports.decodeGIF = exports.getGIFLoopAmount = void 0;
     const Constants_js_1 = require("./Constants.js");
     const ByteStream_js_1 = require("./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++) {
@@ -343,4 +371,98 @@
         }
     }
     exports.decodeGIF = decodeGIF;
+    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);
+    }
+    exports.drawGif = drawGif;
+    async function loadGifImage(image) {
+        if (image.type !== "gif") {
+            const { loadImage } = await (__syncRequire ? Promise.resolve().then(() => __importStar(require("../Utils.js"))) : new Promise((resolve_1, reject_1) => { require(["../Utils.js"], resolve_1, reject_1); }).then(__importStar));
+            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;
+    }
+    exports.loadGifImage = loadGifImage;
 });

package/umd/ImageDrawer.js

@@ -1,21 +1,41 @@
+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", "@tsparticles/engine", "./Utils.js"], factory);
+        define(["require", "exports", "@tsparticles/engine"], factory);
     }
 })(function (require, exports) {
     "use strict";
+    var __syncRequire = typeof module === "object" && typeof module.exports === "object";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.ImageDrawer = void 0;
     const engine_1 = require("@tsparticles/engine");
-    const Utils_js_1 = require("./Utils.js");
-    const origin = {
-        x: 0,
-        y: 0,
-    }, defaultLoopCount = 0, defaultFrame = 0, half = 0.5, initialTime = 0, firstIndex = 0, double = 2, defaultAlpha = 1, sides = 12, defaultRatio = 1;
+    const double = 2, defaultAlpha = 1, sides = 12, defaultRatio = 1;
     class ImageDrawer {
         constructor(engine) {
             this.loadImageShape = async (imageShape) => {
@@ -37,80 +57,15 @@
             }
             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(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);
+                const { drawGif } = await (__syncRequire ? Promise.resolve().then(() => __importStar(require("./GifUtils/Utils.js"))) : new Promise((resolve_1, reject_1) => { require(["./GifUtils/Utils.js"], resolve_1, reject_1); }).then(__importStar));
+                drawGif(data);
             }
             else if (element) {
                 const ratio = image.ratio, pos = {
@@ -133,7 +88,7 @@
                 await this._engine.loadImage(imageData);
             }
         }
-        loadShape(particle) {
+        async loadShape(particle) {
             if (particle.shape !== "image" && particle.shape !== "images") {
                 return;
             }
@@ -146,12 +101,11 @@
             }
             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);
-                });
+                await this.loadImageShape(imageData);
+                await this.loadShape(particle);
             }
         }
-        particleInit(container, particle) {
+        async particleInit(container, particle) {
             if (particle.shape !== "image" && particle.shape !== "images") {
                 return;
             }
@@ -169,43 +123,42 @@
             const replaceColor = imageData.replaceColor ?? image.replaceColor;
             if (image.loading) {
                 setTimeout(() => {
-                    this.particleInit(container, particle);
+                    void this.particleInit(container, particle);
                 });
                 return;
             }
-            void (async () => {
-                let imageRes;
-                if (image.svgData && color) {
-                    imageRes = await (0, Utils_js_1.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,
-                    };
-                }
-                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 (__syncRequire ? Promise.resolve().then(() => __importStar(require("./Utils.js"))) : new Promise((resolve_2, reject_2) => { require(["./Utils.js"], resolve_2, reject_2); }).then(__importStar));
+                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;
         }
     }
     exports.ImageDrawer = ImageDrawer;

package/umd/ImagePreloader.js

@@ -16,7 +16,8 @@
             this.id = "imagePreloader";
             this._engine = engine;
         }
-        getPlugin() {
+        async getPlugin() {
+            await Promise.resolve();
             return {};
         }
         loadOptions(options, source) {

package/umd/Utils.js

@@ -4,15 +4,14 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "@tsparticles/engine", "./GifUtils/Utils.js"], factory);
+        define(["require", "exports", "@tsparticles/engine"], factory);
     }
 })(function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    exports.replaceImageColor = exports.downloadSvgImage = exports.loadGifImage = exports.loadImage = void 0;
+    exports.replaceImageColor = exports.downloadSvgImage = exports.loadImage = void 0;
     const engine_1 = require("@tsparticles/engine");
-    const Utils_js_1 = require("./GifUtils/Utils.js");
-    const stringStart = 0, defaultLoopCount = 0, defaultOpacity = 1;
+    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;
@@ -46,25 +45,6 @@
         });
     }
     exports.loadImage = loadImage;
-    async function loadGifImage(image) {
-        if (image.type !== "gif") {
-            await loadImage(image);
-            return;
-        }
-        image.loading = true;
-        try {
-            image.gifData = await (0, Utils_js_1.decodeGIF)(image.source);
-            image.gifLoopCount = (0, Utils_js_1.getGIFLoopAmount)(image.gifData) ?? defaultLoopCount;
-            if (!image.gifLoopCount) {
-                image.gifLoopCount = Infinity;
-            }
-        }
-        catch {
-            image.error = true;
-        }
-        image.loading = false;
-    }
-    exports.loadGifImage = loadGifImage;
     async function downloadSvgImage(image) {
         if (image.type !== "svg") {
             await loadImage(image);

package/umd/index.js

@@ -1,18 +1,40 @@
+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", "./Utils.js", "./ImageDrawer.js", "./ImagePreloader.js", "@tsparticles/engine"], factory);
+        define(["require", "exports", "./Utils.js", "@tsparticles/engine"], factory);
     }
 })(function (require, exports) {
     "use strict";
+    var __syncRequire = typeof module === "object" && typeof module.exports === "object";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.loadImageShape = void 0;
     const Utils_js_1 = require("./Utils.js");
-    const ImageDrawer_js_1 = require("./ImageDrawer.js");
-    const ImagePreloader_js_1 = require("./ImagePreloader.js");
     const engine_1 = require("@tsparticles/engine");
     const extLength = 3;
     function addLoadImageToEngine(engine) {
@@ -43,7 +65,8 @@
                 engine.images.push(image);
                 let imageFunc;
                 if (data.gif) {
-                    imageFunc = Utils_js_1.loadGifImage;
+                    const { loadGifImage } = await (__syncRequire ? Promise.resolve().then(() => __importStar(require("./GifUtils/Utils.js"))) : new Promise((resolve_1, reject_1) => { require(["./GifUtils/Utils.js"], resolve_1, reject_1); }).then(__importStar));
+                    imageFunc = loadGifImage;
                 }
                 else {
                     imageFunc = data.replaceColor ? Utils_js_1.downloadSvgImage : Utils_js_1.loadImage;
@@ -57,9 +80,10 @@
     }
     async function loadImageShape(engine, refresh = true) {
         addLoadImageToEngine(engine);
-        const preloader = new ImagePreloader_js_1.ImagePreloaderPlugin(engine);
+        const { ImagePreloaderPlugin } = await (__syncRequire ? Promise.resolve().then(() => __importStar(require("./ImagePreloader.js"))) : new Promise((resolve_2, reject_2) => { require(["./ImagePreloader.js"], resolve_2, reject_2); }).then(__importStar)), { ImageDrawer } = await (__syncRequire ? Promise.resolve().then(() => __importStar(require("./ImageDrawer.js"))) : new Promise((resolve_3, reject_3) => { require(["./ImageDrawer.js"], resolve_3, reject_3); }).then(__importStar));
+        const preloader = new ImagePreloaderPlugin(engine);
         await engine.addPlugin(preloader, refresh);
-        await engine.addShape(["image", "images"], new ImageDrawer_js_1.ImageDrawer(engine), refresh);
+        await engine.addShape(["image", "images"], new ImageDrawer(engine), refresh);
     }
     exports.loadImageShape = loadImageShape;
 });