tsparticles-shape-image - npm Package Compare versions

Comparing version 2.0.0-beta.4 to 2.0.0-beta.5

ImageDrawer.d.ts

@@ -1,3 +0,3 @@
-import type { Container, IParticle, IShapeDrawer, Particle } from "tsparticles-engine";
-import type { IImage } from "./Utils";
+import type { Container, IShapeDrawer, Particle } from "tsparticles-engine";
+import { IImage, IImageParticle } from "./Utils";
 interface ContainerImage {
@@ -13,9 +13,7 @@ id: string;
     addImage(container: Container, image: IImage): void;
-    init(container: Container): Promise<void>;
     destroy(): void;
-    private loadImagesFromParticlesOptions;
     private loadImageShape;
-    draw(context: CanvasRenderingContext2D, particle: IParticle, radius: number, opacity: number): void;
+    draw(context: CanvasRenderingContext2D, particle: IImageParticle, radius: number, opacity: number): void;
     loadShape(particle: Particle): void;
 }
 export {};

ImageDrawer.js

@@ -22,4 +22,3 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
 var _ImageDrawer_images;
-import { isInArray, ShapeType } from "tsparticles-engine";
-import { downloadSvgImage, loadImage, replaceColorSvg } from "./Utils";
+import { downloadSvgImage, loadImage, replaceImageColor } from "./Utils";
 export class ImageDrawer {
@@ -50,80 +49,24 @@ constructor() {
     }
-    init(container) {
-        return __awaiter(this, void 0, void 0, function* () {
-            yield this.loadImagesFromParticlesOptions(container, container.actualOptions.particles);
-            yield this.loadImagesFromParticlesOptions(container, container.actualOptions.interactivity.modes.trail.particles);
-            for (const manualParticle of container.actualOptions.manualParticles) {
-                yield this.loadImagesFromParticlesOptions(container, manualParticle.options);
-            }
-            const emitterOptions = container.actualOptions;
-            if (emitterOptions.emitters) {
-                if (emitterOptions.emitters instanceof Array) {
-                    for (const emitter of emitterOptions.emitters) {
-                        yield this.loadImagesFromParticlesOptions(container, emitter.particles);
-                    }
-                }
-                else {
-                    yield this.loadImagesFromParticlesOptions(container, emitterOptions.emitters.particles);
-                }
-            }
-            const interactiveEmitters = emitterOptions.interactivity.modes.emitters;
-            if (interactiveEmitters) {
-                if (interactiveEmitters instanceof Array) {
-                    for (const emitter of interactiveEmitters) {
-                        yield this.loadImagesFromParticlesOptions(container, emitter.particles);
-                    }
-                }
-                else {
-                    yield this.loadImagesFromParticlesOptions(container, interactiveEmitters.particles);
-                }
-            }
-        });
-    }
     destroy() {
         __classPrivateFieldSet(this, _ImageDrawer_images, [], "f");
     }
-    loadImagesFromParticlesOptions(container, options) {
-        var _a, _b, _c;
+    loadImageShape(container, imageShape) {
         return __awaiter(this, void 0, void 0, function* () {
-            const shapeOptions = options === null || options === void 0 ? void 0 : options.shape;
-            if (!(shapeOptions === null || shapeOptions === void 0 ? void 0 : shapeOptions.type) ||
-                !shapeOptions.options ||
-                (!isInArray(ShapeType.image, shapeOptions.type) && !isInArray(ShapeType.images, shapeOptions.type))) {
-                return;
+            const source = imageShape.src;
+            if (!source) {
+                throw new Error("Error tsParticles - No image.src");
             }
-            const idx = __classPrivateFieldGet(this, _ImageDrawer_images, "f").findIndex((t) => t.id === container.id);
-            if (idx >= 0) {
-                __classPrivateFieldGet(this, _ImageDrawer_images, "f").splice(idx, 1);
-            }
-            const imageOptions = (_a = shapeOptions.options[ShapeType.images]) !== null && _a !== void 0 ? _a : shapeOptions.options[ShapeType.image];
-            if (imageOptions instanceof Array) {
-                for (const optionsImage of imageOptions) {
-                    yield this.loadImageShape(container, optionsImage);
-                }
-            }
-            else {
-                yield this.loadImageShape(container, imageOptions);
-            }
-            if (options === null || options === void 0 ? void 0 : options.groups) {
-                for (const groupName in options.groups) {
-                    const group = options.groups[groupName];
-                    yield this.loadImagesFromParticlesOptions(container, group);
-                }
-            }
-            if ((_c = (_b = options === null || options === void 0 ? void 0 : options.destroy) === null || _b === void 0 ? void 0 : _b.split) === null || _c === void 0 ? void 0 : _c.particles) {
-                yield this.loadImagesFromParticlesOptions(container, options === null || options === void 0 ? void 0 : options.destroy.split.particles);
-            }
-        });
-    }
-    loadImageShape(container, imageShape) {
-        return __awaiter(this, void 0, void 0, function* () {
             try {
+                const image = {
+                    source: source,
+                    type: source.substr(source.length - 3),
+                    error: false,
+                    loading: true,
+                };
+                this.addImage(container, image);
                 const imageFunc = imageShape.replaceColor ? downloadSvgImage : loadImage;
-                const image = yield imageFunc(imageShape.src);
-                if (image) {
-                    this.addImage(container, image);
-                }
+                yield imageFunc(image);
             }
             catch (_a) {
-                console.warn(`tsParticles error - ${imageShape.src} not found`);
+                throw new Error(`tsParticles error - ${imageShape.src} not found`);
             }
@@ -134,5 +77,2 @@ });
         var _a, _b;
-        if (!context) {
-            return;
-        }
         const image = particle.image;
@@ -157,3 +97,3 @@ const element = (_a = image === null || image === void 0 ? void 0 : image.data) === null || _a === void 0 ? void 0 : _a.element;
     loadShape(particle) {
-        var _a, _b, _c, _d, _e, _f, _g;
+        var _a, _b, _c;
         if (particle.shape !== "image" && particle.shape !== "images") {
@@ -164,40 +104,17 @@ return;
         const imageData = particle.shapeData;
-        const image = (_a = images.find((t) => t.source === imageData.src)) !== null && _a !== void 0 ? _a : images[0];
-        const color = particle.getFillColor();
+        const image = images.find((t) => t.source === imageData.src);
         let imageRes;
         if (!image) {
+            this.loadImageShape(particle.container, imageData).then(() => {
+                this.loadShape(particle);
+            });
             return;
         }
-        if (image.svgData !== undefined && imageData.replaceColor && color) {
-            const svgColoredData = replaceColorSvg(image, color, (_c = (_b = particle.opacity) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : 1);
-            const svg = new Blob([svgColoredData], { type: "image/svg+xml" });
-            const domUrl = URL || window.URL || window.webkitURL || window;
-            const url = domUrl.createObjectURL(svg);
-            const img = new Image();
-            imageRes = {
-                data: Object.assign(Object.assign({}, image), { svgData: svgColoredData }),
-                ratio: imageData.width / imageData.height,
-                replaceColor: (_d = imageData.replaceColor) !== null && _d !== void 0 ? _d : imageData.replace_color,
-                source: imageData.src,
-            };
-            img.addEventListener("load", () => {
-                const pImage = particle.image;
-                if (pImage) {
-                    pImage.loaded = true;
-                    image.element = img;
-                }
-                domUrl.revokeObjectURL(url);
-            });
-            img.addEventListener("error", () => {
-                domUrl.revokeObjectURL(url);
-                loadImage(imageData.src).then((img2) => {
-                    const pImage = particle.image;
-                    if (pImage) {
-                        image.element = img2 === null || img2 === void 0 ? void 0 : img2.element;
-                        pImage.loaded = true;
-                    }
-                });
-            });
-            img.src = url;
+        if (image.error) {
+            return;
         }
+        const color = particle.getFillColor();
+        if (image.svgData && imageData.replaceColor && color) {
+            imageRes = replaceImageColor(image, imageData, color, particle);
+        }
         else {
@@ -208,3 +125,3 @@ imageRes = {
                 ratio: imageData.width / imageData.height,
-                replaceColor: (_e = imageData.replaceColor) !== null && _e !== void 0 ? _e : imageData.replace_color,
+                replaceColor: (_a = imageData.replaceColor) !== null && _a !== void 0 ? _a : imageData.replace_color,
                 source: imageData.src,
@@ -216,4 +133,4 @@ };
         }
-        const fill = (_f = imageData.fill) !== null && _f !== void 0 ? _f : particle.fill;
-        const close = (_g = imageData.close) !== null && _g !== void 0 ? _g : particle.close;
+        const fill = (_b = imageData.fill) !== null && _b !== void 0 ? _b : particle.fill;
+        const close = (_c = imageData.close) !== null && _c !== void 0 ? _c : particle.close;
         const imageShape = {
@@ -220,0 +137,0 @@ image: imageRes,

index.d.ts

@@ -1,2 +0,2 @@
-import type { Main } from "tsparticles-engine";
-export declare function loadImageShape(tsParticles: Main): Promise<void>;
+import type { Engine } from "tsparticles-engine";
+export declare function loadImageShape(engine: Engine): Promise<void>;

index.js

@@ -11,8 +11,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
 import { ImageDrawer } from "./ImageDrawer";
-export function loadImageShape(tsParticles) {
+export function loadImageShape(engine) {
     return __awaiter(this, void 0, void 0, function* () {
         const imageDrawer = new ImageDrawer();
-        yield tsParticles.addShape("image", imageDrawer);
-        yield tsParticles.addShape("images", imageDrawer);
+        yield engine.addShape("image", imageDrawer);
+        yield engine.addShape("images", imageDrawer);
     });
 }

package.json

 {
   "name": "tsparticles-shape-image",
-  "version": "2.0.0-beta.4",
+  "version": "2.0.0-beta.5",
   "description": "tsParticles image shape",
@@ -48,4 +48,4 @@ "homepage": "https://particles.js.org/",
   "dependencies": {
-    "tsparticles-engine": "^2.0.0-beta.3"
+    "tsparticles-engine": "^2.0.0-beta.4"
   }
 }

tsparticles.shape.image.js

@@ -7,3 +7,3 @@ /*!
  * How to use? : Check the GitHub README
- * v2.0.0-beta.4
+ * v2.0.0-beta.5
  */
@@ -134,65 +134,109 @@ (function webpackUniversalModuleDefinition(root, factory) {
 
-function loadImage(source) {
-  return new Promise((resolve, reject) => {
-    if (!source) {
-      reject("Error tsParticles - No image.src");
-      return;
-    }
+const currentColorRegex = /(#(?:[0-9a-f]{2}){2,4}|(#[0-9a-f]{3})|(rgb|hsl)a?\((-?\d+%?[,\s]+){2,3}\s*[\d.]+%?\))|currentcolor/gi;
 
-    const image = {
-      source: source,
-      type: source.substr(source.length - 3)
-    };
-    const img = new Image();
-    img.addEventListener("load", () => {
-      image.element = img;
-      resolve(image);
+function replaceColorSvg(imageShape, color, opacity) {
+  const {
+    svgData
+  } = imageShape;
+
+  if (!svgData) {
+    return "";
+  }
+
+  const colorStyle = (0,external_commonjs_tsparticles_engine_commonjs2_tsparticles_engine_amd_tsparticles_engine_root_window_.getStyleFromHsl)(color, opacity);
+
+  if (svgData.includes("fill")) {
+    return svgData.replace(currentColorRegex, () => colorStyle);
+  }
+
+  const preFillIndex = svgData.indexOf(">");
+  return `${svgData.substring(0, preFillIndex)} fill="${colorStyle}"${svgData.substring(preFillIndex)}`;
+}
+
+function loadImage(image) {
+  return __awaiter(this, void 0, void 0, function* () {
+    return new Promise(resolve => {
+      image.loading = true;
+      const img = new Image();
+      img.addEventListener("load", () => {
+        image.element = img;
+        image.loading = false;
+        resolve();
+      });
+      img.addEventListener("error", () => {
+        image.error = true;
+        image.loading = false;
+        console.error(`Error tsParticles - loading image: ${image.source}`);
+        resolve();
+      });
+      img.src = image.source;
     });
-    img.addEventListener("error", () => {
-      reject(`Error tsParticles - loading image: ${source}`);
-    });
-    img.src = source;
   });
 }
-function downloadSvgImage(source) {
+function downloadSvgImage(image) {
   return __awaiter(this, void 0, void 0, function* () {
-    if (!source) {
-      throw new Error("Error tsParticles - No image.src");
-    }
-
-    const image = {
-      source: source,
-      type: source.substr(source.length - 3)
-    };
-
     if (image.type !== "svg") {
-      return loadImage(source);
+      yield loadImage(image);
+      return;
     }
 
+    image.loading = true;
     const response = yield fetch(image.source);
+    image.loading = false;
 
     if (!response.ok) {
-      throw new Error("Error tsParticles - Image not found");
+      console.error("Error tsParticles - Image not found");
+      image.error = true;
     }
 
-    image.svgData = yield response.text();
-    return image;
+    if (!image.error) {
+      image.svgData = yield response.text();
+    }
   });
 }
-function replaceColorSvg(imageShape, color, opacity) {
-  const {
-    svgData
-  } = imageShape;
+function replaceImageColor(image, imageData, color, particle) {
+  var _a, _b, _c;
 
-  if (!svgData) {
-    return "";
-  }
+  const svgColoredData = replaceColorSvg(image, color, (_b = (_a = particle.opacity) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : 1);
+  const svg = new Blob([svgColoredData], {
+    type: "image/svg+xml"
+  });
+  const domUrl = URL || window.URL || window.webkitURL || window;
+  const url = domUrl.createObjectURL(svg);
+  const img = new Image();
+  const imageRes = {
+    data: Object.assign(Object.assign({}, image), {
+      svgData: svgColoredData
+    }),
+    ratio: imageData.width / imageData.height,
+    replaceColor: (_c = imageData.replaceColor) !== null && _c !== void 0 ? _c : imageData.replace_color,
+    source: imageData.src
+  };
+  img.addEventListener("load", () => {
+    const pImage = particle.image;
 
-  if (svgData.includes("fill")) {
-    const currentColor = /(#(?:[0-9a-f]{2}){2,4}|(#[0-9a-f]{3})|(rgb|hsl)a?\((-?\d+%?[,\s]+){2,3}\s*[\d.]+%?\))|currentcolor/gi;
-    return svgData.replace(currentColor, () => (0,external_commonjs_tsparticles_engine_commonjs2_tsparticles_engine_amd_tsparticles_engine_root_window_.getStyleFromHsl)(color, opacity));
-  }
+    if (pImage) {
+      pImage.loaded = true;
+      image.element = img;
+    }
 
-  const preFillIndex = svgData.indexOf(">");
-  return `${svgData.substring(0, preFillIndex)} fill="${(0,external_commonjs_tsparticles_engine_commonjs2_tsparticles_engine_amd_tsparticles_engine_root_window_.getStyleFromHsl)(color, opacity)}"${svgData.substring(preFillIndex)}`;
+    domUrl.revokeObjectURL(url);
+  });
+  img.addEventListener("error", () => {
+    domUrl.revokeObjectURL(url);
+    const img2 = Object.assign(Object.assign({}, image), {
+      error: false,
+      loading: true
+    });
+    loadImage(img2).then(() => {
+      const pImage = particle.image;
+
+      if (pImage) {
+        image.element = img2.element;
+        pImage.loaded = true;
+      }
+    });
+  });
+  img.src = url;
+  return imageRes;
 }
@@ -248,3 +292,2 @@ ;// CONCATENATED MODULE: ./dist/ImageDrawer.js
 
-
 class ImageDrawer {
@@ -281,37 +324,2 @@ constructor() {
 
-  init(container) {
-    return ImageDrawer_awaiter(this, void 0, void 0, function* () {
-      yield this.loadImagesFromParticlesOptions(container, container.actualOptions.particles);
-      yield this.loadImagesFromParticlesOptions(container, container.actualOptions.interactivity.modes.trail.particles);
-
-      for (const manualParticle of container.actualOptions.manualParticles) {
-        yield this.loadImagesFromParticlesOptions(container, manualParticle.options);
-      }
-
-      const emitterOptions = container.actualOptions;
-
-      if (emitterOptions.emitters) {
-        if (emitterOptions.emitters instanceof Array) {
-          for (const emitter of emitterOptions.emitters) {
-            yield this.loadImagesFromParticlesOptions(container, emitter.particles);
-          }
-        } else {
-          yield this.loadImagesFromParticlesOptions(container, emitterOptions.emitters.particles);
-        }
-      }
-
-      const interactiveEmitters = emitterOptions.interactivity.modes.emitters;
-
-      if (interactiveEmitters) {
-        if (interactiveEmitters instanceof Array) {
-          for (const emitter of interactiveEmitters) {
-            yield this.loadImagesFromParticlesOptions(container, emitter.particles);
-          }
-        } else {
-          yield this.loadImagesFromParticlesOptions(container, interactiveEmitters.particles);
-        }
-      }
-    });
-  }
-
   destroy() {
@@ -321,52 +329,22 @@ __classPrivateFieldSet(this, _ImageDrawer_images, [], "f");
 
-  loadImagesFromParticlesOptions(container, options) {
-    var _a, _b, _c;
-
+  loadImageShape(container, imageShape) {
     return ImageDrawer_awaiter(this, void 0, void 0, function* () {
-      const shapeOptions = options === null || options === void 0 ? void 0 : options.shape;
+      const source = imageShape.src;
 
-      if (!(shapeOptions === null || shapeOptions === void 0 ? void 0 : shapeOptions.type) || !shapeOptions.options || !(0,external_commonjs_tsparticles_engine_commonjs2_tsparticles_engine_amd_tsparticles_engine_root_window_.isInArray)(external_commonjs_tsparticles_engine_commonjs2_tsparticles_engine_amd_tsparticles_engine_root_window_.ShapeType.image, shapeOptions.type) && !(0,external_commonjs_tsparticles_engine_commonjs2_tsparticles_engine_amd_tsparticles_engine_root_window_.isInArray)(external_commonjs_tsparticles_engine_commonjs2_tsparticles_engine_amd_tsparticles_engine_root_window_.ShapeType.images, shapeOptions.type)) {
-        return;
+      if (!source) {
+        throw new Error("Error tsParticles - No image.src");
       }
 
-      const idx = __classPrivateFieldGet(this, _ImageDrawer_images, "f").findIndex(t => t.id === container.id);
-
-      if (idx >= 0) {
-        __classPrivateFieldGet(this, _ImageDrawer_images, "f").splice(idx, 1);
-      }
-
-      const imageOptions = (_a = shapeOptions.options[external_commonjs_tsparticles_engine_commonjs2_tsparticles_engine_amd_tsparticles_engine_root_window_.ShapeType.images]) !== null && _a !== void 0 ? _a : shapeOptions.options[external_commonjs_tsparticles_engine_commonjs2_tsparticles_engine_amd_tsparticles_engine_root_window_.ShapeType.image];
-
-      if (imageOptions instanceof Array) {
-        for (const optionsImage of imageOptions) {
-          yield this.loadImageShape(container, optionsImage);
-        }
-      } else {
-        yield this.loadImageShape(container, imageOptions);
-      }
-
-      if (options === null || options === void 0 ? void 0 : options.groups) {
-        for (const groupName in options.groups) {
-          const group = options.groups[groupName];
-          yield this.loadImagesFromParticlesOptions(container, group);
-        }
-      }
-
-      if ((_c = (_b = options === null || options === void 0 ? void 0 : options.destroy) === null || _b === void 0 ? void 0 : _b.split) === null || _c === void 0 ? void 0 : _c.particles) {
-        yield this.loadImagesFromParticlesOptions(container, options === null || options === void 0 ? void 0 : options.destroy.split.particles);
-      }
-    });
-  }
-
-  loadImageShape(container, imageShape) {
-    return ImageDrawer_awaiter(this, void 0, void 0, function* () {
       try {
+        const image = {
+          source: source,
+          type: source.substr(source.length - 3),
+          error: false,
+          loading: true
+        };
+        this.addImage(container, image);
         const imageFunc = imageShape.replaceColor ? downloadSvgImage : loadImage;
-        const image = yield imageFunc(imageShape.src);
-
-        if (image) {
-          this.addImage(container, image);
-        }
+        yield imageFunc(image);
       } catch (_a) {
-        console.warn(`tsParticles error - ${imageShape.src} not found`);
+        throw new Error(`tsParticles error - ${imageShape.src} not found`);
       }
@@ -379,6 +357,2 @@ });
 
-    if (!context) {
-      return;
-    }
-
     const image = particle.image;
@@ -409,3 +383,3 @@ const element = (_a = image === null || image === void 0 ? void 0 : image.data) === null || _a === void 0 ? void 0 : _a.element;
   loadShape(particle) {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c;
 
@@ -418,48 +392,20 @@ if (particle.shape !== "image" && particle.shape !== "images") {
     const imageData = particle.shapeData;
-    const image = (_a = images.find(t => t.source === imageData.src)) !== null && _a !== void 0 ? _a : images[0];
-    const color = particle.getFillColor();
+    const image = images.find(t => t.source === imageData.src);
     let imageRes;
 
     if (!image) {
+      this.loadImageShape(particle.container, imageData).then(() => {
+        this.loadShape(particle);
+      });
       return;
     }
 
-    if (image.svgData !== undefined && imageData.replaceColor && color) {
-      const svgColoredData = replaceColorSvg(image, color, (_c = (_b = particle.opacity) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : 1);
-      const svg = new Blob([svgColoredData], {
-        type: "image/svg+xml"
-      });
-      const domUrl = URL || window.URL || window.webkitURL || window;
-      const url = domUrl.createObjectURL(svg);
-      const img = new Image();
-      imageRes = {
-        data: Object.assign(Object.assign({}, image), {
-          svgData: svgColoredData
-        }),
-        ratio: imageData.width / imageData.height,
-        replaceColor: (_d = imageData.replaceColor) !== null && _d !== void 0 ? _d : imageData.replace_color,
-        source: imageData.src
-      };
-      img.addEventListener("load", () => {
-        const pImage = particle.image;
+    if (image.error) {
+      return;
+    }
 
-        if (pImage) {
-          pImage.loaded = true;
-          image.element = img;
-        }
+    const color = particle.getFillColor();
 
-        domUrl.revokeObjectURL(url);
-      });
-      img.addEventListener("error", () => {
-        domUrl.revokeObjectURL(url);
-        loadImage(imageData.src).then(img2 => {
-          const pImage = particle.image;
-
-          if (pImage) {
-            image.element = img2 === null || img2 === void 0 ? void 0 : img2.element;
-            pImage.loaded = true;
-          }
-        });
-      });
-      img.src = url;
+    if (image.svgData && imageData.replaceColor && color) {
+      imageRes = replaceImageColor(image, imageData, color, particle);
     } else {
@@ -470,3 +416,3 @@ imageRes = {
         ratio: imageData.width / imageData.height,
-        replaceColor: (_e = imageData.replaceColor) !== null && _e !== void 0 ? _e : imageData.replace_color,
+        replaceColor: (_a = imageData.replaceColor) !== null && _a !== void 0 ? _a : imageData.replace_color,
         source: imageData.src
@@ -480,4 +426,4 @@ };
 
-    const fill = (_f = imageData.fill) !== null && _f !== void 0 ? _f : particle.fill;
-    const close = (_g = imageData.close) !== null && _g !== void 0 ? _g : particle.close;
+    const fill = (_b = imageData.fill) !== null && _b !== void 0 ? _b : particle.fill;
+    const close = (_c = imageData.close) !== null && _c !== void 0 ? _c : particle.close;
     const imageShape = {
@@ -529,7 +475,7 @@ image: imageRes,
 
-function loadImageShape(tsParticles) {
+function loadImageShape(engine) {
   return dist_awaiter(this, void 0, void 0, function* () {
     const imageDrawer = new ImageDrawer();
-    yield tsParticles.addShape("image", imageDrawer);
-    yield tsParticles.addShape("images", imageDrawer);
+    yield engine.addShape("image", imageDrawer);
+    yield engine.addShape("images", imageDrawer);
   });
@@ -536,0 +482,0 @@ }

tsparticles.shape.image.min.js

@@ -1,2 +0,2 @@
-/*! tsParticles Image Shape v2.0.0-beta.4 by Matteo Bruni */
-!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 o="object"==typeof exports?t(require("tsparticles-engine")):t(e.window);for(var i in o)("object"==typeof exports?exports:e)[i]=o[i]}}(this,(function(e){return(()=>{"use strict";var t={818:t=>{t.exports=e}},o={};function i(e){var r=o[e];if(void 0!==r)return r.exports;var n=o[e]={exports:{}};return t[e](n,n.exports,i),n.exports}i.d=(e,t)=>{for(var o in t)i.o(t,o)&&!i.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},i.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),i.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var r={};return(()=>{i.r(r),i.d(r,{loadImageShape:()=>f});var e=i(818),t=function(e,t,o,i){return new(o||(o=Promise))((function(r,n){function a(e){try{l(i.next(e))}catch(e){n(e)}}function s(e){try{l(i.throw(e))}catch(e){n(e)}}function l(e){var t;e.done?r(e.value):(t=e.value,t instanceof o?t:new o((function(e){e(t)}))).then(a,s)}l((i=i.apply(e,t||[])).next())}))};function o(e){return new Promise(((t,o)=>{if(!e)return void o("Error tsParticles - No image.src");const i={source:e,type:e.substr(e.length-3)},r=new Image;r.addEventListener("load",(()=>{i.element=r,t(i)})),r.addEventListener("error",(()=>{o(`Error tsParticles - loading image: ${e}`)})),r.src=e}))}function n(e){return t(this,void 0,void 0,(function*(){if(!e)throw new Error("Error tsParticles - No image.src");const t={source:e,type:e.substr(e.length-3)};if("svg"!==t.type)return o(e);const i=yield fetch(t.source);if(!i.ok)throw new Error("Error tsParticles - Image not found");return t.svgData=yield i.text(),t}))}var a,s=function(e,t,o,i){return new(o||(o=Promise))((function(r,n){function a(e){try{l(i.next(e))}catch(e){n(e)}}function s(e){try{l(i.throw(e))}catch(e){n(e)}}function l(e){var t;e.done?r(e.value):(t=e.value,t instanceof o?t:new o((function(e){e(t)}))).then(a,s)}l((i=i.apply(e,t||[])).next())}))},l=function(e,t,o,i,r){if("m"===i)throw new TypeError("Private method is not writable");if("a"===i&&!r)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof t?e!==t||!r:!t.has(e))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===i?r.call(e,o):r?r.value=o:t.set(e,o),o},c=function(e,t,o,i){if("a"===o&&!i)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof t?e!==t||!i:!t.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===o?i:"a"===o?i.call(e):i?i.value:t.get(e)};class d{constructor(){a.set(this,void 0),l(this,a,[],"f")}getSidesCount(){return 12}getImages(e){const t=c(this,a,"f").find((t=>t.id===e.id));return t||(c(this,a,"f").push({id:e.id,images:[]}),this.getImages(e))}addImage(e,t){const o=this.getImages(e);null==o||o.images.push(t)}init(e){return s(this,void 0,void 0,(function*(){yield this.loadImagesFromParticlesOptions(e,e.actualOptions.particles),yield this.loadImagesFromParticlesOptions(e,e.actualOptions.interactivity.modes.trail.particles);for(const t of e.actualOptions.manualParticles)yield this.loadImagesFromParticlesOptions(e,t.options);const t=e.actualOptions;if(t.emitters)if(t.emitters instanceof Array)for(const o of t.emitters)yield this.loadImagesFromParticlesOptions(e,o.particles);else yield this.loadImagesFromParticlesOptions(e,t.emitters.particles);const o=t.interactivity.modes.emitters;if(o)if(o instanceof Array)for(const t of o)yield this.loadImagesFromParticlesOptions(e,t.particles);else yield this.loadImagesFromParticlesOptions(e,o.particles)}))}destroy(){l(this,a,[],"f")}loadImagesFromParticlesOptions(t,o){var i,r,n;return s(this,void 0,void 0,(function*(){const s=null==o?void 0:o.shape;if(!(null==s?void 0:s.type)||!s.options||!(0,e.isInArray)(e.ShapeType.image,s.type)&&!(0,e.isInArray)(e.ShapeType.images,s.type))return;const l=c(this,a,"f").findIndex((e=>e.id===t.id));l>=0&&c(this,a,"f").splice(l,1);const d=null!==(i=s.options[e.ShapeType.images])&&void 0!==i?i:s.options[e.ShapeType.image];if(d instanceof Array)for(const e of d)yield this.loadImageShape(t,e);else yield this.loadImageShape(t,d);if(null==o?void 0:o.groups)for(const e in o.groups){const i=o.groups[e];yield this.loadImagesFromParticlesOptions(t,i)}(null===(n=null===(r=null==o?void 0:o.destroy)||void 0===r?void 0:r.split)||void 0===n?void 0:n.particles)&&(yield this.loadImagesFromParticlesOptions(t,null==o?void 0:o.destroy.split.particles))}))}loadImageShape(e,t){return s(this,void 0,void 0,(function*(){try{const i=t.replaceColor?n:o,r=yield i(t.src);r&&this.addImage(e,r)}catch(e){console.warn(`tsParticles error - ${t.src} not found`)}}))}draw(e,t,o,i){var r,n;if(!e)return;const a=t.image,s=null===(r=null==a?void 0:a.data)||void 0===r?void 0:r.element;if(!s)return;const l=null!==(n=null==a?void 0:a.ratio)&&void 0!==n?n:1,c={x:-o,y:-o};(null==a?void 0:a.data.svgData)&&(null==a?void 0:a.replaceColor)||(e.globalAlpha=i),e.drawImage(s,c.x,c.y,2*o,2*o/l),(null==a?void 0:a.data.svgData)&&(null==a?void 0:a.replaceColor)||(e.globalAlpha=1)}loadShape(t){var i,r,n,a,s,l,c;if("image"!==t.shape&&"images"!==t.shape)return;const d=this.getImages(t.container).images,u=t.shapeData,f=null!==(i=d.find((e=>e.source===u.src)))&&void 0!==i?i:d[0],p=t.getFillColor();let m;if(!f)return;if(void 0!==f.svgData&&u.replaceColor&&p){const i=function(t,o,i){const{svgData:r}=t;if(!r)return"";if(r.includes("fill")){const t=/(#(?:[0-9a-f]{2}){2,4}|(#[0-9a-f]{3})|(rgb|hsl)a?\((-?\d+%?[,\s]+){2,3}\s*[\d.]+%?\))|currentcolor/gi;return r.replace(t,(()=>(0,e.getStyleFromHsl)(o,i)))}const n=r.indexOf(">");return`${r.substring(0,n)} fill="${(0,e.getStyleFromHsl)(o,i)}"${r.substring(n)}`}(f,p,null!==(n=null===(r=t.opacity)||void 0===r?void 0:r.value)&&void 0!==n?n:1),s=new Blob([i],{type:"image/svg+xml"}),l=URL||window.URL||window.webkitURL||window,c=l.createObjectURL(s),d=new Image;m={data:Object.assign(Object.assign({},f),{svgData:i}),ratio:u.width/u.height,replaceColor:null!==(a=u.replaceColor)&&void 0!==a?a:u.replace_color,source:u.src},d.addEventListener("load",(()=>{const e=t.image;e&&(e.loaded=!0,f.element=d),l.revokeObjectURL(c)})),d.addEventListener("error",(()=>{l.revokeObjectURL(c),o(u.src).then((e=>{const o=t.image;o&&(f.element=null==e?void 0:e.element,o.loaded=!0)}))})),d.src=c}else m={data:f,loaded:!0,ratio:u.width/u.height,replaceColor:null!==(s=u.replaceColor)&&void 0!==s?s:u.replace_color,source:u.src};m.ratio||(m.ratio=1);const v={image:m,fill:null!==(l=u.fill)&&void 0!==l?l:t.fill,close:null!==(c=u.close)&&void 0!==c?c:t.close};t.image=v.image,t.fill=v.fill,t.close=v.close}}a=new WeakMap;var u=function(e,t,o,i){return new(o||(o=Promise))((function(r,n){function a(e){try{l(i.next(e))}catch(e){n(e)}}function s(e){try{l(i.throw(e))}catch(e){n(e)}}function l(e){var t;e.done?r(e.value):(t=e.value,t instanceof o?t:new o((function(e){e(t)}))).then(a,s)}l((i=i.apply(e,t||[])).next())}))};function f(e){return u(this,void 0,void 0,(function*(){const t=new d;yield e.addShape("image",t),yield e.addShape("images",t)}))}})(),r})()}));
+/*! tsParticles Image Shape v2.0.0-beta.5 by Matteo Bruni */
+!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 o="object"==typeof exports?t(require("tsparticles-engine")):t(e.window);for(var r in o)("object"==typeof exports?exports:e)[r]=o[r]}}(this,(function(e){return(()=>{"use strict";var t={818:t=>{t.exports=e}},o={};function r(e){var n=o[e];if(void 0!==n)return n.exports;var i=o[e]={exports:{}};return t[e](i,i.exports,r),i.exports}r.d=(e,t)=>{for(var o in t)r.o(t,o)&&!r.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var n={};return(()=>{r.r(n),r.d(n,{loadImageShape:()=>v});var e=r(818),t=function(e,t,o,r){return new(o||(o=Promise))((function(n,i){function a(e){try{l(r.next(e))}catch(e){i(e)}}function s(e){try{l(r.throw(e))}catch(e){i(e)}}function l(e){var t;e.done?n(e.value):(t=e.value,t instanceof o?t:new o((function(e){e(t)}))).then(a,s)}l((r=r.apply(e,t||[])).next())}))};const o=/(#(?:[0-9a-f]{2}){2,4}|(#[0-9a-f]{3})|(rgb|hsl)a?\((-?\d+%?[,\s]+){2,3}\s*[\d.]+%?\))|currentcolor/gi;function i(e){return t(this,void 0,void 0,(function*(){return new Promise((t=>{e.loading=!0;const o=new Image;o.addEventListener("load",(()=>{e.element=o,e.loading=!1,t()})),o.addEventListener("error",(()=>{e.error=!0,e.loading=!1,console.error(`Error tsParticles - loading image: ${e.source}`),t()})),o.src=e.source}))}))}function a(e){return t(this,void 0,void 0,(function*(){if("svg"!==e.type)return void(yield i(e));e.loading=!0;const t=yield fetch(e.source);e.loading=!1,t.ok||(console.error("Error tsParticles - Image not found"),e.error=!0),e.error||(e.svgData=yield t.text())}))}function s(t,r,n,a){var s,l,c;const d=function(t,r,n){const{svgData:i}=t;if(!i)return"";const a=(0,e.getStyleFromHsl)(r,n);if(i.includes("fill"))return i.replace(o,(()=>a));const s=i.indexOf(">");return`${i.substring(0,s)} fill="${a}"${i.substring(s)}`}(t,n,null!==(l=null===(s=a.opacity)||void 0===s?void 0:s.value)&&void 0!==l?l:1),u=new Blob([d],{type:"image/svg+xml"}),f=URL||window.URL||window.webkitURL||window,g=f.createObjectURL(u),v=new Image,p={data:Object.assign(Object.assign({},t),{svgData:d}),ratio:r.width/r.height,replaceColor:null!==(c=r.replaceColor)&&void 0!==c?c:r.replace_color,source:r.src};return v.addEventListener("load",(()=>{const e=a.image;e&&(e.loaded=!0,t.element=v),f.revokeObjectURL(g)})),v.addEventListener("error",(()=>{f.revokeObjectURL(g);const e=Object.assign(Object.assign({},t),{error:!1,loading:!0});i(e).then((()=>{const o=a.image;o&&(t.element=e.element,o.loaded=!0)}))})),v.src=g,p}var l,c=function(e,t,o,r){return new(o||(o=Promise))((function(n,i){function a(e){try{l(r.next(e))}catch(e){i(e)}}function s(e){try{l(r.throw(e))}catch(e){i(e)}}function l(e){var t;e.done?n(e.value):(t=e.value,t instanceof o?t:new o((function(e){e(t)}))).then(a,s)}l((r=r.apply(e,t||[])).next())}))},d=function(e,t,o,r,n){if("m"===r)throw new TypeError("Private method is not writable");if("a"===r&&!n)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof t?e!==t||!n:!t.has(e))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===r?n.call(e,o):n?n.value=o:t.set(e,o),o},u=function(e,t,o,r){if("a"===o&&!r)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof t?e!==t||!r:!t.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===o?r:"a"===o?r.call(e):r?r.value:t.get(e)};class f{constructor(){l.set(this,void 0),d(this,l,[],"f")}getSidesCount(){return 12}getImages(e){const t=u(this,l,"f").find((t=>t.id===e.id));return t||(u(this,l,"f").push({id:e.id,images:[]}),this.getImages(e))}addImage(e,t){const o=this.getImages(e);null==o||o.images.push(t)}destroy(){d(this,l,[],"f")}loadImageShape(e,t){return c(this,void 0,void 0,(function*(){const o=t.src;if(!o)throw new Error("Error tsParticles - No image.src");try{const r={source:o,type:o.substr(o.length-3),error:!1,loading:!0};this.addImage(e,r);const n=t.replaceColor?a:i;yield n(r)}catch(e){throw new Error(`tsParticles error - ${t.src} not found`)}}))}draw(e,t,o,r){var n,i;const a=t.image,s=null===(n=null==a?void 0:a.data)||void 0===n?void 0:n.element;if(!s)return;const l=null!==(i=null==a?void 0:a.ratio)&&void 0!==i?i:1,c={x:-o,y:-o};(null==a?void 0:a.data.svgData)&&(null==a?void 0:a.replaceColor)||(e.globalAlpha=r),e.drawImage(s,c.x,c.y,2*o,2*o/l),(null==a?void 0:a.data.svgData)&&(null==a?void 0:a.replaceColor)||(e.globalAlpha=1)}loadShape(e){var t,o,r;if("image"!==e.shape&&"images"!==e.shape)return;const n=this.getImages(e.container).images,i=e.shapeData,a=n.find((e=>e.source===i.src));let l;if(!a)return void this.loadImageShape(e.container,i).then((()=>{this.loadShape(e)}));if(a.error)return;const c=e.getFillColor();l=a.svgData&&i.replaceColor&&c?s(a,i,c,e):{data:a,loaded:!0,ratio:i.width/i.height,replaceColor:null!==(t=i.replaceColor)&&void 0!==t?t:i.replace_color,source:i.src},l.ratio||(l.ratio=1);const d={image:l,fill:null!==(o=i.fill)&&void 0!==o?o:e.fill,close:null!==(r=i.close)&&void 0!==r?r:e.close};e.image=d.image,e.fill=d.fill,e.close=d.close}}l=new WeakMap;var g=function(e,t,o,r){return new(o||(o=Promise))((function(n,i){function a(e){try{l(r.next(e))}catch(e){i(e)}}function s(e){try{l(r.throw(e))}catch(e){i(e)}}function l(e){var t;e.done?n(e.value):(t=e.value,t instanceof o?t:new o((function(e){e(t)}))).then(a,s)}l((r=r.apply(e,t||[])).next())}))};function v(e){return g(this,void 0,void 0,(function*(){const t=new f;yield e.addShape("image",t),yield e.addShape("images",t)}))}})(),n})()}));

Utils.d.ts

@@ -1,2 +0,3 @@
-import type { IHsl, IParticle } from "tsparticles-engine";
+import type { IHsl, IParticle, Particle } from "tsparticles-engine";
+import type { IImageShape } from "./IImageShape";
 export interface IImage {
@@ -7,2 +8,4 @@ source: string;
     svgData?: string;
+    error: boolean;
+    loading: boolean;
 }
@@ -22,6 +25,6 @@ export interface IParticleImage {
 export declare type IImageParticle = IParticle & {
-    image: IParticleImage;
+    image?: IParticleImage;
 };
-export declare function loadImage(source: string): Promise<IImage | undefined>;
-export declare function downloadSvgImage(source: string): Promise<IImage | undefined>;
-export declare function replaceColorSvg(imageShape: IImage, color: IHsl, opacity: number): string;
+export declare function loadImage(image: IImage): Promise<void>;
+export declare function downloadSvgImage(image: IImage): Promise<void>;
+export declare function replaceImageColor(image: IImage, imageData: IImageShape, color: IHsl, particle: Particle): IParticleImage;

Utils.js

@@ -11,54 +11,87 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
 import { getStyleFromHsl } from "tsparticles-engine";
-export function loadImage(source) {
-    return new Promise((resolve, reject) => {
-        if (!source) {
-            reject("Error tsParticles - No image.src");
-            return;
-        }
-        const image = {
-            source: source,
-            type: source.substr(source.length - 3),
-        };
-        const img = new Image();
-        img.addEventListener("load", () => {
-            image.element = img;
-            resolve(image);
+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;
+    if (!svgData) {
+        return "";
+    }
+    const colorStyle = getStyleFromHsl(color, opacity);
+    if (svgData.includes("fill")) {
+        return svgData.replace(currentColorRegex, () => colorStyle);
+    }
+    const preFillIndex = svgData.indexOf(">");
+    return `${svgData.substring(0, preFillIndex)} fill="${colorStyle}"${svgData.substring(preFillIndex)}`;
+}
+export function loadImage(image) {
+    return __awaiter(this, void 0, void 0, function* () {
+        return new Promise((resolve) => {
+            image.loading = true;
+            const img = new Image();
+            img.addEventListener("load", () => {
+                image.element = img;
+                image.loading = false;
+                resolve();
+            });
+            img.addEventListener("error", () => {
+                image.error = true;
+                image.loading = false;
+                console.error(`Error tsParticles - loading image: ${image.source}`);
+                resolve();
+            });
+            img.src = image.source;
         });
-        img.addEventListener("error", () => {
-            reject(`Error tsParticles - loading image: ${source}`);
-        });
-        img.src = source;
     });
 }
-export function downloadSvgImage(source) {
+export function downloadSvgImage(image) {
     return __awaiter(this, void 0, void 0, function* () {
-        if (!source) {
-            throw new Error("Error tsParticles - No image.src");
-        }
-        const image = {
-            source: source,
-            type: source.substr(source.length - 3),
-        };
         if (image.type !== "svg") {
-            return loadImage(source);
+            yield loadImage(image);
+            return;
         }
+        image.loading = true;
         const response = yield fetch(image.source);
+        image.loading = false;
         if (!response.ok) {
-            throw new Error("Error tsParticles - Image not found");
+            console.error("Error tsParticles - Image not found");
+            image.error = true;
         }
-        image.svgData = yield response.text();
-        return image;
+        if (!image.error) {
+            image.svgData = yield response.text();
+        }
     });
 }
-export function replaceColorSvg(imageShape, color, opacity) {
-    const { svgData } = imageShape;
-    if (!svgData) {
-        return "";
-    }
-    if (svgData.includes("fill")) {
-        const currentColor = /(#(?:[0-9a-f]{2}){2,4}|(#[0-9a-f]{3})|(rgb|hsl)a?\((-?\d+%?[,\s]+){2,3}\s*[\d.]+%?\))|currentcolor/gi;
-        return svgData.replace(currentColor, () => getStyleFromHsl(color, opacity));
-    }
-    const preFillIndex = svgData.indexOf(">");
-    return `${svgData.substring(0, preFillIndex)} fill="${getStyleFromHsl(color, opacity)}"${svgData.substring(preFillIndex)}`;
+export 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);
+    const svg = new Blob([svgColoredData], { type: "image/svg+xml" });
+    const domUrl = URL || window.URL || window.webkitURL || window;
+    const url = domUrl.createObjectURL(svg);
+    const img = new Image();
+    const imageRes = {
+        data: Object.assign(Object.assign({}, image), { svgData: svgColoredData }),
+        ratio: imageData.width / imageData.height,
+        replaceColor: (_c = imageData.replaceColor) !== null && _c !== void 0 ? _c : imageData.replace_color,
+        source: imageData.src,
+    };
+    img.addEventListener("load", () => {
+        const pImage = particle.image;
+        if (pImage) {
+            pImage.loaded = true;
+            image.element = img;
+        }
+        domUrl.revokeObjectURL(url);
+    });
+    img.addEventListener("error", () => {
+        domUrl.revokeObjectURL(url);
+        const img2 = Object.assign(Object.assign({}, image), { error: false, loading: true });
+        loadImage(img2).then(() => {
+            const pImage = particle.image;
+            if (pImage) {
+                image.element = img2.element;
+                pImage.loaded = true;
+            }
+        });
+    });
+    img.src = url;
+    return imageRes;
 }

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

Improved metrics

Number of package files

13

increased by18.18%

Worsened metrics

Total package byte prevSize

313835

decreased by-2.47%

Lines of code

717

decreased by-10.6%

Dependency changes

• Updatedtsparticles-engine@^2.0.0-beta.4