tsparticles-shape-image - npm Package Compare versions

Comparing version 2.3.3 to 2.4.0

browser/ImageDrawer.js

 import { downloadSvgImage, loadImage, replaceImageColor } from "./Utils";
-/**
- * @category Shape Drawers
- */
 export class ImageDrawer {
-    /**
-     * Image drawer constructor, initializing the image set collection
-     */
     constructor() {
         this._images = [];
     }
-    /**
-     * Adds an image to the given container
-     * @param container the container where the image is going to be added
-     * @param image the image to add to the container collection
-     */
     addImage(container, image) {
@@ -21,15 +10,5 @@ const containerImages = this.getImages(container);
     }
-    /**
-     * Resets the image general collection
-     */
     destroy() {
         this._images = [];
     }
-    /**
-     * The draw image method
-     * @param context the context used for drawing
-     * @param particle the particle to be drawn
-     * @param radius the particle radius
-     * @param opacity the particle opacity
-     */
     draw(context, particle, radius, opacity) {
@@ -49,7 +28,2 @@ var _a;
     }
-    /**
-     * Gets the image collection of the given container
-     * @param container the container requesting the image collection
-     * @returns the container image collection
-     */
     getImages(container) {
@@ -68,6 +42,2 @@ const containerImages = this._images.find((t) => t.id === container.id);
     }
-    /**
-     * Returning the side count for the image, defaults to 12 for using the inner circle as rendering
-     * When using non-transparent images this can be an issue with shadows
-     */
     getSidesCount() {
@@ -85,13 +55,4 @@ return 12;
             });
-            return;
         }
-        if (image.error) {
-            return;
-        }
     }
