From 775e7bd53b9615fe471660d106c5747bf0cfda3b Mon Sep 17 00:00:00 2001
From: Matteo Bruni <176620+matteobruni@users.noreply.github.com>
Date: Mon, 10 Jul 2023 02:22:47 +0200
Subject: [PATCH] feat: fixed export plugins
---
demo/vanilla/app.ts | 3 +++
demo/vanilla/package.json | 3 +++
demo/vanilla/public/javascripts/demo.js | 19 +++++++++++++------
demo/vanilla/views/index.pug | 3 +++
engine/src/Core/Container.ts | 2 +-
plugins/exports/image/src/index.ts | 2 +-
plugins/exports/json/src/index.ts | 2 +-
plugins/exports/video/src/index.ts | 2 +-
pnpm-lock.yaml | 9 +++++++++
9 files changed, 35 insertions(+), 10 deletions(-)
diff --git a/demo/vanilla/app.ts b/demo/vanilla/app.ts
index 4620ef85004..8dc18705479 100644
--- a/demo/vanilla/app.ts
+++ b/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"));
diff --git a/demo/vanilla/package.json b/demo/vanilla/package.json
index e16a3338a80..2bbe4871c93 100644
--- a/demo/vanilla/package.json
+++ b/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",
diff --git a/demo/vanilla/public/javascripts/demo.js b/demo/vanilla/public/javascripts/demo.js
index 782804cc7ce..56ae84af24c 100644
--- a/demo/vanilla/public/javascripts/demo.js
+++ b/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 = `${container.exportConfiguration()}`;
+ modalBody.innerHTML = `${json}`;
- const exportModal = new bootstrap.Modal(document.getElementById("exportModal"));
+ const exportModal = new bootstrap.Modal(document.getElementById("exportModal"));
- exportModal.show();
+ exportModal.show();
+ });
+ });
}
});
diff --git a/demo/vanilla/views/index.pug b/demo/vanilla/views/index.pug
index 3c7fdd0567a..85fcfafcdde 100644
--- a/demo/vanilla/views/index.pug
+++ b/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")
diff --git a/engine/src/Core/Container.ts b/engine/src/Core/Container.ts
index a3fa9aa172f..cf2cfbf8de6 100644
--- a/engine/src/Core/Container.ts
+++ b/engine/src/Core/Container.ts
@@ -423,7 +423,7 @@ export class Container {
});
}
- async export(type: string, options: Record): Promise {
+ async export(type: string, options: Record = {}): Promise {
for (const [, plugin] of this.plugins) {
if (!plugin.export) {
continue;
diff --git a/plugins/exports/image/src/index.ts b/plugins/exports/image/src/index.ts
index 389b8ec6692..53dc22702d0 100644
--- a/plugins/exports/image/src/index.ts
+++ b/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;
}
diff --git a/plugins/exports/json/src/index.ts b/plugins/exports/json/src/index.ts
index 5de99f48b7f..d53b7b88812 100644
--- a/plugins/exports/json/src/index.ts
+++ b/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;
}
diff --git a/plugins/exports/video/src/index.ts b/plugins/exports/video/src/index.ts
index 5a4b9a91b28..d84f964e4eb 100644
--- a/plugins/exports/video/src/index.ts
+++ b/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;
}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2e11855d660..37de15d4968 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -551,6 +551,15 @@ importers:
tsparticles-plugin-emitters:
specifier: ^2.10.1
version: link:../../plugins/emitters/dist
+ tsparticles-plugin-export-image:
+ specifier: ^2.10.1
+ version: link:../../plugins/exports/image/dist
+ tsparticles-plugin-export-json:
+ specifier: ^2.10.1
+ version: link:../../plugins/exports/json/dist
+ tsparticles-plugin-export-video:
+ specifier: ^2.10.1
+ version: link:../../plugins/exports/video/dist
tsparticles-plugin-hsv-color:
specifier: ^2.10.1
version: link:../../plugins/hsvColor/dist