tsparticles-shape-image - npm Package Compare versions

Comparing version 2.0.0-alpha.7 to 2.0.0-beta.0

ImageDrawer.d.ts

 import type { Container, IParticle, IShapeDrawer, Particle } from "tsparticles-engine";
-import { ContainerImage, IImage } from "./Utils";
+import type { IImage } from "./Utils";
+interface ContainerImage {
+    id: string;
+    images: IImage[];
+}
 export declare class ImageDrawer implements IShapeDrawer {
@@ -11,3 +15,3 @@ #private;
     destroy(): void;
-    private initShape;
+    private loadImagesFromParticlesOptions;
     private loadImageShape;
@@ -17,1 +21,2 @@ draw(context: CanvasRenderingContext2D, particle: IParticle, radius: number, opacity: number): void;
 }
+export {};

ImageDrawer.js

@@ -10,21 +10,20 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
 };
-var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, privateMap, value) {
-    if (!privateMap.has(receiver)) {
-        throw new TypeError("attempted to set private field on non-instance");
-    }
-    privateMap.set(receiver, value);
-    return value;
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
-var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, privateMap) {
-    if (!privateMap.has(receiver)) {
-        throw new TypeError("attempted to get private field on non-instance");
-    }
-    return privateMap.get(receiver);
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
-var _images;
-import { downloadSvgImage, loadImage, replaceColorSvg, } from "./Utils";
+var _ImageDrawer_images;
+import { isInArray, ShapeType } from "tsparticles-engine";
+import { downloadSvgImage, loadImage, replaceColorSvg } from "./Utils";
 export class ImageDrawer {
     constructor() {
-        _images.set(this, void 0);
-        __classPrivateFieldSet(this, _images, []);
+        _ImageDrawer_images.set(this, void 0);
+        __classPrivateFieldSet(this, _ImageDrawer_images, [], "f");
     }
@@ -35,5 +34,5 @@ getSidesCount() {
     getImages(container) {
-        const containerImages = __classPrivateFieldGet(this, _images).find((t) => t.id === container.id);
+        const containerImages = __classPrivateFieldGet(this, _ImageDrawer_images, "f").find((t) => t.id === container.id);
         if (!containerImages) {
-            __classPrivateFieldGet(this, _images).push({
+            __classPrivateFieldGet(this, _ImageDrawer_images, "f").push({
                 id: container.id,
@@ -53,19 +52,53 @@ images: [],
     init(container) {
-        const options = container.actualOptions;
-        const shapeOptions = options.particles.shape;
-        return this.initShape(container, shapeOptions);
+        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, _images, []);
+        __classPrivateFieldSet(this, _ImageDrawer_images, [], "f");
     }
-    initShape(container, shapeOptions) {
-        var _a;
+    loadImagesFromParticlesOptions(container, options) {
+        var _a, _b, _c;
         return __awaiter(this, void 0, void 0, function* () {
-            const imageOptions = (_a = shapeOptions.options["image"]) !== null && _a !== void 0 ? _a : shapeOptions.options["images"];
+            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 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) {
-                const promises = [];
                 for (const optionsImage of imageOptions) {
-                    promises.push(this.loadImageShape(container, optionsImage));
+                    yield this.loadImageShape(container, optionsImage);
                 }
-                yield Promise.allSettled(promises);
             }
@@ -75,2 +108,11 @@ else {
             }
+            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);
+            }
         });
@@ -116,8 +158,7 @@ }
     loadShape(particle) {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f, _g;
         if (particle.shape !== "image" && particle.shape !== "images") {
             return;
         }
-        const container = particle.container;
-        const images = this.getImages(container).images;
+        const images = this.getImages(particle.container).images;
         const imageData = particle.shapeData;
@@ -131,3 +172,3 @@ const image = (_a = images.find((t) => t.source === imageData.src)) !== null && _a !== void 0 ? _a : images[0];
         if (image.svgData !== undefined && imageData.replaceColor && color) {
-            const svgColoredData = replaceColorSvg(image, color, particle.opacity.value);
+            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" });
@@ -138,5 +179,5 @@ const domUrl = URL || window.URL || window.webkitURL || window;
             imageRes = {
-                data: image,
+                data: Object.assign(Object.assign({}, image), { svgData: svgColoredData }),
                 ratio: imageData.width / imageData.height,
-                replaceColor: (_b = imageData.replaceColor) !== null && _b !== void 0 ? _b : imageData.replace_color,
+                replaceColor: (_d = imageData.replaceColor) !== null && _d !== void 0 ? _d : imageData.replace_color,
                 source: imageData.src,
@@ -169,3 +210,3 @@ };
                 ratio: imageData.width / imageData.height,
-                replaceColor: (_c = imageData.replaceColor) !== null && _c !== void 0 ? _c : imageData.replace_color,
+                replaceColor: (_e = imageData.replaceColor) !== null && _e !== void 0 ? _e : imageData.replace_color,
                 source: imageData.src,
@@ -177,4 +218,4 @@ };
         }
-        const fill = (_d = imageData.fill) !== null && _d !== void 0 ? _d : particle.fill;
-        const close = (_e = imageData.close) !== null && _e !== void 0 ? _e : particle.close;
+        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 imageShape = {
@@ -190,2 +231,2 @@ image: imageRes,
 }
-_images = new WeakMap();
+_ImageDrawer_images = new WeakMap();

package.json

 {
   "name": "tsparticles-shape-image",
-  "version": "2.0.0-alpha.7",
-  "description": "tsParticles Image shape",
+  "version": "2.0.0-beta.0",
+  "description": "tsParticles image shape",
   "homepage": "https://particles.js.org/",
@@ -47,22 +47,5 @@ "repository": {
   "types": "index.d.ts",
-  "typesVersions": {
-    ">=4.0 <4.1": {
-      "*": [
-        "dist/ts4.0"
-      ]
-    },
-    ">=3.8 <4.0": {
-      "*": [
-        "dist/ts3.8"
-      ]
-    },
-    "<3.8": {
-      "*": [
-        "dist/ts3.4"
-      ]
-    }
-  },
   "dependencies": {
-    "tsparticles-engine": "^2.0.0-alpha.7"
+    "tsparticles-engine": "^2.0.0-beta.0"
   }
 }

README.md

@@ -1,5 +0,5 @@
-[![banner](https://cdn.matteobruni.it/images/particles/banner2.png)](https://particles.js.org)
+[![banner](https://particles.js.org/images/banner2.png)](https://particles.js.org)
 
-# tsparticles-shape-bubble
+# tsparticles-shape-image
 
-tsParticles bubble shape
+tsParticles image shape

tsparticles.shape.image.js

 /*!
- * Author : Matteo Bruni - https://www.matteobruni.it
+ * Author : Matteo Bruni
  * MIT license: https://opensource.org/licenses/MIT
@@ -7,3 +7,3 @@ * Demo / Generator : https://particles.js.org/
  * How to use? : Check the GitHub README
- * v2.0.0-alpha.7
+ * v2.0.0-beta.0
  */
@@ -19,3 +19,3 @@ (function webpackUniversalModuleDefinition(root, factory) {
 	}
-})(this, function(__WEBPACK_EXTERNAL_MODULE__414__) {
+})(this, function(__WEBPACK_EXTERNAL_MODULE__818__) {
 return /******/ (() => { // webpackBootstrap
@@ -25,6 +25,6 @@ /******/ 	"use strict";
 
-/***/ 414:
+/***/ 818:
 /***/ ((module) => {
 
-module.exports = __WEBPACK_EXTERNAL_MODULE__414__;
+module.exports = __WEBPACK_EXTERNAL_MODULE__818__;
 
@@ -101,3 +101,3 @@ /***/ })
 // EXTERNAL MODULE: external {"commonjs":"tsparticles-engine","commonjs2":"tsparticles-engine","amd":"tsparticles-engine","root":"window"}
-var external_commonjs_tsparticles_engine_commonjs2_tsparticles_engine_amd_tsparticles_engine_root_window_ = __webpack_require__(414);
+var external_commonjs_tsparticles_engine_commonjs2_tsparticles_engine_amd_tsparticles_engine_root_window_ = __webpack_require__(818);
 ;// CONCATENATED MODULE: ./dist/Utils.js
@@ -184,10 +184,18 @@ var __awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, P, generator) {
 }
-function replaceColorSvg(image, color, opacity) {
-  if (!image.svgData) {
+function replaceColorSvg(imageShape, color, opacity) {
+  const {
+    svgData
+  } = imageShape;
+
+  if (!svgData) {
     return "";
   }
 
-  const svgXml = image.svgData;
-  const rgbHex = /#([0-9A-F]{3,6})/gi;
-  return svgXml.replace(rgbHex, () => (0,external_commonjs_tsparticles_engine_commonjs2_tsparticles_engine_amd_tsparticles_engine_root_window_.getStyleFromHsl)(color, opacity));
+  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));
+  }
+
+  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)}`;
 }
@@ -227,27 +235,24 @@ ;// CONCATENATED MODULE: ./dist/ImageDrawer.js
 
-var __classPrivateFieldSet = undefined && undefined.__classPrivateFieldSet || function (receiver, privateMap, value) {
-  if (!privateMap.has(receiver)) {
-    throw new TypeError("attempted to set private field on non-instance");
-  }
+var __classPrivateFieldSet = undefined && undefined.__classPrivateFieldSet || function (receiver, state, value, kind, f) {
+  if (kind === "m") throw new TypeError("Private method is not writable");
+  if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+  return kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value), value;
+};
 
-  privateMap.set(receiver, value);
-  return value;
+var __classPrivateFieldGet = undefined && undefined.__classPrivateFieldGet || function (receiver, state, kind, f) {
+  if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+  return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
 
-var __classPrivateFieldGet = undefined && undefined.__classPrivateFieldGet || function (receiver, privateMap) {
-  if (!privateMap.has(receiver)) {
-    throw new TypeError("attempted to get private field on non-instance");
-  }
+var _ImageDrawer_images;
 
-  return privateMap.get(receiver);
-};
 
-var _images;
 
-
 class ImageDrawer {
   constructor() {
-    _images.set(this, void 0);
+    _ImageDrawer_images.set(this, void 0);
 
-    __classPrivateFieldSet(this, _images, []);
+    __classPrivateFieldSet(this, _ImageDrawer_images, [], "f");
   }
@@ -260,6 +265,6 @@
   getImages(container) {
-    const containerImages = __classPrivateFieldGet(this, _images).find(t => t.id === container.id);
+    const containerImages = __classPrivateFieldGet(this, _ImageDrawer_images, "f").find(t => t.id === container.id);
 
     if (!containerImages) {
-      __classPrivateFieldGet(this, _images).push({
+      __classPrivateFieldGet(this, _ImageDrawer_images, "f").push({
         id: container.id,
@@ -281,28 +286,76 @@ images: []
   init(container) {
-    const options = container.actualOptions;
-    const shapeOptions = options.particles.shape;
-    return this.initShape(container, shapeOptions);
+    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() {
-    __classPrivateFieldSet(this, _images, []);
+    __classPrivateFieldSet(this, _ImageDrawer_images, [], "f");
   }
 
-  initShape(container, shapeOptions) {
-    var _a;
+  loadImagesFromParticlesOptions(container, options) {
+    var _a, _b, _c;
 
     return ImageDrawer_awaiter(this, void 0, void 0, function* () {
-      const imageOptions = (_a = shapeOptions.options["image"]) !== null && _a !== void 0 ? _a : shapeOptions.options["images"];
+      const shapeOptions = options === null || options === void 0 ? void 0 : options.shape;
 
+      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;
+      }
+
+      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) {
-        const promises = [];
-
         for (const optionsImage of imageOptions) {
-          promises.push(this.loadImageShape(container, optionsImage));
+          yield this.loadImageShape(container, optionsImage);
         }
-
-        yield Promise.allSettled(promises);
       } 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);
+      }
     });
@@ -358,3 +411,3 @@ }
   loadShape(particle) {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f, _g;
 
@@ -365,4 +418,3 @@ if (particle.shape !== "image" && particle.shape !== "images") {
 
-    const container = particle.container;
-    const images = this.getImages(container).images;
+    const images = this.getImages(particle.container).images;
     const imageData = particle.shapeData;
@@ -378,3 +430,3 @@ const image = (_a = images.find(t => t.source === imageData.src)) !== null && _a !== void 0 ? _a : images[0];
     if (image.svgData !== undefined && imageData.replaceColor && color) {
-      const svgColoredData = replaceColorSvg(image, color, particle.opacity.value);
+      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], {
@@ -387,5 +439,7 @@ type: "image/svg+xml"
       imageRes = {
-        data: image,
+        data: Object.assign(Object.assign({}, image), {
+          svgData: svgColoredData
+        }),
         ratio: imageData.width / imageData.height,
-        replaceColor: (_b = imageData.replaceColor) !== null && _b !== void 0 ? _b : imageData.replace_color,
+        replaceColor: (_d = imageData.replaceColor) !== null && _d !== void 0 ? _d : imageData.replace_color,
         source: imageData.src
@@ -420,3 +474,3 @@ };
         ratio: imageData.width / imageData.height,
-        replaceColor: (_c = imageData.replaceColor) !== null && _c !== void 0 ? _c : imageData.replace_color,
+        replaceColor: (_e = imageData.replaceColor) !== null && _e !== void 0 ? _e : imageData.replace_color,
         source: imageData.src
@@ -430,4 +484,4 @@ };
 
-    const fill = (_d = imageData.fill) !== null && _d !== void 0 ? _d : particle.fill;
-    const close = (_e = imageData.close) !== null && _e !== void 0 ? _e : particle.close;
+    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 imageShape = {
@@ -444,3 +498,3 @@ image: imageRes,
 }
-_images = new WeakMap();
+_ImageDrawer_images = new WeakMap();
 ;// CONCATENATED MODULE: ./dist/index.js
@@ -447,0 +501,0 @@

tsparticles.shape.image.min.js

@@ -1,2 +0,2 @@
-/*! tsParticles Image Shape v2.0.0-alpha.7 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={414: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:()=>u});var e=r(414),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())}))};function o(e){return new Promise(((t,o)=>{if(!e)return void o("Error tsParticles - No image.src");const r={source:e,type:e.substr(e.length-3)},n=new Image;n.addEventListener("load",(()=>{r.element=n,t(r)})),n.addEventListener("error",(()=>{o(`Error tsParticles - loading image: ${e}`)})),n.src=e}))}function i(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 r=yield fetch(t.source);if(!r.ok)throw new Error("Error tsParticles - Image not found");return t.svgData=yield r.text(),t}))}var a,s=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())}))},l=function(e,t,o){if(!t.has(e))throw new TypeError("attempted to set private field on non-instance");return t.set(e,o),o},c=function(e,t){if(!t.has(e))throw new TypeError("attempted to get private field on non-instance");return t.get(e)};class d{constructor(){a.set(this,void 0),l(this,a,[])}getSidesCount(){return 12}getImages(e){const t=c(this,a).find((t=>t.id===e.id));return t||(c(this,a).push({id:e.id,images:[]}),this.getImages(e))}addImage(e,t){const o=this.getImages(e);null==o||o.images.push(t)}init(e){const t=e.actualOptions.particles.shape;return this.initShape(e,t)}destroy(){l(this,a,[])}initShape(e,t){var o;return s(this,void 0,void 0,(function*(){const r=null!==(o=t.options.image)&&void 0!==o?o:t.options.images;if(r instanceof Array){const t=[];for(const o of r)t.push(this.loadImageShape(e,o));yield Promise.allSettled(t)}else yield this.loadImageShape(e,r)}))}loadImageShape(e,t){return s(this,void 0,void 0,(function*(){try{const r=t.replaceColor?i:o,n=yield r(t.src);n&&this.addImage(e,n)}catch(e){console.warn(`tsParticles error - ${t.src} not found`)}}))}draw(e,t,o,r){var n,i;if(!e)return;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(t){var r,n,i,a,s;if("image"!==t.shape&&"images"!==t.shape)return;const l=t.container,c=this.getImages(l).images,d=t.shapeData,u=null!==(r=c.find((e=>e.source===d.src)))&&void 0!==r?r:c[0],p=t.getFillColor();let f;if(!u)return;if(void 0!==u.svgData&&d.replaceColor&&p){const r=function(t,o,r){return t.svgData?t.svgData.replace(/#([0-9A-F]{3,6})/gi,(()=>(0,e.getStyleFromHsl)(o,r))):""}(u,p,t.opacity.value),i=new Blob([r],{type:"image/svg+xml"}),a=URL||window.URL||window.webkitURL||window,s=a.createObjectURL(i),l=new Image;f={data:u,ratio:d.width/d.height,replaceColor:null!==(n=d.replaceColor)&&void 0!==n?n:d.replace_color,source:d.src},l.addEventListener("load",(()=>{const e=t.image;e&&(e.loaded=!0,u.element=l),a.revokeObjectURL(s)})),l.addEventListener("error",(()=>{a.revokeObjectURL(s),o(d.src).then((e=>{const o=t.image;o&&(u.element=null==e?void 0:e.element,o.loaded=!0)}))})),l.src=s}else f={data:u,loaded:!0,ratio:d.width/d.height,replaceColor:null!==(i=d.replaceColor)&&void 0!==i?i:d.replace_color,source:d.src};f.ratio||(f.ratio=1);const g={image:f,fill:null!==(a=d.fill)&&void 0!==a?a:t.fill,close:null!==(s=d.close)&&void 0!==s?s:t.close};t.image=g.image,t.fill=g.fill,t.close=g.close}}function u(e){const t=new d;e.addShape("image",t),e.addShape("images",t)}a=new WeakMap})(),n})()}));
+/*! tsParticles Image Shape v2.0.0-beta.0 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:()=>u});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,p=null!==(i=d.find((e=>e.source===u.src)))&&void 0!==i?i:d[0],f=t.getFillColor();let m;if(!p)return;if(void 0!==p.svgData&&u.replaceColor&&f){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)}`}(p,f,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({},p),{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,p.element=d),l.revokeObjectURL(c)})),d.addEventListener("error",(()=>{l.revokeObjectURL(c),o(u.src).then((e=>{const o=t.image;o&&(p.element=null==e?void 0:e.element,o.loaded=!0)}))})),d.src=c}else m={data:p,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 g={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=g.image,t.fill=g.fill,t.close=g.close}}function u(e){const t=new d;e.addShape("image",t),e.addShape("images",t)}a=new WeakMap})(),r})()}));

Utils.d.ts

@@ -25,2 +25,2 @@ import type { IHsl, IParticle } from "tsparticles-engine";
 export declare function downloadSvgImage(source: string): Promise<IImage | undefined>;
-export declare function replaceColorSvg(image: IImage, color: IHsl, opacity: number): string;
+export declare function replaceColorSvg(imageShape: IImage, color: IHsl, opacity: number): string;

Utils.js

@@ -52,9 +52,13 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
 }
-export function replaceColorSvg(image, color, opacity) {
-    if (!image.svgData) {
+export function replaceColorSvg(imageShape, color, opacity) {
+    const { svgData } = imageShape;
+    if (!svgData) {
         return "";
     }
-    const svgXml = image.svgData;
-    const rgbHex = /#([0-9A-F]{3,6})/gi;
-    return svgXml.replace(rgbHex, () => getStyleFromHsl(color, opacity));
+    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)}`;
 }

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

316736

decreased by-0.36%

Number of package files

11

decreased by-65.62%

Lines of code

762

decreased by-20.54%

Dependency changes

• Updatedtsparticles-engine@^2.0.0-beta.0