-    /**
-     * Loads the image shape to the given particle
-     * @param container the particles container
-     * @param particle the particle loading the image shape
-     */
     particleInit(container, particle) {
@@ -115,3 +76,3 @@ var _a;
             let imageRes;
-            if (image.svgData && replaceColor && color) {
+            if (image.svgData && color) {
                 imageRes = await replaceImageColor(image, imageData, color, particle);
@@ -143,8 +104,2 @@ }
     }
-    /**
-     * Loads the image shape
-     * @param container the container used for searching images
-     * @param imageShape the image shape to load
-     * @private
-     */
     async loadImageShape(container, imageShape) {
@@ -151,0 +106,0 @@ var _a;

browser/index.js

 import { ImageDrawer } from "./ImageDrawer";
-/**
- * Loads the image shape in the given engine
- * @param engine the engine where the image shape is going to be added
- */
 export async function loadImageShape(engine) {
@@ -7,0 +3,0 @@ const imageDrawer = new ImageDrawer();

browser/Utils.js

 import { getStyleFromHsl } from "tsparticles-engine";
-/**
- * The color regex for replacing values in SVG data
- */
 const currentColorRegex = /(#(?:[0-9a-f]{2}){2,4}|(#[0-9a-f]{3})|(rgb|hsl)a?\((-?\d+%?[,\s]+){2,3}\s*[\d.]+%?\))|currentcolor/gi;
-/**
- * Replaces the color in SVG files when replace color is set
- * @param imageShape the image used for replacing SVG data
- * @param color the replace color value
- * @param opacity the color opacity
- * @returns the new SVG data
- */
 function replaceColorSvg(imageShape, color, opacity) {
@@ -19,3 +9,2 @@ const { svgData } = imageShape;
     const colorStyle = getStyleFromHsl(color, opacity);
-    /* set color to svg element */
     if (svgData.includes("fill")) {
@@ -27,6 +16,2 @@ return svgData.replace(currentColorRegex, () => colorStyle);
 }
-/**
- * Loads the given image
- * @param image the image to load
- */
 export async function loadImage(image) {
@@ -51,6 +36,2 @@ return new Promise((resolve) => {
 }
-/**
- * Downloads the SVG image data, using `fetch`
- * @param image the image to download
- */
 export async function downloadSvgImage(image) {
@@ -72,9 +53,2 @@ if (image.type !== "svg") {
 }
-/**
- * Replaces the color in a SVG image
- * @param image the SVG image to replace
- * @param imageData the image shape data
- * @param color the replace color
- * @param particle the particle where the replaced data is going to be used
- */
 export function replaceImageColor(image, imageData, color, particle) {
@@ -91,4 +65,3 @@ var _a, _b, _c;
     return new Promise((resolve) => {
-        const svg = new Blob([svgColoredData], { type: "image/svg+xml" }), // prepare to create img with colored svg
-        domUrl = URL || window.URL || window.webkitURL || window, url = domUrl.createObjectURL(svg), img = new Image();
+        const svg = new Blob([svgColoredData], { type: "image/svg+xml" }), domUrl = URL || window.URL || window.webkitURL || window, url = domUrl.createObjectURL(svg), img = new Image();
         img.addEventListener("load", () => {
@@ -103,3 +76,2 @@ imageRes.loaded = true;
             const img2 = Object.assign(Object.assign({}, image), { error: false, loading: true });
-            // deepcode ignore PromiseNotCaughtGeneral: catch can be ignored
             await loadImage(img2);
@@ -106,0 +78,0 @@ imageRes.loaded = true;

cjs/ImageDrawer.js

 "use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 Object.defineProperty(exports, "__esModule", { value: true });
@@ -55,7 +64,3 @@ exports.ImageDrawer = void 0;
             });
-            return;
         }
-        if (image.error) {
-            return;
-        }
     }
@@ -77,7 +82,7 @@ particleInit(container, particle) {
         }
-        (async () => {
-            var _a, _b;
+        (() => __awaiter(this, void 0, void 0, function* () {
+            var _b, _c;
             let imageRes;
-            if (image.svgData && replaceColor && color) {
-                imageRes = await (0, Utils_1.replaceImageColor)(image, imageData, color, particle);
+            if (image.svgData && color) {
+                imageRes = yield (0, Utils_1.replaceImageColor)(image, imageData, color, particle);
             }
@@ -98,3 +103,3 @@ else {
             }
-            const fill = (_a = imageData.fill) !== null && _a !== void 0 ? _a : particle.fill, close = (_b = imageData.close) !== null && _b !== void 0 ? _b : particle.close, imageShape = {
+            const fill = (_b = imageData.fill) !== null && _b !== void 0 ? _b : particle.fill, close = (_c = imageData.close) !== null && _c !== void 0 ? _c : particle.close, imageShape = {
                 image: imageRes,
@@ -107,26 +112,28 @@ fill,
             particle.close = imageShape.close;
-        })();
+        }))();
     }
-    async loadImageShape(container, imageShape) {
+    loadImageShape(container, imageShape) {
         var _a;
-        const source = imageShape.src;
-        if (!source) {
-            throw new Error("Error tsParticles - No image.src");
-        }
-        try {
-            const image = {
-                source: source,
-                type: source.substring(source.length - 3),
-                error: false,
-                loading: true,
-            };
-            this.addImage(container, image);
-            const imageFunc = ((_a = imageShape.replaceColor) !== null && _a !== void 0 ? _a : imageShape.replace_color) ? Utils_1.downloadSvgImage : Utils_1.loadImage;
-            await imageFunc(image);
-        }
-        catch (_b) {
-            throw new Error(`tsParticles error - ${imageShape.src} not found`);
-        }
+        return __awaiter(this, void 0, void 0, function* () {
+            const source = imageShape.src;
+            if (!source) {
+                throw new Error("Error tsParticles - No image.src");
+            }
+            try {
+                const image = {
+                    source: source,
+                    type: source.substring(source.length - 3),
+                    error: false,
+                    loading: true,
+                };
+                this.addImage(container, image);
+                const imageFunc = ((_a = imageShape.replaceColor) !== null && _a !== void 0 ? _a : imageShape.replace_color) ? Utils_1.downloadSvgImage : Utils_1.loadImage;
+                yield imageFunc(image);
+            }
+            catch (_b) {
+                throw new Error(`tsParticles error - ${imageShape.src} not found`);
+            }
+        });
     }
 }
 exports.ImageDrawer = ImageDrawer;

cjs/index.js

 "use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.loadImageShape = void 0;
 const ImageDrawer_1 = require("./ImageDrawer");
-async function loadImageShape(engine) {
-    const imageDrawer = new ImageDrawer_1.ImageDrawer();
-    await engine.addShape("image", imageDrawer);
-    await engine.addShape("images", imageDrawer);
+function loadImageShape(engine) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const imageDrawer = new ImageDrawer_1.ImageDrawer();
+        yield engine.addShape("image", imageDrawer);
+        yield engine.addShape("images", imageDrawer);
+    });
 }
 exports.loadImageShape = loadImageShape;

cjs/Utils.js

 "use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 Object.defineProperty(exports, "__esModule", { value: true });
@@ -18,37 +27,41 @@ exports.replaceImageColor = exports.downloadSvgImage = exports.loadImage = void 0;
 }
-async function loadImage(image) {
-    return new Promise((resolve) => {
-        image.loading = true;
-        const img = new Image();
-        image.element = img;
-        img.addEventListener("load", () => {
-            image.loading = false;
-            resolve();
+function loadImage(image) {
+    return __awaiter(this, void 0, void 0, function* () {
+        return new Promise((resolve) => {
+            image.loading = true;
+            const img = new Image();
+            image.element = img;
+            img.addEventListener("load", () => {
+                image.loading = false;
+                resolve();
+            });
+            img.addEventListener("error", () => {
+                image.element = undefined;
+                image.error = true;
+                image.loading = false;
+                console.error(`Error tsParticles - loading image: ${image.source}`);
+                resolve();
+            });
+            img.src = image.source;
         });
-        img.addEventListener("error", () => {
-            image.element = undefined;
-            image.error = true;
-            image.loading = false;
-            console.error(`Error tsParticles - loading image: ${image.source}`);
-            resolve();
-        });
-        img.src = image.source;
     });
 }
 exports.loadImage = loadImage;
-async function downloadSvgImage(image) {
-    if (image.type !== "svg") {
-        await loadImage(image);
-        return;
-    }
-    image.loading = true;
-    const response = await fetch(image.source);
-    if (!response.ok) {
-        console.error("Error tsParticles - Image not found");
-        image.error = true;
-    }
-    if (!image.error) {
-        image.svgData = await response.text();
-    }
-    image.loading = false;
+function downloadSvgImage(image) {
+    return __awaiter(this, void 0, void 0, function* () {
+        if (image.type !== "svg") {
+            yield loadImage(image);
+            return;
+        }
+        image.loading = true;
+        const response = yield fetch(image.source);
+        if (!response.ok) {
+            console.error("Error tsParticles - Image not found");
+            image.error = true;
+        }
+        if (!image.error) {
+            image.svgData = yield response.text();
+        }
+        image.loading = false;
+    });
 }
@@ -74,10 +87,10 @@ exports.downloadSvgImage = downloadSvgImage;
         });
-        img.addEventListener("error", async () => {
+        img.addEventListener("error", () => __awaiter(this, void 0, void 0, function* () {
             domUrl.revokeObjectURL(url);
             const img2 = Object.assign(Object.assign({}, image), { error: false, loading: true });
-            await loadImage(img2);
+            yield loadImage(img2);
             imageRes.loaded = true;
             imageRes.element = img2.element;
             resolve(imageRes);
-        });
+        }));
         img.src = url;
@@ -84,0 +97,0 @@ });

esm/ImageDrawer.js

@@ -52,7 +52,3 @@ import { downloadSvgImage, loadImage, replaceImageColor } from "./Utils";
             });
-            return;
         }
-        if (image.error) {
-            return;
-        }
     }
@@ -77,3 +73,3 @@ particleInit(container, particle) {
             let imageRes;
-            if (image.svgData && replaceColor && color) {
+            if (image.svgData && color) {
                 imageRes = await replaceImageColor(image, imageData, color, particle);
@@ -80,0 +76,0 @@ }

package.json

 {
   "name": "tsparticles-shape-image",
-  "version": "2.3.3",
+  "version": "2.4.0",
   "description": "tsParticles image shape",
@@ -49,4 +49,4 @@ "homepage": "https://particles.js.org",
   "dependencies": {
-    "tsparticles-engine": "^2.3.3"
+    "tsparticles-engine": "^2.4.0"
   }
 }

tsparticles.shape.image.js

@@ -7,3 +7,3 @@ /*!
  * How to use? : Check the GitHub README
- * v2.3.3
+ * v2.4.0
  */
@@ -102,15 +102,3 @@ (function webpackUniversalModuleDefinition(root, factory) {
 
-/**
- * The color regex for replacing values in SVG data
- */
-
 const currentColorRegex = /(#(?:[0-9a-f]{2}){2,4}|(#[0-9a-f]{3})|(rgb|hsl)a?\((-?\d+%?[,\s]+){2,3}\s*[\d.]+%?\))|currentcolor/gi;
-/**
- * Replaces the color in SVG files when replace color is set
- * @param imageShape the image used for replacing SVG data
- * @param color the replace color value
- * @param opacity the color opacity
- * @returns the new SVG data
- */
-
 function replaceColorSvg(imageShape, color, opacity) {
@@ -120,23 +108,12 @@ const {
   } = imageShape;
-
   if (!svgData) {
     return "";
   }
-
   const colorStyle = (0,external_commonjs_tsparticles_engine_commonjs2_tsparticles_engine_amd_tsparticles_engine_root_window_.getStyleFromHsl)(color, opacity);
-  /* set color to svg element */
-
   if (svgData.includes("fill")) {
     return svgData.replace(currentColorRegex, () => colorStyle);
   }
-
   const preFillIndex = svgData.indexOf(">");
   return `${svgData.substring(0, preFillIndex)} fill="${colorStyle}"${svgData.substring(preFillIndex)}`;
 }
-/**
- * Loads the given image
- * @param image the image to load
- */
-
-
 async function loadImage(image) {
@@ -161,7 +138,2 @@ return new Promise(resolve => {
 }
-/**
- * Downloads the SVG image data, using `fetch`
- * @param image the image to download
- */
-
 async function downloadSvgImage(image) {
@@ -172,6 +144,4 @@ if (image.type !== "svg") {
   }
-
   image.loading = true;
   const response = await fetch(image.source);
-
   if (!response.ok) {
@@ -181,39 +151,27 @@ console.error("Error tsParticles - Image not found");
   }
-
   if (!image.error) {
     image.svgData = await response.text();
   }
-
   image.loading = false;
 }
-/**
- * Replaces the color in a SVG image
- * @param image the SVG image to replace
- * @param imageData the image shape data
- * @param color the replace color
- * @param particle the particle where the replaced data is going to be used
- */
-
 function replaceImageColor(image, imageData, color, particle) {
   var _a, _b, _c;
-
   const svgColoredData = replaceColorSvg(image, color, (_b = (_a = particle.opacity) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : 1),
-        imageRes = {
-    color,
-    data: Object.assign(Object.assign({}, image), {
-      svgData: svgColoredData
-    }),
-    loaded: false,
-    ratio: imageData.width / imageData.height,
-    replaceColor: (_c = imageData.replaceColor) !== null && _c !== void 0 ? _c : imageData.replace_color,
-    source: imageData.src
-  };
+    imageRes = {
+      color,
+      data: Object.assign(Object.assign({}, image), {
+        svgData: svgColoredData
+      }),
+      loaded: false,
+      ratio: imageData.width / imageData.height,
+      replaceColor: (_c = imageData.replaceColor) !== null && _c !== void 0 ? _c : imageData.replace_color,
+      source: imageData.src
+    };
   return new Promise(resolve => {
     const svg = new Blob([svgColoredData], {
-      type: "image/svg+xml"
-    }),
-          // prepare to create img with colored svg
-    domUrl = URL || window.URL || window.webkitURL || window,
-          url = domUrl.createObjectURL(svg),
-          img = new Image();
+        type: "image/svg+xml"
+      }),
+      domUrl = URL || window.URL || window.webkitURL || window,
+      url = domUrl.createObjectURL(svg),
+      img = new Image();
     img.addEventListener("load", () => {
@@ -230,4 +188,3 @@ imageRes.loaded = true;
         loading: true
-      }); // deepcode ignore PromiseNotCaughtGeneral: catch can be ignored
-
+      });
       await loadImage(img2);
@@ -243,20 +200,6 @@ imageRes.loaded = true;
 
-/**
- * @category Shape Drawers
- */
-
 class ImageDrawer {
-  /**
-   * Image drawer constructor, initializing the image set collection
-   */
   constructor() {
     this._images = [];
   }
-  /**
-   * Adds an image to the given container
-   * @param container the container where the image is going to be added
-   * @param image the image to add to the container collection
-   */
-
-
   addImage(container, image) {
@@ -266,34 +209,17 @@ const containerImages = this.getImages(container);
   }
-  /**
-   * Resets the image general collection
-   */
-
-
   destroy() {
     this._images = [];
   }
-  /**
-   * The draw image method
-   * @param context the context used for drawing
-   * @param particle the particle to be drawn
-   * @param radius the particle radius
-   * @param opacity the particle opacity
-   */
-
-
   draw(context, particle, radius, opacity) {
     var _a;
-
     const image = particle.image,
-          element = image === null || image === void 0 ? void 0 : image.element;
-
+      element = image === null || image === void 0 ? void 0 : image.element;
     if (!element) {
       return;
     }
-
     const ratio = (_a = image === null || image === void 0 ? void 0 : image.ratio) !== null && _a !== void 0 ? _a : 1,
-          pos = {
-      x: -radius,
-      y: -radius
-    };
+      pos = {
+        x: -radius,
+        y: -radius
+      };
     context.globalAlpha = opacity;
@@ -303,12 +229,4 @@ context.drawImage(element, pos.x, pos.y, radius * 2, radius * 2 / ratio);
   }
-  /**
-   * Gets the image collection of the given container
-   * @param container the container requesting the image collection
-   * @returns the container image collection
-   */
-
-
   getImages(container) {
     const containerImages = this._images.find(t => t.id === container.id);
-
     if (!containerImages) {
@@ -319,3 +237,2 @@ this._images.push({
       });
-
       return this.getImages(container);
@@ -326,12 +243,5 @@ } else {
   }
-  /**
-   * Returning the side count for the image, defaults to 12 for using the inner circle as rendering
-   * When using non-transparent images this can be an issue with shadows
-   */
-
-
   getSidesCount() {
     return 12;
   }
-
   loadShape(particle) {
@@ -341,8 +251,6 @@ if (particle.shape !== "image" && particle.shape !== "images") {
     }
-
     const container = particle.container,
-          images = this.getImages(container).images,
-          imageData = particle.shapeData,
-          image = images.find(t => t.source === imageData.src);
-
+      images = this.getImages(container).images,
+      imageData = particle.shapeData,
+      image = images.find(t => t.source === imageData.src);
     if (!image) {
@@ -352,33 +260,17 @@ this.loadImageShape(container, imageData).then(() => {
       });
-      return;
     }
-
-    if (image.error) {
-      return;
-    }
   }
-  /**
-   * Loads the image shape to the given particle
-   * @param container the particles container
-   * @param particle the particle loading the image shape
-   */
-
-
   particleInit(container, particle) {
     var _a;
-
     if (particle.shape !== "image" && particle.shape !== "images") {
       return;
     }
-
     const images = this.getImages(container).images,
-          imageData = particle.shapeData,
-          color = particle.getFillColor(),
-          replaceColor = (_a = imageData.replaceColor) !== null && _a !== void 0 ? _a : imageData.replace_color,
-          image = images.find(t => t.source === imageData.src);
-
+      imageData = particle.shapeData,
+      color = particle.getFillColor(),
+      replaceColor = (_a = imageData.replaceColor) !== null && _a !== void 0 ? _a : imageData.replace_color,
+      image = images.find(t => t.source === imageData.src);
     if (!image) {
       return;
     }
-
     if (image.loading) {
@@ -390,9 +282,6 @@ setTimeout(() => {
     }
-
     (async () => {
       var _a, _b;
-
       let imageRes;
-
-      if (image.svgData && replaceColor && color) {
+      if (image.svgData && color) {
         imageRes = await replaceImageColor(image, imageData, color, particle);
@@ -410,14 +299,12 @@ } else {
       }
-
       if (!imageRes.ratio) {
         imageRes.ratio = 1;
       }
-
       const fill = (_a = imageData.fill) !== null && _a !== void 0 ? _a : particle.fill,
-            close = (_b = imageData.close) !== null && _b !== void 0 ? _b : particle.close,
-            imageShape = {
-        image: imageRes,
-        fill,
-        close
-      };
+        close = (_b = imageData.close) !== null && _b !== void 0 ? _b : particle.close,
+        imageShape = {
+          image: imageRes,
+          fill,
+          close
+        };
       particle.image = imageShape.image;
@@ -428,19 +315,8 @@ particle.fill = imageShape.fill;
   }
-  /**
-   * Loads the image shape
-   * @param container the container used for searching images
-   * @param imageShape the image shape to load
-   * @private
-   */
-
-
   async loadImageShape(container, imageShape) {
     var _a;
-
     const source = imageShape.src;
-
     if (!source) {
       throw new Error("Error tsParticles - No image.src");
     }
-
     try {
@@ -460,11 +336,5 @@ const image = {
   }
-
 }
 ;// CONCATENATED MODULE: ./dist/browser/index.js
 
-/**
- * Loads the image shape in the given engine
- * @param engine the engine where the image shape is going to be added
- */
-
 async function loadImageShape(engine) {
@@ -471,0 +341,0 @@ const imageDrawer = new ImageDrawer();

tsparticles.shape.image.min.js

 /*! For license information please see tsparticles.shape.image.min.js.LICENSE.txt */
-!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=>(()=>{"use strict";var r={961:r=>{r.exports=e}},t={};function o(e){var a=t[e];if(void 0!==a)return a.exports;var i=t[e]={exports:{}};return r[e](i,i.exports,o),i.exports}o.d=(e,r)=>{for(var t in r)o.o(r,t)&&!o.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:r[t]})},o.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r),o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var a={};return(()=>{o.r(a),o.d(a,{loadImageShape:()=>l});var e=o(961);const r=/(#(?:[0-9a-f]{2}){2,4}|(#[0-9a-f]{3})|(rgb|hsl)a?\((-?\d+%?[,\s]+){2,3}\s*[\d.]+%?\))|currentcolor/gi;async function t(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,console.error(`Error tsParticles - loading image: ${e.source}`),r()})),t.src=e.source}))}async function i(e){if("svg"!==e.type)return void await t(e);e.loading=!0;const r=await fetch(e.source);r.ok||(console.error("Error tsParticles - Image not found"),e.error=!0),e.error||(e.svgData=await r.text()),e.loading=!1}function s(o,a,i,s){var n,l,c;const d=function(t,o,a){const{svgData:i}=t;if(!i)return"";const s=(0,e.getStyleFromHsl)(o,a);if(i.includes("fill"))return i.replace(r,(()=>s));const n=i.indexOf(">");return`${i.substring(0,n)} fill="${s}"${i.substring(n)}`}(o,i,null!==(l=null===(n=s.opacity)||void 0===n?void 0:n.value)&&void 0!==l?l:1),g={color:i,data:Object.assign(Object.assign({},o),{svgData:d}),loaded:!1,ratio:a.width/a.height,replaceColor:null!==(c=a.replaceColor)&&void 0!==c?c:a.replace_color,source:a.src};return new Promise((e=>{const r=new Blob([d],{type:"image/svg+xml"}),a=URL||window.URL||window.webkitURL||window,i=a.createObjectURL(r),s=new Image;s.addEventListener("load",(()=>{g.loaded=!0,g.element=s,e(g),a.revokeObjectURL(i)})),s.addEventListener("error",(async()=>{a.revokeObjectURL(i);const r=Object.assign(Object.assign({},o),{error:!1,loading:!0});await t(r),g.loaded=!0,g.element=r.element,e(g)})),s.src=i}))}class n{constructor(){this._images=[]}addImage(e,r){const t=this.getImages(e);null==t||t.images.push(r)}destroy(){this._images=[]}draw(e,r,t,o){var a;const i=r.image,s=null==i?void 0:i.element;if(!s)return;const n=null!==(a=null==i?void 0:i.ratio)&&void 0!==a?a:1,l={x:-t,y:-t};e.globalAlpha=o,e.drawImage(s,l.x,l.y,2*t,2*t/n),e.globalAlpha=1}getImages(e){const r=this._images.find((r=>r.id===e.id));return r||(this._images.push({id:e.id,images:[]}),this.getImages(e))}getSidesCount(){return 12}loadShape(e){if("image"!==e.shape&&"images"!==e.shape)return;const r=e.container,t=this.getImages(r).images,o=e.shapeData,a=t.find((e=>e.source===o.src));a?a.error:this.loadImageShape(r,o).then((()=>{this.loadShape(e)}))}particleInit(e,r){var t;if("image"!==r.shape&&"images"!==r.shape)return;const o=this.getImages(e).images,a=r.shapeData,i=r.getFillColor(),n=null!==(t=a.replaceColor)&&void 0!==t?t:a.replace_color,l=o.find((e=>e.source===a.src));l&&(l.loading?setTimeout((()=>{this.particleInit(e,r)})):(async()=>{var e,t;let o;o=l.svgData&&n&&i?await s(l,a,i,r):{color:i,data:l,element:l.element,loaded:!0,ratio:a.width/a.height,replaceColor:n,source:a.src},o.ratio||(o.ratio=1);const c={image:o,fill:null!==(e=a.fill)&&void 0!==e?e:r.fill,close:null!==(t=a.close)&&void 0!==t?t:r.close};r.image=c.image,r.fill=c.fill,r.close=c.close})())}async loadImageShape(e,r){var o;const a=r.src;if(!a)throw new Error("Error tsParticles - No image.src");try{const s={source:a,type:a.substring(a.length-3),error:!1,loading:!0};this.addImage(e,s);const n=(null!==(o=r.replaceColor)&&void 0!==o?o:r.replace_color)?i:t;await n(s)}catch(e){throw new Error(`tsParticles error - ${r.src} not found`)}}}async function l(e){const r=new n;await e.addShape("image",r),await e.addShape("images",r)}})(),a})()));
+!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 r="object"==typeof exports?t(require("tsparticles-engine")):t(e.window);for(var o in r)("object"==typeof exports?exports:e)[o]=r[o]}}(this,(e=>(()=>{"use strict";var t={961:t=>{t.exports=e}},r={};function o(e){var a=r[e];if(void 0!==a)return a.exports;var i=r[e]={exports:{}};return t[e](i,i.exports,o),i.exports}o.d=(e,t)=>{for(var r in t)o.o(t,r)&&!o.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},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 a={};return(()=>{o.r(a),o.d(a,{loadImageShape:()=>l});var e=o(961);const t=/(#(?:[0-9a-f]{2}){2,4}|(#[0-9a-f]{3})|(rgb|hsl)a?\((-?\d+%?[,\s]+){2,3}\s*[\d.]+%?\))|currentcolor/gi;async function r(e){return new Promise((t=>{e.loading=!0;const r=new Image;e.element=r,r.addEventListener("load",(()=>{e.loading=!1,t()})),r.addEventListener("error",(()=>{e.element=void 0,e.error=!0,e.loading=!1,console.error(`Error tsParticles - loading image: ${e.source}`),t()})),r.src=e.source}))}async function i(e){if("svg"!==e.type)return void await r(e);e.loading=!0;const t=await fetch(e.source);t.ok||(console.error("Error tsParticles - Image not found"),e.error=!0),e.error||(e.svgData=await t.text()),e.loading=!1}function s(o,a,i,s){var n,l,c;const d=function(r,o,a){const{svgData:i}=r;if(!i)return"";const s=(0,e.getStyleFromHsl)(o,a);if(i.includes("fill"))return i.replace(t,(()=>s));const n=i.indexOf(">");return`${i.substring(0,n)} fill="${s}"${i.substring(n)}`}(o,i,null!==(l=null===(n=s.opacity)||void 0===n?void 0:n.value)&&void 0!==l?l:1),g={color:i,data:Object.assign(Object.assign({},o),{svgData:d}),loaded:!1,ratio:a.width/a.height,replaceColor:null!==(c=a.replaceColor)&&void 0!==c?c:a.replace_color,source:a.src};return new Promise((e=>{const t=new Blob([d],{type:"image/svg+xml"}),a=URL||window.URL||window.webkitURL||window,i=a.createObjectURL(t),s=new Image;s.addEventListener("load",(()=>{g.loaded=!0,g.element=s,e(g),a.revokeObjectURL(i)})),s.addEventListener("error",(async()=>{a.revokeObjectURL(i);const t=Object.assign(Object.assign({},o),{error:!1,loading:!0});await r(t),g.loaded=!0,g.element=t.element,e(g)})),s.src=i}))}class n{constructor(){this._images=[]}addImage(e,t){const r=this.getImages(e);null==r||r.images.push(t)}destroy(){this._images=[]}draw(e,t,r,o){var a;const i=t.image,s=null==i?void 0:i.element;if(!s)return;const n=null!==(a=null==i?void 0:i.ratio)&&void 0!==a?a:1,l={x:-r,y:-r};e.globalAlpha=o,e.drawImage(s,l.x,l.y,2*r,2*r/n),e.globalAlpha=1}getImages(e){const t=this._images.find((t=>t.id===e.id));return t||(this._images.push({id:e.id,images:[]}),this.getImages(e))}getSidesCount(){return 12}loadShape(e){if("image"!==e.shape&&"images"!==e.shape)return;const t=e.container,r=this.getImages(t).images,o=e.shapeData;r.find((e=>e.source===o.src))||this.loadImageShape(t,o).then((()=>{this.loadShape(e)}))}particleInit(e,t){var r;if("image"!==t.shape&&"images"!==t.shape)return;const o=this.getImages(e).images,a=t.shapeData,i=t.getFillColor(),n=null!==(r=a.replaceColor)&&void 0!==r?r:a.replace_color,l=o.find((e=>e.source===a.src));l&&(l.loading?setTimeout((()=>{this.particleInit(e,t)})):(async()=>{var e,r;let o;o=l.svgData&&i?await s(l,a,i,t):{color:i,data:l,element:l.element,loaded:!0,ratio:a.width/a.height,replaceColor:n,source:a.src},o.ratio||(o.ratio=1);const c={image:o,fill:null!==(e=a.fill)&&void 0!==e?e:t.fill,close:null!==(r=a.close)&&void 0!==r?r:t.close};t.image=c.image,t.fill=c.fill,t.close=c.close})())}async loadImageShape(e,t){var o;const a=t.src;if(!a)throw new Error("Error tsParticles - No image.src");try{const s={source:a,type:a.substring(a.length-3),error:!1,loading:!0};this.addImage(e,s);const n=(null!==(o=t.replaceColor)&&void 0!==o?o:t.replace_color)?i:r;await n(s)}catch(e){throw new Error(`tsParticles error - ${t.src} not found`)}}}async function l(e){const t=new n;await e.addShape("image",t),await e.addShape("images",t)}})(),a})()));

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

@@ -7,3 +7,3 @@ /*!
  * How to use? : Check the GitHub README
- * v2.3.3
+ * v2.4.0
  */

types/IImageShape.d.ts

@@ -5,4 +5,5 @@ import type { IShapeValues } from "tsparticles-engine";
     replaceColor: boolean;
+    replace_color: boolean;
     src: string;
     width: number;
 }

umd/ImageDrawer.js

@@ -64,7 +64,3 @@ (function (factory) {
                 });
-                return;
             }
-            if (image.error) {
-                return;
-            }
         }
@@ -89,3 +85,3 @@ particleInit(container, particle) {
                 let imageRes;
-                if (image.svgData && replaceColor && color) {
+                if (image.svgData && color) {
                     imageRes = await (0, Utils_1.replaceImageColor)(image, imageData, color, particle);
@@ -92,0 +88,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

337834

decreased by-0.14%

Lines of code

1301

decreased by-9.02%

Dependency changes

• Updatedtsparticles-engine@^2.4.0