Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@tsparticles/shape-image

Package Overview
Dependencies
Maintainers
0
Versions
21
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@tsparticles/shape-image - npm Package Compare versions

Comparing version 3.4.0 to 3.5.0

9

cjs/GifUtils/Utils.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.loadGifImage = exports.drawGif = exports.decodeGIF = exports.getGIFLoopAmount = void 0;
exports.getGIFLoopAmount = getGIFLoopAmount;
exports.decodeGIF = decodeGIF;
exports.drawGif = drawGif;
exports.loadGifImage = loadGifImage;
const Utils_js_1 = require("../Utils.js");

@@ -232,3 +235,2 @@ const Constants_js_1 = require("./Constants.js");

}
exports.getGIFLoopAmount = getGIFLoopAmount;
async function decodeGIF(gifURL, progressCallback, avgAlpha) {

@@ -344,3 +346,2 @@ if (!avgAlpha)

}
exports.decodeGIF = decodeGIF;
function drawGif(data) {

@@ -419,3 +420,2 @@ const { context, radius, particle, delta } = data, image = particle.image;

}
exports.drawGif = drawGif;
async function loadGifImage(image) {

@@ -439,2 +439,1 @@ if (image.type !== "gif") {

}
exports.loadGifImage = loadGifImage;
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.loadImageShape = void 0;
exports.loadImageShape = loadImageShape;
const Utils_js_1 = require("./Utils.js");

@@ -56,2 +56,1 @@ const ImageDrawer_js_1 = require("./ImageDrawer.js");

}
exports.loadImageShape = loadImageShape;
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.replaceImageColor = exports.downloadSvgImage = exports.loadImage = void 0;
exports.loadImage = loadImage;
exports.downloadSvgImage = downloadSvgImage;
exports.replaceImageColor = replaceImageColor;
const engine_1 = require("@tsparticles/engine");

