feat: added clear flag, enabled by default, if disabled, the canvas w…

…on't be cleared
tsparticles · Dec 4, 2023 · 299784c · 299784c
1 parent 17750ea
commit 299784c
Show file tree

Hide file tree

Showing 6 changed files with 121 additions and 7 deletions.
diff --git a/engine/src/Core/Canvas.ts b/engine/src/Core/Canvas.ts
@@ -98,7 +98,7 @@ export class Canvas {
             } else if (trailFill.image) {
                 this._paintImage(trailFill.image, trailFill.opacity);
             }
-        } else {
+        } else if (options.clear) {
             this.draw((ctx) => {
                 clear(ctx, this.size);
             });

diff --git a/engine/src/Options/Classes/Options.ts b/engine/src/Options/Classes/Options.ts
@@ -32,6 +32,7 @@ export class Options implements IOptions, IOptionLoader<IOptions> {
     autoPlay;
     readonly background;
     readonly backgroundMask;
+    clear: boolean;
     defaultThemes: DefaultThemes;
     delay: RangeValue;
     detectRetina;
@@ -60,6 +61,7 @@ export class Options implements IOptions, IOptionLoader<IOptions> {
         this.autoPlay = true;
         this.background = new Background();
         this.backgroundMask = new BackgroundMask();
+        this.clear = true;
         this.defaultThemes = {};
         this.delay = 0;
         this.fullScreen = new FullScreen();
@@ -95,6 +97,14 @@ export class Options implements IOptions, IOptionLoader<IOptions> {
             this.autoPlay = data.autoPlay;
         }
 
+        if (data.clear !== undefined) {
+            this.clear = data.clear;
+        }
+
+        if (data.name !== undefined) {
+            this.name = data.name;
+        }
+
         if (data.delay !== undefined) {
             this.delay = setRangeValue(data.delay);
         }

diff --git a/engine/src/Options/Interfaces/IOptions.ts b/engine/src/Options/Interfaces/IOptions.ts
@@ -37,6 +37,11 @@ export interface IOptions {
      */
     backgroundMask: IBackgroundMask;
 
+    /**
+     * Clears the canvas on every frame if enabled
+     */
+    clear: boolean;
+
     /**
      * The initial delay before starting the animation
      */

diff --git a/utils/configs/src/n/index.ts b/utils/configs/src/n/index.ts
@@ -1,12 +1,14 @@
 import nasa from "./nasa.js";
-import noconfig from "./noconfig.js";
+import noClear from "./noClear.js";
+import noConfig from "./noConfig.js";
 import noisePlanes from "./noisePlanes.js";
 import nyancat from "./nyancat.js";
 import nyancat2 from "./nyancat2.js";
 
 export default {
     nasa,
-    noconfig,
+    noClear,
+    noConfig,
     noisePlanes,
     nyancat,
     nyancat2,

diff --git a/utils/configs/src/n/noClear.ts b/utils/configs/src/n/noClear.ts
@@ -0,0 +1,101 @@
+import type { ISourceOptions } from "@tsparticles/engine";
+
+const options: ISourceOptions = {
+    name: "No Clear",
+    clear: false,
+    interactivity: {
+        events: {
+            onHover: {
+                enable: true,
+                mode: "trail",
+            },
+        },
+        modes: {
+            trail: {
+                delay: 0.01,
+                quantity: 1,
+                pauseOnStop: true,
+            },
+        },
+    },
+    particles: {
+        color: {
+            value: [
+                "#80F31F",
+                "#ED8B08",
+                "#ED1868",
+                "#800CE0",
+                "#1274F7",
+                "#12E797",
+                "#7FF31F",
+                "#ED8B08",
+                "#ED1868",
+                "#800CE0",
+                "#1274F7",
+                "#12E797",
+                "#7FF31F",
+                "#ED8B08",
+                "#ED1868",
+                "#800CE0",
+                "#1274F7",
+                "#12E797",
+                "#7FF31F",
+                "#ED8B08",
+                "#ED1868",
+                "#800CE0",
+                "#1274F7",
+                "#12E797",
+                "#7FF31F",
+                "#ED8B08",
+                "#ED1868",
+                "#800CE0",
+                "#1274F7",
+                "#12E797",
+                "#7FF31F",
+                "#ED8B08",
+                "#ED1868",
+                "#800CE0",
+                "#1274F7",
+                "#12E797",
+                "#7FF31F",
+                "#ED8B08",
+                "#ED1868",
+                "#800CE0",
+                "#1274F7",
+                "#12E797",
+                "#7FF31F",
+                "#ED8B08",
+                "#ED1868",
+                "#800CE0",
+                "#1274F7",
+                "#12E797",
+                "#7FF31F",
+                "#ED8B08",
+            ],
+        },
+        life: {
+            count: 1,
+            duration: {
+                sync: true,
+                value: 1,
+            },
+        },
+        number: {
+            value: 500,
+        },
+        size: {
+            value: 50,
+        },
+        shape: {
+            type: "star",
+        },
+        rotate: {
+            value: {
+                min: 0,
+                max: 360,
+            },
+        },
+    },
+};
+
+export default options;
diff --git a/utils/configs/src/n/noconfig.ts → utils/configs/src/n/noConfig.ts b/utils/configs/src/n/noconfig.ts → utils/configs/src/n/noConfig.ts
@@ -2,10 +2,6 @@ import type { ISourceOptions } from "@tsparticles/engine";
 
 const options: ISourceOptions = {
     name: "No Config",
-    fullScreen: {
-        enable: true,
-        zIndex: 0,
-    },
 };
 
 export default options;