feat: fixed export plugins

demo/vanilla/app.ts

@@ -104,6 +104,9 @@ app.use("/plugin-easing-quad", express.static("./node_modules/tsparticles-plugin
 app.use("/plugin-easing-quart", express.static("./node_modules/tsparticles-plugin-easing-quart"));
 app.use("/plugin-easing-quint", express.static("./node_modules/tsparticles-plugin-easing-quint"));
 app.use("/plugin-easing-sine", express.static("./node_modules/tsparticles-plugin-easing-sine"));
+app.use("/plugin-export-image", express.static("./node_modules/tsparticles-plugin-export-image"));
+app.use("/plugin-export-json", express.static("./node_modules/tsparticles-plugin-export-json"));
+app.use("/plugin-export-video", express.static("./node_modules/tsparticles-plugin-export-video"));
 app.use("/plugin-hsv-color", express.static("./node_modules/tsparticles-plugin-hsv-color"));
 app.use("/plugin-infection", express.static("./node_modules/tsparticles-plugin-infection"));
 app.use("/plugin-motion", express.static("./node_modules/tsparticles-plugin-motion"));

demo/vanilla/package.json

@@ -88,6 +88,9 @@
     "tsparticles-plugin-easing-quint": "^2.10.1",
     "tsparticles-plugin-easing-sine": "^2.10.1",
     "tsparticles-plugin-emitters": "^2.10.1",
+    "tsparticles-plugin-export-image": "^2.10.1",
+    "tsparticles-plugin-export-json": "^2.10.1",
+    "tsparticles-plugin-export-video": "^2.10.1",
     "tsparticles-plugin-hsv-color": "^2.10.1",
     "tsparticles-plugin-infection": "^2.10.1",
     "tsparticles-plugin-motion": "^2.10.1",

demo/vanilla/public/javascripts/demo.js

@@ -150,6 +150,9 @@
         await loadMotionPlugin(tsParticles);
         await loadPolygonMaskPlugin(tsParticles);
         await loadSoundsPlugin(tsParticles);
+        await loadExportImagePlugin(tsParticles);
+        await loadExportJSONPlugin(tsParticles);
+        await loadExportVideoPlugin(tsParticles);
         await loadLightInteraction(tsParticles);
         await loadParticlesRepulseInteraction(tsParticles);
         await loadGradientUpdater(tsParticles);
@@ -248,7 +251,7 @@
             const container = tsParticles.domItem(0);
 
             if (container) {
-                container.exportImage(function(blob) {
+                container.export("image").then(function(blob) {
                     const modalBody = document.body.querySelector("#exportModal .modal-body .modal-body-content");
 
                     modalBody.innerHTML = "";
@@ -262,7 +265,7 @@
 
                     image.className = "img-fluid";
                     image.onload = () => URL.revokeObjectURL(image.src);
-                    image.source = URL.createObjectURL(blob);
+                    image.src = URL.createObjectURL(blob);
 
                     modalBody.appendChild(image);
 
@@ -277,13 +280,17 @@
             const container = tsParticles.domItem(0);
 
             if (container) {
-                const modalBody = document.body.querySelector("#exportModal .modal-body .modal-body-content");
+                container.export("json").then(function(blob) {
+                    blob.text().then(function(json) {
+                        const modalBody = document.body.querySelector("#exportModal .modal-body .modal-body-content");
 
-                modalBody.innerHTML = `<pre>${container.exportConfiguration()}</pre>`;
+                        modalBody.innerHTML = `<pre>${json}</pre>`;
 
-                const exportModal = new bootstrap.Modal(document.getElementById("exportModal"));
+                        const exportModal = new bootstrap.Modal(document.getElementById("exportModal"));
 
-                exportModal.show();
+                        exportModal.show();
+                    });
+                });
             }
         });
 

demo/vanilla/views/index.pug

@@ -151,6 +151,9 @@ html(lang="en")
         script(src="/plugin-easing-quart/tsparticles.plugin.easing.quart.js")
         script(src="/plugin-easing-quint/tsparticles.plugin.easing.quint.js")
         script(src="/plugin-easing-sine/tsparticles.plugin.easing.sine.js")
+        script(src="/plugin-export-image/tsparticles.plugin.export.image.js")
+        script(src="/plugin-export-json/tsparticles.plugin.export.json.js")
+        script(src="/plugin-export-video/tsparticles.plugin.export.video.js")
         script(src="/plugin-hsv-color/tsparticles.plugin.hsvColor.js")
         script(src="/plugin-infection/tsparticles.plugin.infection.js")
         script(src="/plugin-motion/tsparticles.plugin.motion.js")

engine/src/Core/Container.ts

@@ -423,7 +423,7 @@ export class Container {
         });
     }
 
-    async export(type: string, options: Record<string, unknown>): Promise<Blob | undefined> {
+    async export(type: string, options: Record<string, unknown> = {}): Promise<Blob | undefined> {
         for (const [, plugin] of this.plugins) {
             if (!plugin.export) {
                 continue;

plugins/exports/image/src/index.ts

@@ -9,7 +9,7 @@ class ExportImagePlugin implements IPlugin {
     private readonly _engine;
 
     constructor(engine: Engine) {
-        this.id = "sounds";
+        this.id = "export-image";
 
         this._engine = engine;
     }

plugins/exports/json/src/index.ts

@@ -9,7 +9,7 @@ class ExportJSONPlugin implements IPlugin {
     private readonly _engine;
 
     constructor(engine: Engine) {
-        this.id = "sounds";
+        this.id = "export-json";
 
         this._engine = engine;
     }

plugins/exports/video/src/index.ts

@@ -9,7 +9,7 @@ class ExportVideoPlugin implements IPlugin {
     private readonly _engine;
 
     constructor(engine: Engine) {
-        this.id = "sounds";
+        this.id = "export-video";
 
         this._engine = engine;
     }