@@ -38,3 +40,2 @@ const stringStart = 0, defaultOpacity = 1;

}
exports.loadImage = loadImage;
async function downloadSvgImage(image) {

@@ -56,3 +57,2 @@ if (image.type !== "svg") {

}
exports.downloadSvgImage = downloadSvgImage;
function replaceImageColor(image, imageData, color, particle) {

@@ -95,2 +95,1 @@ const svgColoredData = replaceColorSvg(image, color, particle.opacity?.value ?? defaultOpacity), imageRes = {

}
exports.replaceImageColor = replaceImageColor;
{
"name": "@tsparticles/shape-image",
"version": "3.4.0",
"version": "3.5.0",
"description": "tsParticles image shape",

@@ -62,3 +62,3 @@ "homepage": "https://particles.js.org",

"dependencies": {
"@tsparticles/engine": "^3.4.0"
"@tsparticles/engine": "^3.5.0"
},

@@ -65,0 +65,0 @@ "publishConfig": {

@@ -7,3 +7,3 @@ /*!

* How to use? : Check the GitHub README
* v3.4.0
* v3.5.0
*/

@@ -10,0 +10,0 @@ /*

/*! 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=>(()=>{var t={303:t=>{t.exports=e}},a={};function o(e){var i=a[e];if(void 0!==i)return i.exports;var n=a[e]={exports:{}};return t[e](n,n.exports,o),n.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:()=>E});var e=o(303);const t=0,a=/(#(?:[0-9a-f]{2}){2,4}|(#[0-9a-f]{3})|(rgb|hsl)a?\((-?\d+%?[,\s]+){2,3}\s*[\d.]+%?\))|currentcolor/gi;async function n(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 r(t){if("svg"!==t.type)return void await n(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 s(o,i,r,s){const l=function(o,i,n){const{svgData:r}=o;if(!r)return"";const s=(0,e.getStyleFromHsl)(i,n);if(r.includes("fill"))return r.replace(a,(()=>s));const l=r.indexOf(">");return`${r.substring(t,l)} fill="${s}"${r.substring(l)}`}(o,r,s.opacity?.value??1),c={color:r,gif:i.gif,data:{...o,svgData:l},loaded:!1,ratio:i.width/i.height,replaceColor:i.replaceColor,source:i.src};return new Promise((e=>{const t=new Blob([l],{type:"image/svg+xml"}),a=URL||window.URL||window.webkitURL||window,i=a.createObjectURL(t),r=new Image;r.addEventListener("load",(()=>{c.loaded=!0,c.element=r,e(c),a.revokeObjectURL(i)}));r.addEventListener("error",(()=>{(async()=>{a.revokeObjectURL(i);const t={...o,error:!1,loading:!0};await n(t),c.loaded=!0,c.element=t.element,e(c)})()})),r.src=i}))}const l=[0,4,2,1],c=[8,8,4,2];class g{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=this.data[this.pos],t=0;for(let a=0;0!==e;a+=e+1,e=this.data[this.pos+a])t+=e;const a=new Uint8Array(t);e=this.data[this.pos++];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++}}var d,h;!function(e){e[e.Replace=0]="Replace",e[e.Combine=1]="Combine",e[e.RestoreBackground=2]="RestoreBackground",e[e.RestorePrevious=3]="RestorePrevious",e[e.UndefinedA=4]="UndefinedA",e[e.UndefinedB=5]="UndefinedB",e[e.UndefinedC=6]="UndefinedC",e[e.UndefinedD=7]="UndefinedD"}(d||(d={})),function(e){e[e.Extension=33]="Extension",e[e.ApplicationExtension=255]="ApplicationExtension",e[e.GraphicsControlExtension=249]="GraphicsControlExtension",e[e.PlainTextExtension=1]="PlainTextExtension",e[e.CommentExtension=254]="CommentExtension",e[e.Image=44]="Image",e[e.EndOfFile=59]="EndOfFile"}(h||(h={}));const f=0,p=0,m=0;function u(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 w(e,t,a,o,i,n){switch(e.nextByte()){case h.EndOfFile:return!0;case h.Image:await async function(e,t,a,o,i,n){const r=t.frames[o(!0)];r.left=e.nextTwoBytes(),r.top=e.nextTwoBytes(),r.width=e.nextTwoBytes(),r.height=e.nextTwoBytes();const s=e.nextByte(),g=128==(128&s),d=64==(64&s);r.sortFlag=32==(32&s),r.reserved=(24&s)>>>3;const h=1<<1+(7&s);g&&(r.localColorTable=u(e,h));const f=e=>{const{r:o,g:n,b:s}=(g?r.localColorTable:t.globalColorTable)[e];return e!==i(null)?{r:o,g:n,b:s,a:255}:{r:o,g:n,b:s,a:a?~~((o+n+s)/3):0}},p=(()=>{try{return new ImageData(r.width,r.height,{colorSpace:"srgb"})}catch(e){if(e instanceof DOMException&&"IndexSizeError"===e.name)return null;throw e}})();if(null==p)throw new EvalError("GIF frame size is to large");const m=e.nextByte(),w=e.readSubBlocksBin(),x=1<<m,y=(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 a=0,i=m+1,s=0,g=[[0]],d=0;d<4;d++){if(l[d]<r.height){let e=0,t=0,o=!1;for(;!o;){const n=a;if(a=y(s,i),s+=i+1,a===x){i=m+1,g.length=x+2;for(let e=0;e<g.length;e++)g[e]=e<x?[e]:[]}else{a>=g.length?g.push(g[n].concat(g[n][0])):n!==x&&g.push(g[n].concat(g[a][0]));for(const o of g[a]){const{r:a,g:i,b:n,a:s}=f(o);p.data.set([a,i,n,s],l[d]*r.width+c[d]*t+e%(4*r.width)),e+=4}g.length===1<<i&&i<12&&i++}e===4*r.width*(t+1)&&(t++,l[d]+c[d]*t>=r.height&&(o=!0))}}n?.(e.pos/(e.data.length-1),o(!1)+1,p,{x:r.left,y:r.top},{width:t.width,height:t.height})}r.image=p,r.bitmap=await createImageBitmap(p)}else{let a=0,i=m+1,s=0,l=-4,c=!1;const g=[[0]];for(;!c;){const e=a;if(a=y(s,i),s+=i,a===x){i=m+1,g.length=x+2;for(let e=0;e<g.length;e++)g[e]=e<x?[e]:[]}else{if(a===x+1){c=!0;break}a>=g.length?g.push(g[e].concat(g[e][0])):e!==x&&g.push(g[e].concat(g[a][0]));for(const e of g[a]){const{r:t,g:a,b:o,a:i}=f(e);p.data.set([t,a,o,i],l+=4)}g.length>=1<<i&&i<12&&i++}}r.image=p,r.bitmap=await createImageBitmap(p),n?.((e.pos+1)/e.data.length,o(!1)+1,r.image,{x:r.left,y:r.top},{width:t.width,height:t.height})}}(e,t,a,o,i,n);break;case h.Extension:!function(e,t,a,o){switch(e.nextByte()){case h.GraphicsControlExtension:{const i=t.frames[a(!1)];e.pos++;const n=e.nextByte();i.GCreserved=(224&n)>>>5,i.disposalMethod=(28&n)>>>2,i.userInputDelayFlag=2==(2&n);const r=1==(1&n);i.delayTime=10*e.nextTwoBytes();const s=e.nextByte();r&&o(s),e.pos++;break}case h.ApplicationExtension:{e.pos++;const a={identifier:e.getString(8),authenticationCode:e.getString(3),data:e.readSubBlocksBin()};t.applicationExtensions.push(a);break}case h.CommentExtension:t.comments.push([a(!1),e.readSubBlocks()]);break;case h.PlainTextExtension: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,t,o,i);break;default:throw new EvalError("undefined block found")}return!1}async function x(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(),n={width:0,height:0,totalTime:0,colorRes:0,pixelAspectRatio:0,frames:[],sortFlag:!1,globalColorTable:[],backgroundImage:new ImageData(1,1,{colorSpace:"srgb"}),comments:[],applicationExtensions:[]},r=new g(new Uint8ClampedArray(i));if("GIF89a"!==r.getString(6))throw new Error("not a supported GIF file");n.width=r.nextTwoBytes(),n.height=r.nextTwoBytes();const s=r.nextByte(),l=128==(128&s);n.colorRes=(112&s)>>>4,n.sortFlag=8==(8&s);const c=1<<1+(7&s),h=r.nextByte();n.pixelAspectRatio=r.nextByte(),0!==n.pixelAspectRatio&&(n.pixelAspectRatio=(n.pixelAspectRatio+15)/64),l&&(n.globalColorTable=u(r,c));const f=(()=>{try{return new ImageData(n.width,n.height,{colorSpace:"srgb"})}catch(e){if(e instanceof DOMException&&"IndexSizeError"===e.name)return null;throw e}})();if(null==f)throw new Error("GIF frame size is to large");const{r:p,g:m,b:x}=n.globalColorTable[h];f.data.set(l?[p,m,x,255]:[0,0,0,0]);for(let e=4;e<f.data.length;e*=2)f.data.copyWithin(e,0,e);n.backgroundImage=f;let y=-1,b=!0,C=-1;const v=e=>(e&&(b=!0),y),E=e=>(null!=e&&(C=e),C);try{do{b&&(n.frames.push({left:0,top:0,width:0,height:0,disposalMethod:d.Replace,image:new ImageData(1,1,{colorSpace:"srgb"}),plainTextData:null,userInputDelayFlag:!1,delayTime:0,sortFlag:!1,localColorTable:[],reserved:0,GCreserved:0}),y++,C=-1,b=!1)}while(!await w(r,n,a,v,E,t));n.frames.length--;for(const e of n.frames){if(e.userInputDelayFlag&&0===e.delayTime){n.totalTime=1/0;break}n.totalTime+=e.delayTime}return n}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)??m,e.gifLoopCount||(e.gifLoopCount=1/0)}catch{e.error=!0}e.loading=!1}else await n(e)}class y{constructor(t){this.validTypes=["image","images"],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}=e,n=o.image,r=n?.element;if(n){if(t.globalAlpha=i,n.gif&&n.gifData)!function(e){const{context:t,radius:a,particle:o,delta:i}=e,n=o.image;if(!n?.gifData||!n.gif)return;const r=new OffscreenCanvas(n.gifData.width,n.gifData.height),s=r.getContext("2d");if(!s)throw new Error("could not create offscreen canvas context");s.imageSmoothingQuality="low",s.imageSmoothingEnabled=!1,s.clearRect(f,p,r.width,r.height),void 0===o.gifLoopCount&&(o.gifLoopCount=n.gifLoopCount??m);let l=o.gifFrame??0;const c={x:.5*-n.gifData.width,y:.5*-n.gifData.height},g=n.gifData.frames[l];if(void 0===o.gifTime&&(o.gifTime=0),g.bitmap){switch(t.scale(a/n.gifData.width,a/n.gifData.height),g.disposalMethod){case d.UndefinedA:case d.UndefinedB:case d.UndefinedC:case d.UndefinedD:case d.Replace:s.drawImage(g.bitmap,g.left,g.top),t.drawImage(r,c.x,c.y),s.clearRect(f,p,r.width,r.height);break;case d.Combine:s.drawImage(g.bitmap,g.left,g.top),t.drawImage(r,c.x,c.y);break;case d.RestoreBackground:s.drawImage(g.bitmap,g.left,g.top),t.drawImage(r,c.x,c.y),s.clearRect(f,p,r.width,r.height),n.gifData.globalColorTable.length?s.putImageData(n.gifData.backgroundImage,c.x,c.y):s.putImageData(n.gifData.frames[0].image,c.x+g.left,c.y+g.top);break;case d.RestorePrevious:{const e=s.getImageData(f,p,r.width,r.height);s.drawImage(g.bitmap,g.left,g.top),t.drawImage(r,c.x,c.y),s.clearRect(f,p,r.width,r.height),s.putImageData(e,f,p)}}if(o.gifTime+=i.value,o.gifTime>g.delayTime){if(o.gifTime-=g.delayTime,++l>=n.gifData.frames.length){if(--o.gifLoopCount<=m)return;l=0,s.clearRect(f,p,r.width,r.height)}o.gifFrame=l}t.scale(n.gifData.width/a,n.gifData.height/a)}}(e);else if(r){const e=n.ratio,o={x:-a,y:-a},i=2*a;t.drawImage(r,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(),n=a.find((e=>e.name===o.name||e.source===o.src));if(!n)return;const r=o.replaceColor??n.replaceColor;n.loading?setTimeout((()=>{this.particleInit(e,t)})):(async()=>{let e;e=n.svgData&&i?await s(n,o,i,t):{color:i,data:n,element:n.element,gif:n.gif,gifData:n.gifData,gifLoopCount:n.gifLoopCount,loaded:!0,ratio:o.width&&o.height?o.width/o.height:n.ratio??1,replaceColor:r,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 b{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 C{constructor(e){this.id="imagePreloader",this._engine=e}async getPlugin(){return await Promise.resolve(),{}}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 b;t.load(e),a.push(t)}}}needsPlugin(){return!0}}const v=3;async function E(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-v),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?x:a.replaceColor?r:n,await o(e)}catch{throw new Error(`${e.errorPrefix} ${a.name??a.src} not found`)}})}(t);const o=new C(t);await t.addPlugin(o,a),await t.addShape(new y(t),a)}})(),i})()));
!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=>(()=>{var t={303:t=>{t.exports=e}},a={};function o(e){var i=a[e];if(void 0!==i)return i.exports;var n=a[e]={exports:{}};return t[e](n,n.exports,o),n.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={};o.r(i),o.d(i,{loadImageShape:()=>T});var n=o(303);const r=0,s=/(#(?:[0-9a-f]{2}){2,4}|(#[0-9a-f]{3})|(rgb|hsl)a?\((-?\d+%?[,\s]+){2,3}\s*[\d.]+%?\))|currentcolor/gi;async function l(e){return new Promise((t=>{e.loading=!0;const a=new Image;e.element=a,a.addEventListener("load",(()=>{e.loading=!1,t()})),a.addEventListener("error",(()=>{e.element=void 0,e.error=!0,e.loading=!1,(0,n.getLogger)().error(`${n.errorPrefix} loading image: ${e.source}`),t()})),a.src=e.source}))}async function c(e){if("svg"!==e.type)return void await l(e);e.loading=!0;const t=await fetch(e.source);t.ok?e.svgData=await t.text():((0,n.getLogger)().error(`${n.errorPrefix} Image not found`),e.error=!0),e.loading=!1}function g(e,t,a,o){const i=function(e,t,a){const{svgData:o}=e;if(!o)return"";const i=(0,n.getStyleFromHsl)(t,a);if(o.includes("fill"))return o.replace(s,(()=>i));const l=o.indexOf(">");return`${o.substring(r,l)} fill="${i}"${o.substring(l)}`}(e,a,o.opacity?.value??1),c={color:a,gif:t.gif,data:{...e,svgData:i},loaded:!1,ratio:t.width/t.height,replaceColor:t.replaceColor,source:t.src};return new Promise((t=>{const a=new Blob([i],{type:"image/svg+xml"}),o=URL||window.URL||window.webkitURL||window,n=o.createObjectURL(a),r=new Image;r.addEventListener("load",(()=>{c.loaded=!0,c.element=r,t(c),o.revokeObjectURL(n)}));r.addEventListener("error",(()=>{(async()=>{o.revokeObjectURL(n);const a={...e,error:!1,loading:!0};await l(a),c.loaded=!0,c.element=a.element,t(c)})()})),r.src=n}))}const d=[0,4,2,1],h=[8,8,4,2];class f{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=this.data[this.pos],t=0;for(let a=0;0!==e;a+=e+1,e=this.data[this.pos+a])t+=e;const a=new Uint8Array(t);e=this.data[this.pos++];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++}}var p,m;!function(e){e[e.Replace=0]="Replace",e[e.Combine=1]="Combine",e[e.RestoreBackground=2]="RestoreBackground",e[e.RestorePrevious=3]="RestorePrevious",e[e.UndefinedA=4]="UndefinedA",e[e.UndefinedB=5]="UndefinedB",e[e.UndefinedC=6]="UndefinedC",e[e.UndefinedD=7]="UndefinedD"}(p||(p={})),function(e){e[e.Extension=33]="Extension",e[e.ApplicationExtension=255]="ApplicationExtension",e[e.GraphicsControlExtension=249]="GraphicsControlExtension",e[e.PlainTextExtension=1]="PlainTextExtension",e[e.CommentExtension=254]="CommentExtension",e[e.Image=44]="Image",e[e.EndOfFile=59]="EndOfFile"}(m||(m={}));const u=0,w=0,x=0;function y(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 b(e,t,a,o,i,n){switch(e.nextByte()){case m.EndOfFile:return!0;case m.Image:await async function(e,t,a,o,i,n){const r=t.frames[o(!0)];r.left=e.nextTwoBytes(),r.top=e.nextTwoBytes(),r.width=e.nextTwoBytes(),r.height=e.nextTwoBytes();const s=e.nextByte(),l=128==(128&s),c=64==(64&s);r.sortFlag=32==(32&s),r.reserved=(24&s)>>>3;const g=1<<1+(7&s);l&&(r.localColorTable=y(e,g));const f=e=>{const{r:o,g:n,b:s}=(l?r.localColorTable:t.globalColorTable)[e];return e!==i(null)?{r:o,g:n,b:s,a:255}:{r:o,g:n,b:s,a:a?~~((o+n+s)/3):0}},p=(()=>{try{return new ImageData(r.width,r.height,{colorSpace:"srgb"})}catch(e){if(e instanceof DOMException&&"IndexSizeError"===e.name)return null;throw e}})();if(null==p)throw new EvalError("GIF frame size is to large");const m=e.nextByte(),u=e.readSubBlocksBin(),w=1<<m,x=(e,t)=>{const a=e>>>3,o=7&e;return(u[a]+(u[a+1]<<8)+(u[a+2]<<16)&(1<<t)-1<<o)>>>o};if(c){for(let a=0,i=m+1,s=0,l=[[0]],c=0;c<4;c++){if(d[c]<r.height){let e=0,t=0,o=!1;for(;!o;){const n=a;if(a=x(s,i),s+=i+1,a===w){i=m+1,l.length=w+2;for(let e=0;e<l.length;e++)l[e]=e<w?[e]:[]}else{a>=l.length?l.push(l[n].concat(l[n][0])):n!==w&&l.push(l[n].concat(l[a][0]));for(const o of l[a]){const{r:a,g:i,b:n,a:s}=f(o);p.data.set([a,i,n,s],d[c]*r.width+h[c]*t+e%(4*r.width)),e+=4}l.length===1<<i&&i<12&&i++}e===4*r.width*(t+1)&&(t++,d[c]+h[c]*t>=r.height&&(o=!0))}}n?.(e.pos/(e.data.length-1),o(!1)+1,p,{x:r.left,y:r.top},{width:t.width,height:t.height})}r.image=p,r.bitmap=await createImageBitmap(p)}else{let a=0,i=m+1,s=0,l=-4,c=!1;const g=[[0]];for(;!c;){const e=a;if(a=x(s,i),s+=i,a===w){i=m+1,g.length=w+2;for(let e=0;e<g.length;e++)g[e]=e<w?[e]:[]}else{if(a===w+1){c=!0;break}a>=g.length?g.push(g[e].concat(g[e][0])):e!==w&&g.push(g[e].concat(g[a][0]));for(const e of g[a]){const{r:t,g:a,b:o,a:i}=f(e);p.data.set([t,a,o,i],l+=4)}g.length>=1<<i&&i<12&&i++}}r.image=p,r.bitmap=await createImageBitmap(p),n?.((e.pos+1)/e.data.length,o(!1)+1,r.image,{x:r.left,y:r.top},{width:t.width,height:t.height})}}(e,t,a,o,i,n);break;case m.Extension:!function(e,t,a,o){switch(e.nextByte()){case m.GraphicsControlExtension:{const i=t.frames[a(!1)];e.pos++;const n=e.nextByte();i.GCreserved=(224&n)>>>5,i.disposalMethod=(28&n)>>>2,i.userInputDelayFlag=2==(2&n);const r=1==(1&n);i.delayTime=10*e.nextTwoBytes();const s=e.nextByte();r&&o(s),e.pos++;break}case m.ApplicationExtension:{e.pos++;const a={identifier:e.getString(8),authenticationCode:e.getString(3),data:e.readSubBlocksBin()};t.applicationExtensions.push(a);break}case m.CommentExtension:t.comments.push([a(!1),e.readSubBlocks()]);break;case m.PlainTextExtension: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,t,o,i);break;default:throw new EvalError("undefined block found")}return!1}async function C(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(),n={width:0,height:0,totalTime:0,colorRes:0,pixelAspectRatio:0,frames:[],sortFlag:!1,globalColorTable:[],backgroundImage:new ImageData(1,1,{colorSpace:"srgb"}),comments:[],applicationExtensions:[]},r=new f(new Uint8ClampedArray(i));if("GIF89a"!==r.getString(6))throw new Error("not a supported GIF file");n.width=r.nextTwoBytes(),n.height=r.nextTwoBytes();const s=r.nextByte(),l=128==(128&s);n.colorRes=(112&s)>>>4,n.sortFlag=8==(8&s);const c=1<<1+(7&s),g=r.nextByte();n.pixelAspectRatio=r.nextByte(),0!==n.pixelAspectRatio&&(n.pixelAspectRatio=(n.pixelAspectRatio+15)/64),l&&(n.globalColorTable=y(r,c));const d=(()=>{try{return new ImageData(n.width,n.height,{colorSpace:"srgb"})}catch(e){if(e instanceof DOMException&&"IndexSizeError"===e.name)return null;throw e}})();if(null==d)throw new Error("GIF frame size is to large");const{r:h,g:m,b:u}=n.globalColorTable[g];d.data.set(l?[h,m,u,255]:[0,0,0,0]);for(let e=4;e<d.data.length;e*=2)d.data.copyWithin(e,0,e);n.backgroundImage=d;let w=-1,x=!0,C=-1;const v=e=>(e&&(x=!0),w),E=e=>(null!=e&&(C=e),C);try{do{x&&(n.frames.push({left:0,top:0,width:0,height:0,disposalMethod:p.Replace,image:new ImageData(1,1,{colorSpace:"srgb"}),plainTextData:null,userInputDelayFlag:!1,delayTime:0,sortFlag:!1,localColorTable:[],reserved:0,GCreserved:0}),w++,C=-1,x=!1)}while(!await b(r,n,a,v,E,t));n.frames.length--;for(const e of n.frames){if(e.userInputDelayFlag&&0===e.delayTime){n.totalTime=1/0;break}n.totalTime+=e.delayTime}return n}catch(e){if(e instanceof EvalError)throw new Error(`error while parsing frame ${w} "${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)??x,e.gifLoopCount||(e.gifLoopCount=1/0)}catch{e.error=!0}e.loading=!1}else await l(e)}class v{constructor(e){this.validTypes=["image","images"],this.loadImageShape=async e=>{if(!this._engine.loadImage)throw new Error(`${n.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)}draw(e){const{context:t,radius:a,particle:o,opacity:i}=e,n=o.image,r=n?.element;if(n){if(t.globalAlpha=i,n.gif&&n.gifData)!function(e){const{context:t,radius:a,particle:o,delta:i}=e,n=o.image;if(!n?.gifData||!n.gif)return;const r=new OffscreenCanvas(n.gifData.width,n.gifData.height),s=r.getContext("2d");if(!s)throw new Error("could not create offscreen canvas context");s.imageSmoothingQuality="low",s.imageSmoothingEnabled=!1,s.clearRect(u,w,r.width,r.height),void 0===o.gifLoopCount&&(o.gifLoopCount=n.gifLoopCount??x);let l=o.gifFrame??0;const c={x:.5*-n.gifData.width,y:.5*-n.gifData.height},g=n.gifData.frames[l];if(void 0===o.gifTime&&(o.gifTime=0),g.bitmap){switch(t.scale(a/n.gifData.width,a/n.gifData.height),g.disposalMethod){case p.UndefinedA:case p.UndefinedB:case p.UndefinedC:case p.UndefinedD:case p.Replace:s.drawImage(g.bitmap,g.left,g.top),t.drawImage(r,c.x,c.y),s.clearRect(u,w,r.width,r.height);break;case p.Combine:s.drawImage(g.bitmap,g.left,g.top),t.drawImage(r,c.x,c.y);break;case p.RestoreBackground:s.drawImage(g.bitmap,g.left,g.top),t.drawImage(r,c.x,c.y),s.clearRect(u,w,r.width,r.height),n.gifData.globalColorTable.length?s.putImageData(n.gifData.backgroundImage,c.x,c.y):s.putImageData(n.gifData.frames[0].image,c.x+g.left,c.y+g.top);break;case p.RestorePrevious:{const e=s.getImageData(u,w,r.width,r.height);s.drawImage(g.bitmap,g.left,g.top),t.drawImage(r,c.x,c.y),s.clearRect(u,w,r.width,r.height),s.putImageData(e,u,w)}}if(o.gifTime+=i.value,o.gifTime>g.delayTime){if(o.gifTime-=g.delayTime,++l>=n.gifData.frames.length){if(--o.gifLoopCount<=x)return;l=0,s.clearRect(u,w,r.width,r.height)}o.gifFrame=l}t.scale(n.gifData.width/a,n.gifData.height/a)}}(e);else if(r){const e=n.ratio,o={x:-a,y:-a},i=2*a;t.drawImage(r,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(),n=a.find((e=>e.name===o.name||e.source===o.src));if(!n)return;const r=o.replaceColor??n.replaceColor;n.loading?setTimeout((()=>{this.particleInit(e,t)})):(async()=>{let e;e=n.svgData&&i?await g(n,o,i,t):{color:i,data:n,element:n.element,gif:n.gif,gifData:n.gifData,gifLoopCount:n.gifLoopCount,loaded:!0,ratio:o.width&&o.height?o.width/o.height:n.ratio??1,replaceColor:r,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 E{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 I{constructor(e){this.id="imagePreloader",this._engine=e}async getPlugin(){return await Promise.resolve(),{}}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 E;t.load(e),a.push(t)}}}needsPlugin(){return!0}}const B=3;async function T(e,t=!0){!function(e){e.loadImage||(e.loadImage=async t=>{if(!t.name&&!t.src)throw new Error(`${n.errorPrefix} no image source provided`);if(e.images||(e.images=[]),!e.images.find((e=>e.name===t.name||e.source===t.src)))try{const a={gif:t.gif??!1,name:t.name??t.src,source:t.src,type:t.src.substring(t.src.length-B),error:!1,loading:!0,replaceColor:t.replaceColor,ratio:t.width&&t.height?t.width/t.height:void 0};let o;e.images.push(a),o=t.gif?C:t.replaceColor?c:l,await o(a)}catch{throw new Error(`${n.errorPrefix} ${t.name??t.src} not found`)}})}(e);const a=new I(e);await e.addPlugin(a,t),await e.addShape(new v(e),t)}return i})()));

@@ -1,1 +0,1 @@

/*! tsParticles Image Shape v3.4.0 by Matteo Bruni */
/*! tsParticles Image Shape v3.5.0 by Matteo Bruni */

@@ -12,3 +12,6 @@ (function (factory) {

Object.defineProperty(exports, "__esModule", { value: true });
exports.loadGifImage = exports.drawGif = exports.decodeGIF = exports.getGIFLoopAmount = void 0;
exports.getGIFLoopAmount = getGIFLoopAmount;
exports.decodeGIF = decodeGIF;
exports.drawGif = drawGif;
exports.loadGifImage = loadGifImage;
const Utils_js_1 = require("../Utils.js");

@@ -242,3 +245,2 @@ const Constants_js_1 = require("./Constants.js");

}
exports.getGIFLoopAmount = getGIFLoopAmount;
async function decodeGIF(gifURL, progressCallback, avgAlpha) {

@@ -354,3 +356,2 @@ if (!avgAlpha)

}
exports.decodeGIF = decodeGIF;
function drawGif(data) {

@@ -429,3 +430,2 @@ const { context, radius, particle, delta } = data, image = particle.image;

}
exports.drawGif = drawGif;
async function loadGifImage(image) {

@@ -449,3 +449,2 @@ if (image.type !== "gif") {

}
exports.loadGifImage = loadGifImage;
});

@@ -12,3 +12,3 @@ (function (factory) {

Object.defineProperty(exports, "__esModule", { value: true });
exports.loadImageShape = void 0;
exports.loadImageShape = loadImageShape;
const Utils_js_1 = require("./Utils.js");

@@ -66,3 +66,2 @@ const ImageDrawer_js_1 = require("./ImageDrawer.js");

}
exports.loadImageShape = loadImageShape;
});

@@ -12,3 +12,5 @@ (function (factory) {

Object.defineProperty(exports, "__esModule", { value: true });
exports.replaceImageColor = exports.downloadSvgImage = exports.loadImage = void 0;
exports.loadImage = loadImage;
exports.downloadSvgImage = downloadSvgImage;
exports.replaceImageColor = replaceImageColor;
const engine_1 = require("@tsparticles/engine");

@@ -48,3 +50,2 @@ const stringStart = 0, defaultOpacity = 1;

}
exports.loadImage = loadImage;
async function downloadSvgImage(image) {

@@ -66,3 +67,2 @@ if (image.type !== "svg") {

}
exports.downloadSvgImage = downloadSvgImage;
function replaceImageColor(image, imageData, color, particle) {

@@ -105,3 +105,2 @@ const svgColoredData = replaceColorSvg(image, color, particle.opacity?.value ?? defaultOpacity), imageRes = {

}
exports.replaceImageColor = replaceImageColor;
});

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc