npm - tsparticles - Versions diffs - 1.38.0 → 1.39.3 - Mend

tsparticles 1.38.0 → 1.39.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1513) hide show

package/README.md CHANGED Viewed

@@ -1,11 +1,11 @@
-[![banner](https://particles.js.org/images/banner2.png)](https://particles.js.org)
+[![banner](https://particles.js.org/images/banner3.png)](https://particles.js.org)
 # tsParticles - TypeScript Particles
 **A lightweight TypeScript library for creating particles. Dependency free (\*), browser ready and compatible with
 React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Riot.js, Solid.js, and Web Components**
-[![Rate on Openbase](https://badges.openbase.com/js/rating/tsparticles.svg)](https://openbase.com/js/tsparticles?utm_source=embedded&utm_medium=badge&utm_campaign=rate-badge) [![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles/badge?style=rounded)](https://www.jsdelivr.com/package/npm/tsparticles) [![Cdnjs](https://img.shields.io/cdnjs/v/tsparticles)](https://cdnjs.com/libraries/tsparticles) [![npmjs](https://badge.fury.io/js/tsparticles.svg)](https://www.npmjs.com/package/tsparticles) [![npm](https://img.shields.io/npm/dm/tsparticles)](https://www.npmjs.com/package/tsparticles) [![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/) [![CodeFactor](https://www.codefactor.io/repository/github/matteobruni/tsparticles/badge)](https://www.codefactor.io/repository/github/matteobruni/tsparticles) [![Codacy Badge](https://api.codacy.com/project/badge/Grade/b983aaf3461a4c48b1e2eecce1ff1d74)](https://www.codacy.com/manual/ar3s/tsparticles?utm_source=github.com&utm_medium=referral&utm_content=matteobruni/tsparticles&utm_campaign=Badge_Grade)
+[![Rate on Openbase](https://badges.openbase.com/js/rating/tsparticles.svg)](https://openbase.com/js/tsparticles?utm_source=embedded&utm_medium=badge&utm_campaign=rate-badge) [![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles/badge?style=rounded)](https://www.jsdelivr.com/package/npm/tsparticles) [![Cdnjs](https://img.shields.io/cdnjs/v/tsparticles)](https://cdnjs.com/libraries/tsparticles) [![npmjs](https://badge.fury.io/js/tsparticles.svg)](https://www.npmjs.com/package/tsparticles) [![npm](https://img.shields.io/npm/dm/tsparticles)](https://www.npmjs.com/package/tsparticles) [![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/) [![CodeFactor](https://www.codefactor.io/repository/github/matteobruni/tsparticles/badge)](https://www.codefactor.io/repository/github/matteobruni/tsparticles) [![Codacy Badge](https://api.codacy.com/project/badge/Grade/b983aaf3461a4c48b1e2eecce1ff1d74)](https://www.codacy.com/manual/ar3s/tsparticles?utm_source=github.com&utm_medium=referral&utm_content=matteobruni/tsparticles&utm_campaign=Badge_Grade) [![Gitpod Ready-to-Code](https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod)](https://gitpod.io/#https://github.com/matteobruni/tsparticles) [![Run on Repl.it](https://repl.it/badge/github/matteobruni/tsparticles)](https://repl.it/github/matteobruni/tsparticles)
 [![Slack](https://particles.js.org/images/slack.png)](https://join.slack.com/t/tsparticles/shared_invite/enQtOTcxNTQxNjQ4NzkxLWE2MTZhZWExMWRmOWI5MTMxNjczOGE1Yjk0MjViYjdkYTUzODM3OTc5MGQ5MjFlODc4MzE0N2Q1OWQxZDc1YzI) [![Discord](https://particles.js.org/images/discord.png)](https://discord.gg/hACwv45Hme) [![Telegram](https://particles.js.org/images/telegram.png)](https://t.me/tsparticles)
@@ -30,6 +30,19 @@ React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Riot.j
   - [VueJS 3.x](#VueJS-3x)
   - [Web Components](#Web-Components)
   - [WordPress](#WordPress)
+- [Presets](#Presets)
+  - [Big Circles](#Big-Circles)
+  - [Bubbles](#Bubbles)
+  - [Confetti](#Confetti)
+  - [Fire](#Fire)
+  - [Firefly](#Firefly)
+  - [Fireworks](#Fireworks)
+  - [Fountain](#fountain)
+  - [Links](#links)
+  - [Sea Anemone](#Sea-Anemone)
+  - [Snow](#Snow)
+  - [Stars](#Stars)
+  - [Triangles](#Triangles)
 - [Templates and Resources](#Templates-and-Resources)
 - [Demo / Generator](#Demo--Generator)
   - [Characters as particles](#Characters-as-particles)
@@ -59,8 +72,9 @@ links you need, and _don't be scared by **TypeScript**, it's just the source lan
 CDNs and `npm` have all the sources you need in **Javascript**, a bundle browser ready (tsparticles.min.js) and all
 files splitted for `import` syntax.
-**If you are still interested** some lines below there are some instructions for migrating from the old particles.js
-library.
+**If you are interested** there are some _simple instructions_
+just [below](https://github.com/matteobruni/tsparticles/blob/main/README.md#library-installation) to guide you to
+migrate from the old particles.js library.
 ## **_Library installation_**
@@ -315,59 +329,189 @@ the `Premium Addons for Elementor` plugin collection.
 ---
+## Presets
+There are some presets ready to be used in this repository, and they have also a bundle file that contains everything
+needed to run.
+### Big Circles
+[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-big-circles/badge)](https://www.jsdelivr.com/package/npm/tsparticles-preset-big-circles) [![npmjs](https://badge.fury.io/js/tsparticles-preset-big-circles.svg)](https://www.npmjs.com/package/tsparticles-preset-big-circles) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-big-circles)](https://www.npmjs.com/package/tsparticles-preset-big-circles)
+This preset loads big colored circles moving upwards on a white background.
+[![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/bigCircles/images/sample.png)](https://particles.js.org/samples/presets/bigCircles)
+You can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/preset/bigCircles/README.md)
+### Bubbles
+[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-bubbles/badge)](https://www.jsdelivr.com/package/npm/tsparticles) [![npmjs](https://badge.fury.io/js/tsparticles-preset-bubbles.svg)](https://www.npmjs.com/package/tsparticles-preset-bubbles) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-bubbles)](https://www.npmjs.com/package/tsparticles-preset-bubbles)
+This preset loads colored bubbles coming from the bottom of the screen on a white background.
+[![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/bubbles/images/sample.png)](https://particles.js.org/samples/presets/bubbles)
+You can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/preset/bubbles/README.md)
+### Confetti
+[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-confetti/badge)](https://www.jsdelivr.com/package/npm/tsparticles-preset-confetti) [![npmjs](https://badge.fury.io/js/tsparticles-preset-confetti.svg)](https://www.npmjs.com/package/tsparticles-preset-confetti) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-confetti)](https://www.npmjs.com/package/tsparticles-preset-confetti)
+This preset loads white and red confetti launched from the screen center on a transparent background.
+[![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/confetti/images/sample.png)](https://particles.js.org/samples/presets/confetti)
+You can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/preset/confetti/README.md)
+### Fire
+[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-fire/badge)](https://www.jsdelivr.com/package/npm/tsparticles-preset-fire) [![npmjs](https://badge.fury.io/js/tsparticles-preset-fire.svg)](https://www.npmjs.com/package/tsparticles-preset-fire) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-fire)](https://www.npmjs.com/package/tsparticles-preset-fire)
+This preset loads a faded red to black background with particles colored like fire and ash sparks.
+[![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/fire/images/sample.png)](https://particles.js.org/samples/presets/fire)
+You can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/preset/fire/README.md)
+### Firefly
+[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-firefly/badge)](https://www.jsdelivr.com/package/npm/tsparticles-preset-firefly) [![npmjs](https://badge.fury.io/js/tsparticles-preset-firefly.svg)](https://www.npmjs.com/package/tsparticles-preset-firefly) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-firefly)](https://www.npmjs.com/package/tsparticles-preset-firefly)
+This preset loads a mouse trail made with small fading particles like little fireflies.
+[![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/firefly/images/sample.png)](https://particles.js.org/samples/presets/firefly)
+You can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/preset/firefly/README.md)
+### Fireworks
+[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-fireworks/badge)](https://www.jsdelivr.com/package/npm/tsparticles-preset-fireworks) [![npmjs](https://badge.fury.io/js/tsparticles-preset-fireworks.svg)](https://www.npmjs.com/package/tsparticles-preset-fireworks) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-fireworks)](https://www.npmjs.com/package/tsparticles-preset-fireworks)
+This preset loads a beautiful fireworks effect.
+[![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/fireworks/images/sample.png)](https://particles.js.org/samples/presets/fireworks)
+You can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/preset/fireworks/README.md)
+### Fountain
+[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-fountain/badge)](https://www.jsdelivr.com/package/npm/tsparticles-preset-fountain) [![npmjs](https://badge.fury.io/js/tsparticles-preset-fountain.svg)](https://www.npmjs.com/package/tsparticles-preset-fountain) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-fountain)](https://www.npmjs.com/package/tsparticles-preset-fountain)
+[![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/fountain/images/sample.png)](https://particles.js.org/samples/presets/fountain)
+You can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/preset/fountain/README.md)
+### Links
+[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-links/badge)](https://www.jsdelivr.com/package/npm/tsparticles-preset-links) [![npmjs](https://badge.fury.io/js/tsparticles-preset-links.svg)](https://www.npmjs.com/package/tsparticles-preset-links) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-links)](https://www.npmjs.com/package/tsparticles-preset-links)
+[![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/links/images/sample.png)](https://particles.js.org/samples/presets/links)
+You can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/preset/links/README.md)
+### Sea Anemone
+[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-sea-anemone/badge)](https://www.jsdelivr.com/package/npm/tsparticles-preset-sea-anemone) [![npmjs](https://badge.fury.io/js/tsparticles-preset-sea-anemone.svg)](https://www.npmjs.com/package/tsparticles-preset-sea-anemone) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-sea-anemone)](https://www.npmjs.com/package/tsparticles-preset-sea-anemone)
+[![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/seaAnemone/images/sample.png)](https://particles.js.org/samples/presets/seaAnemone)
+You can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/preset/seaAnemone/README.md)
+### Snow
+[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-snow/badge)](https://www.jsdelivr.com/package/npm/tsparticles-preset-snow) [![npmjs](https://badge.fury.io/js/tsparticles-preset-snow.svg)](https://www.npmjs.com/package/tsparticles-preset-snow) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-snow)](https://www.npmjs.com/package/tsparticles-preset-snow)
+[![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/snow/images/sample.png)](https://particles.js.org/samples/presets/snow)
+You can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/preset/snow/README.md)
+### Stars
+[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-stars/badge)](https://www.jsdelivr.com/package/npm/tsparticles-preset-stars) [![npmjs](https://badge.fury.io/js/tsparticles-preset-stars.svg)](https://www.npmjs.com/package/tsparticles-preset-stars) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-stars)](https://www.npmjs.com/package/tsparticles-preset-stars)
+[![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/stars/images/sample.png)](https://particles.js.org/samples/presets/stars)
+You can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/preset/stars/README.md)
+### Triangles
+[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-preset-triangles/badge)](https://www.jsdelivr.com/package/npm/tsparticles-preset-triangles) [![npmjs](https://badge.fury.io/js/tsparticles-preset-triangles.svg)](https://www.npmjs.com/package/tsparticles-preset-triangles) [![npmjs](https://img.shields.io/npm/dt/tsparticles-preset-triangles)](https://www.npmjs.com/package/tsparticles-preset-triangles)
+[![demo](https://raw.githubusercontent.com/matteobruni/tsparticles/main/presets/triangles/images/sample.png)](https://particles.js.org/samples/presets/triangles)
+You can find the instructions [here](https://github.com/matteobruni/tsparticles/blob/main/preset/triangles/README.md)
+---
+## Templates and Resources
+You can find some tsParticles related templates [here](https://github.com/tsparticles/templates). The templates are
+created for _Vanilla Javascript_, _ReactJS_, _VueJS_, _Angular_, _SvelteJS_ and other frameworks.
+The templates will vary, new ones can be created or older ones updated with latest features or changed to a better
+style. Check them out once in a while.
+If you created some good design with _tsParticles_ feel free to submit a pull request with your cool template, you'll be
+credited as the template author!
+<https://github.com/tsparticles/templates>
+---
 ## **_Demo / Generator_**
-<https://particles.js.org/>
+<https://particles.js.org/samples>
-[![Particles demo](https://particles.js.org/images/demo.png?v=1.8.1)](https://particles.js.org/)
+[![Particles demo](https://particles.js.org/images/demo2.png?v=1.39.1)](https://particles.js.org/samples)
 ---
 ### Characters as particles
-[![Particles chars demo](https://media.giphy.com/media/JsssOXz72bM6jGEZ0s/giphy.gif)](https://particles.js.org/#chars)
+[![Particles chars demo](https://media.giphy.com/media/JsssOXz72bM6jGEZ0s/giphy.gif)](https://particles.js.org/samples#chars)
 ---
 ### Mouse hover connections
-[![Particles mouse connections demo](https://media.giphy.com/media/XzvZThpVbxHxMYz5xt/giphy.gif)](https://particles.js.org/#connect)
+[![Particles mouse connections demo](https://media.giphy.com/media/XzvZThpVbxHxMYz5xt/giphy.gif)](https://particles.js.org/samples#connect)
 ---
 ### Polygon mask
-[![tsParticles Polygon Mask demo](https://media.giphy.com/media/lNRfiSgaMFbL4FMhW6/giphy.gif)](https://particles.js.org/#polygonMask)
+[![tsParticles Polygon Mask demo](https://media.giphy.com/media/lNRfiSgaMFbL4FMhW6/giphy.gif)](https://particles.js.org/samples#polygonMask)
 ---
 ### Animated stars
-[![Particles NASA demo](https://media.giphy.com/media/cLqGsnh7FKRVMgPIWE/giphy.gif)](https://particles.js.org/#nasa)
+[![Particles NASA demo](https://media.giphy.com/media/cLqGsnh7FKRVMgPIWE/giphy.gif)](https://particles.js.org/samples#nasa)
 ---
 ### Nyan cat flying on scrolling stars
-[![Particles Nyan Cat demo](https://media.giphy.com/media/LpX2oNc9ZMgIhIXQL9/giphy.gif)](https://particles.js.org/#nyancat2)
+[![Particles Nyan Cat demo](https://media.giphy.com/media/LpX2oNc9ZMgIhIXQL9/giphy.gif)](https://particles.js.org/samples#nyancat2)
 ---
 ### Snow particles
-[![tsParticles Snow demo](https://media.giphy.com/media/gihwUFbmiubbkdzEMX/giphy.gif)](https://particles.js.org/#snow)
+[![tsParticles Snow demo](https://media.giphy.com/media/gihwUFbmiubbkdzEMX/giphy.gif)](https://particles.js.org/samples#snow)
 ---
 ### Background Mask particles
-[![tsParticles Background Mask demo](https://media.giphy.com/media/dWraWgqInWFGWiOyRu/giphy.gif)](https://particles.js.org/#background)
+[![tsParticles Background Mask demo](https://media.giphy.com/media/dWraWgqInWFGWiOyRu/giphy.gif)](https://particles.js.org/samples#background)
 ---
 #### COVID-19 SARS-CoV-2 particles
-[![tsParticles COVID-19 demo](https://media.giphy.com/media/fsVN1ZHksgBIXNIbr1/giphy.gif)](https://particles.js.org/#virus)
+[![tsParticles COVID-19 demo](https://media.giphy.com/media/fsVN1ZHksgBIXNIbr1/giphy.gif)](https://particles.js.org/samples#virus)
 _Don't click! DON'T CLICK! OH NO IT'S SPREADING!!!!_
@@ -377,14 +521,14 @@ _Don't click! DON'T CLICK! OH NO IT'S SPREADING!!!!_
 **particles.json**
-You can find a sample config [here](https://particles.js.org/docs/modules/_core_container_.html) 📖
+You can find some config samples [here](https://github.com/matteobruni/tsparticles/tree/main/website/presets) 📖
 ---
 ## **_Options_**
 You can find all options
-available [here](https://particles.js.org/docs/interfaces/_options_interfaces_ioptions_.ioptions.html) 📖
+available [here](https://particles.js.org/docs/interfaces/Options_Interfaces_IOptions.IOptions.html) 📖
 ## Want to see it in action and try it?
@@ -428,4 +572,4 @@ tsParticles now supports some customizations 🥳.
 **You can create your own plugins**
-_Read more [here](https://particles.js.org/docs/modules/_core_interfaces_iplugin_.html)...\_
+_Read more [here](https://particles.js.org/docs/modules/Core_Interfaces_IPlugin.html)..._

package/Shapes/Circle/CircleDrawer.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import type { IParticle, IShapeDrawer } from "../../Core/Interfaces";
+import type { IParticle, IShapeDrawer } from "../../Core";
 export declare class CircleDrawer implements IShapeDrawer {
     getSidesCount(): number;
     draw(context: CanvasRenderingContext2D, particle: IParticle, radius: number): void;

package/Shapes/Circle/index.d.ts CHANGED Viewed

@@ -1,2 +1,2 @@
-import type { Main } from "../../main";
-export declare function loadCircleShape(tsParticles: Main): Promise<void>;
+import type { Engine } from "../../engine";
+export declare function loadCircleShape(engine: Engine): Promise<void>;

package/Shapes/Circle/index.js CHANGED Viewed

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.loadCircleShape = void 0;
 const CircleDrawer_1 = require("./CircleDrawer");
-async function loadCircleShape(tsParticles) {
-    await tsParticles.addShape("circle", new CircleDrawer_1.CircleDrawer());
+async function loadCircleShape(engine) {
+    await engine.addShape("circle", new CircleDrawer_1.CircleDrawer());
 }
 exports.loadCircleShape = loadCircleShape;

package/Shapes/Image/ImageDrawer.d.ts CHANGED Viewed

@@ -1,7 +1,5 @@
-import type { IParticle, IShapeDrawer } from "../../Core/Interfaces";
-import type { Container } from "../../Core/Container";
-import type { IImage } from "./Utils";
-import { Particle } from "../../Core/Particle";
+import type { Container, IShapeDrawer, Particle } from "../../Core";
+import type { IImage, IImageParticle } from "./Utils";
 interface ContainerImage {
     id: string;
     images: IImage[];
@@ -12,11 +10,9 @@ export declare class ImageDrawer implements IShapeDrawer {
     getSidesCount(): number;
     getImages(container: Container): ContainerImage;
     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 {};

package/Shapes/Image/ImageDrawer.js CHANGED Viewed

@@ -13,9 +13,7 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
 var _ImageDrawer_images;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ImageDrawer = void 0;
-const Utils_1 = require("../../Utils");
-const Enums_1 = require("../../Enums");
-const Utils_2 = require("./Utils");
+const Utils_1 = require("./Utils");
 class ImageDrawer {
     constructor() {
         _ImageDrawer_images.set(this, void 0);
@@ -41,86 +39,31 @@ class ImageDrawer {
         const containerImages = this.getImages(container);
         containerImages === null || containerImages === void 0 ? void 0 : containerImages.images.push(image);
     }
-    async init(container) {
-        await this.loadImagesFromParticlesOptions(container, container.actualOptions.particles);
-        await this.loadImagesFromParticlesOptions(container, container.actualOptions.interactivity.modes.trail.particles);
-        for (const manualParticle of container.actualOptions.manualParticles) {
-            await this.loadImagesFromParticlesOptions(container, manualParticle.options);
-        }
-        const emitterOptions = container.actualOptions;
-        if (emitterOptions.emitters) {
-            if (emitterOptions.emitters instanceof Array) {
-                for (const emitter of emitterOptions.emitters) {
-                    await this.loadImagesFromParticlesOptions(container, emitter.particles);
-                }
-            }
-            else {
-                await this.loadImagesFromParticlesOptions(container, emitterOptions.emitters.particles);
-            }
-        }
-        const interactiveEmitters = emitterOptions.interactivity.modes.emitters;
-        if (interactiveEmitters) {
-            if (interactiveEmitters instanceof Array) {
-                for (const emitter of interactiveEmitters) {
-                    await this.loadImagesFromParticlesOptions(container, emitter.particles);
-                }
-            }
-            else {
-                await this.loadImagesFromParticlesOptions(container, interactiveEmitters.particles);
-            }
-        }
-    }
     destroy() {
         __classPrivateFieldSet(this, _ImageDrawer_images, [], "f");
     }
-    async loadImagesFromParticlesOptions(container, options) {
-        var _a, _b, _c;
-        const shapeOptions = options === null || options === void 0 ? void 0 : options.shape;
-        if (!(shapeOptions === null || shapeOptions === void 0 ? void 0 : shapeOptions.type) ||
-            !shapeOptions.options ||
-            (!(0, Utils_1.isInArray)(Enums_1.ShapeType.image, shapeOptions.type) && !(0, Utils_1.isInArray)(Enums_1.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[Enums_1.ShapeType.images]) !== null && _a !== void 0 ? _a : shapeOptions.options[Enums_1.ShapeType.image];
-        if (imageOptions instanceof Array) {
-            for (const optionsImage of imageOptions) {
-                await this.loadImageShape(container, optionsImage);
-            }
-        }
-        else {
-            await 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];
-                await 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) {
-            await this.loadImagesFromParticlesOptions(container, options === null || options === void 0 ? void 0 : options.destroy.split.particles);
-        }
-    }
     async loadImageShape(container, imageShape) {
+        const source = imageShape.src;
+        if (!source) {
+            throw new Error("Error tsParticles - No image.src");
+        }
         try {
-            const imageFunc = imageShape.replaceColor ? Utils_2.downloadSvgImage : Utils_2.loadImage;
-            const image = await imageFunc(imageShape.src);
-            if (image) {
-                this.addImage(container, image);
-            }
+            const image = {
+                source: source,
+                type: source.substr(source.length - 3),
+                error: false,
+                loading: true,
+            };
+            this.addImage(container, image);
+            const imageFunc = imageShape.replaceColor ? Utils_1.downloadSvgImage : Utils_1.loadImage;
+            await imageFunc(image);
         }
         catch (_a) {
-            console.warn(`tsParticles error - ${imageShape.src} not found`);
+            throw new Error(`tsParticles error - ${imageShape.src} not found`);
         }
     }
     draw(context, particle, radius, opacity) {
         var _a, _b;
-        if (!context) {
-            return;
-        }
         const image = particle.image;
         const element = (_a = image === null || image === void 0 ? void 0 : image.data) === null || _a === void 0 ? void 0 : _a.element;
         if (!element) {
@@ -140,64 +83,41 @@ class ImageDrawer {
         }
     }
     loadShape(particle) {
-        var _a, _b, _c, _d, _e, _f, _g;
+        var _a, _b, _c;
         if (particle.shape !== "image" && particle.shape !== "images") {
             return;
         }
         const images = this.getImages(particle.container).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 = (0, Utils_2.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);
-                (0, Utils_2.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 = (0, Utils_1.replaceImageColor)(image, imageData, color, particle);
         }
         else {
             imageRes = {
                 data: image,
                 loaded: true,
                 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,
             };
         }
         if (!imageRes.ratio) {
             imageRes.ratio = 1;
         }
-        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 = {
             image: imageRes,
             fill,

package/Shapes/Image/Utils.d.ts CHANGED Viewed

@@ -1,9 +1,12 @@
-import type { IHsl, IParticle } from "../../Core/Interfaces";
+import type { IHsl, IParticle, Particle } from "../../Core";
+import type { IImageShape } from "../../Options/Interfaces/Particles/Shape/IImageShape";
 export interface IImage {
     source: string;
     type: string;
     element?: HTMLImageElement;
     svgData?: string;
+    error: boolean;
+    loading: boolean;
 }
 export interface IParticleImage {
     source: string;
@@ -18,8 +21,8 @@ export interface ContainerImage {
     images: IImage[];
 }
 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;