tsparticles 1.37.6 → 1.38.0

package/tsparticles.js

@@ -1289,7 +1289,7 @@
       }
     }
     class Constants {}
-    Constants.canvasClass = "tsparticles-canvas-el";
+    Constants.generatedAttribute = "generated";
     Constants.randomColorValue = "random";
     Constants.midColorValue = "mid";
     Constants.touchEndEvent = "touchend";
@@ -2249,9 +2249,9 @@
           clearTimeout(this.resizeTimeout);
           delete this.resizeTimeout;
         }
-        this.resizeTimeout = setTimeout((() => {
+        this.resizeTimeout = setTimeout((async () => {
           var _a;
-          return (_a = this.container.canvas) === null || _a === void 0 ? void 0 : _a.windowResize();
+          return await ((_a = this.container.canvas) === null || _a === void 0 ? void 0 : _a.windowResize());
         }), 500);
       }
       handleVisibilityChange() {
@@ -2659,15 +2659,12 @@
         this.initBackground();
         this.paint();
       }
-      loadCanvas(canvas, generatedCanvas) {
+      loadCanvas(canvas) {
         var _a;
-        if (!canvas.className) {
-          canvas.className = Constants.canvasClass;
-        }
         if (this.generatedCanvas) {
           (_a = this.element) === null || _a === void 0 ? void 0 : _a.remove();
         }
-        this.generatedCanvas = generatedCanvas !== null && generatedCanvas !== void 0 ? generatedCanvas : this.generatedCanvas;
+        this.generatedCanvas = canvas.dataset && Constants.generatedAttribute in canvas.dataset ? canvas.dataset[Constants.generatedAttribute] === "true" : this.generatedCanvas;
         this.element = canvas;
         this.originalStyle = deepExtend({}, this.element.style);
         this.size.height = canvas.offsetHeight;
@@ -2709,7 +2706,7 @@
           }));
         }
       }
-      windowResize() {
+      async windowResize() {
         if (!this.element) {
           return;
         }
@@ -2723,7 +2720,7 @@
           }
         }
         if (needsRefresh) {
-          container.refresh();
+          await container.refresh();
         }
       }
       resize() {
@@ -2924,6 +2921,16 @@
           element.style.width = originalStyle.width;
           element.style.height = originalStyle.height;
         }
+        for (const key in options.style) {
+          if (!key || !options.style) {
+            continue;
+          }
+          const value = options.style[key];
+          if (!value) {
+            continue;
+          }
+          element.style[key] = value;
+        }
       }
       paintBase(baseColor) {
         this.draw((ctx => {
@@ -6461,6 +6468,7 @@
         this.pauseOnBlur = true;
         this.pauseOnOutsideViewport = true;
         this.responsive = [];
+        this.style = {};
         this.themes = [];
         this.zLayers = 100;
       }
@@ -6537,6 +6545,7 @@
         }
         this.motion.load(data.motion);
         this.particles.load(data.particles);
+        this.style = deepExtend(this.style, data.style);
         Plugins.loadOptions(this, data);
         if (data.responsive !== undefined) {
           for (const responsive of data.responsive) {
@@ -7003,22 +7012,17 @@
           }
         }
         let canvasEl;
-        let generatedCanvas;
         if (domContainer.tagName.toLowerCase() === "canvas") {
           canvasEl = domContainer;
-          generatedCanvas = false;
+          canvasEl.dataset[Constants.generatedAttribute] = "false";
         } else {
           const existingCanvases = domContainer.getElementsByTagName("canvas");
           if (existingCanvases.length) {
             canvasEl = existingCanvases[0];
-            if (!canvasEl.className) {
-              canvasEl.className = Constants.canvasClass;
-            }
-            generatedCanvas = false;
+            canvasEl.dataset[Constants.generatedAttribute] = "false";
           } else {
-            generatedCanvas = true;
             canvasEl = document.createElement("canvas");
-            canvasEl.className = Constants.canvasClass;
+            canvasEl.dataset[Constants.generatedAttribute] = "true";
             canvasEl.style.width = "100%";
             canvasEl.style.height = "100%";
             domContainer.appendChild(canvasEl);
@@ -7030,7 +7034,7 @@
         } else {
           dom.push(newItem);
         }
-        newItem.canvas.loadCanvas(canvasEl, generatedCanvas);
+        newItem.canvas.loadCanvas(canvasEl);
         await newItem.start();
         return newItem;
       }