feat: preparing simpler options for confetti preset

presets/confetti/src/ConfettiOptions.ts

@@ -0,0 +1,156 @@
+import type { IConfettiOptions } from "./IConfettiOptions";
+import type { IOptionLoader } from "tsparticles/dist/Options/Interfaces/IOptionLoader";
+import type { RecursivePartial, SingleOrMultiple } from "tsparticles";
+import type { ICoordinates } from "tsparticles/dist/Core/Interfaces/ICoordinates";
+import { OptionsColor } from "tsparticles/dist/Options/Classes/OptionsColor";
+
+export class ConfettiOptions implements IConfettiOptions, IOptionLoader<IConfettiOptions> {
+    /**
+     * @deprecated use count instead
+     */
+    get particleCount(): number {
+        return this.count;
+    }
+
+    /**
+     * @deprecated use count instead
+     */
+    set particleCount(value: number) {
+        this.count = value;
+    }
+
+    /**
+     * @deprecated use position instead
+     */
+    get origin(): ICoordinates {
+        return {
+            x: this.position.x / 100,
+            y: this.position.y / 100,
+        };
+    }
+
+    /**
+     * @deprecated use position instead
+     */
+    set origin(value: ICoordinates) {
+        this.position.x = value.x * 100;
+        this.position.y = value.y * 100;
+    }
+
+    angle: number;
+    colors: SingleOrMultiple<OptionsColor>;
+    count: number;
+    decay: number;
+    disableForReducedMotion: boolean;
+    drift: number;
+    gravity: number;
+    position: ICoordinates;
+    scalar: number;
+    shapes: SingleOrMultiple<string>;
+    spread: number;
+    startVelocity: number;
+    ticks: number;
+    zIndex: number;
+
+    constructor() {
+        this.angle = 90;
+        this.count = 50;
+        this.spread = 45;
+        this.startVelocity = 45;
+        this.decay = 0.9;
+        this.gravity = 1;
+        this.drift = 0;
+        this.ticks = 200;
+        this.position = {
+            x: 50,
+            y: 50,
+        };
+        this.colors = [];
+        this.shapes = ["square", "circle"];
+        this.scalar = 1;
+        this.zIndex = 100;
+        this.disableForReducedMotion = true;
+    }
+
+    load(data?: RecursivePartial<IConfettiOptions>): void {
+        if (!data) {
+            return;
+        }
+
+        if (data.angle !== undefined) {
+            this.angle = data.angle;
+        }
+
+        const count = data.count ?? data.particleCount;
+
+        if (count !== undefined) {
+            this.count = count;
+        }
+
+        if (data.spread !== undefined) {
+            this.spread = data.spread;
+        }
+
+        if (data.startVelocity !== undefined) {
+            this.startVelocity = data.startVelocity;
+        }
+
+        if (data.decay !== undefined) {
+            this.decay = data.decay;
+        }
+
+        if (data.gravity !== undefined) {
+            this.gravity = data.gravity;
+        }
+
+        if (data.drift !== undefined) {
+            this.drift = data.drift;
+        }
+
+        if (data.ticks !== undefined) {
+            this.ticks = data.ticks;
+        }
+
+        const position = data.position ?? this.position;
+
+        if (position?.x !== undefined) {
+            this.position.x = position.x;
+        }
+
+        if (position?.y !== undefined) {
+            this.position.y = position.y;
+        }
+
+        if (data.colors !== undefined) {
+            if (data.colors instanceof Array) {
+                this.colors = data.colors.map((t) => {
+                    const res = new OptionsColor();
+
+                    res.load(t);
+
+                    return res;
+                });
+            } else {
+                this.colors = new OptionsColor();
+
+                this.colors.load(data.colors);
+            }
+        }
+
+        if (data.shapes !== undefined) {
+            this.shapes = data.shapes;
+        }
+
+        if (data.scalar !== undefined) {
+            this.scalar = data.scalar;
+        }
+
+        if (data.zIndex !== undefined) {
+            this.zIndex = data.zIndex;
+        }
+
+        if (data.disableForReducedMotion !== undefined) {
+            this.disableForReducedMotion = data.disableForReducedMotion;
+        }
+    }
+}

presets/confetti/src/IConfettiOptions.ts

@@ -1,6 +1,30 @@
 import type { ICoordinates } from "tsparticles/dist/Core/Interfaces/ICoordinates";
+import { SingleOrMultiple } from "tsparticles";
+import { IColor } from "tsparticles/dist/Core/Interfaces/Colors";
 
 export interface IConfettiOptions {
+    /**
+     * @deprecated use count instead
+     */
+    particleCount: number;
+
+    /**
+     * @deprecated use position instead
+     */
+    origin: ICoordinates;
+
+    angle: number;
     count: number;
     position: ICoordinates;
+    spread: number;
+    startVelocity: number;
+    decay: number;
+    gravity: number;
+    drift: number;
+    ticks: number;
+    colors: SingleOrMultiple<IColor>;
+    shapes: SingleOrMultiple<string>;
+    scalar: number;
+    zIndex: number;
+    disableForReducedMotion: boolean;
 }

presets/confetti/src/options.ts

@@ -1,17 +1,12 @@
 import type { ISourceOptions, RecursivePartial } from "tsparticles";
 import { MoveDirection, Utils } from "tsparticles";
 import { IConfettiOptions } from "./IConfettiOptions";
-
-export const defaultCannonOptions: IConfettiOptions = {
-    count: 50,
-    position: {
-        x: 50,
-        y: 50,
-    },
-};
+import { ConfettiOptions } from "./ConfettiOptions";
 
 export const loadOptions = (confettiOptions: RecursivePartial<IConfettiOptions>): ISourceOptions => {
-    const actualOptions = Utils.deepExtend(defaultCannonOptions, confettiOptions) as IConfettiOptions;
+    const actualOptions = new ConfettiOptions();
+
+    actualOptions.load(confettiOptions);
 
     return {
         fpsLimit: 60,
@@ -20,13 +15,13 @@ export const loadOptions = (confettiOptions: RecursivePartial<IConfettiOptions>)
                 value: 0,
             },
             color: {
-                value: [ "#ffffff", "#ff0000" ],
+                value: ["#ffffff", "#ff0000"],
             },
             shape: {
                 type: "confetti",
                 options: {
                     confetti: {
-                        type: [ "circle", "square" ],
+                        type: ["circle", "square"],
                     },
                 },
             },