feat: added new functions for loading options, this will be useful fo…

…r removing all the classes

engine/src/Core/Container.ts

@@ -8,9 +8,9 @@ import { Retina } from "./Retina";
 import type { IOptions } from "../Options/Interfaces/IOptions";
 import { FrameManager } from "./FrameManager";
 import type { RecursivePartial } from "../Types";
-import { Options } from "../Options/Classes/Options";
-import { animate, cancelAnimation, EventListeners, getRangeValue, Plugins } from "../Utils";
-import { Particle } from "./Particle";
+import type { Options } from "../Options/Classes/Options";
+import { animate, cancelAnimation, EventListeners, getRangeValue, loadContainerOptions, Plugins } from "../Utils";
+import type { Particle } from "./Particle";
 import { Vector } from "./Particle/Vector";
 import {
     IAttract,
@@ -100,7 +100,6 @@ export class Container {
     private firstStart;
     private currentTheme?: string;
     private drawAnimationFrame?: number;
-    private readonly presets;
 
     private readonly eventListeners;
     private readonly intersectionObserver?;
@@ -110,9 +109,8 @@ export class Container {
      * @constructor
      * @param id the id to identify this instance
      * @param sourceOptions the options to load
-     * @param presets all the presets to load with options
      */
-    constructor(readonly id: string, sourceOptions?: RecursivePartial<IOptions>, ...presets: string[]) {
+    constructor(readonly id: string, sourceOptions?: RecursivePartial<IOptions>) {
         this.fpsLimit = 60;
         this.duration = 0;
         this.lifeTime = 0;
@@ -129,7 +127,6 @@ export class Container {
         this.canvas = new Canvas(this);
         this.particles = new Particles(this);
         this.drawer = new FrameManager(this);
-        this.presets = presets;
         this.pathGenerator = {
             generate: (p: Particle): Vector => {
                 const v = p.velocity.copy();
@@ -158,8 +155,8 @@ export class Container {
         this.drawers = new Map<string, IShapeDrawer>();
         this.density = 1;
         /* tsParticles variables with default values */
-        this._options = new Options();
-        this.actualOptions = new Options();
+        this._options = loadContainerOptions();
+        this.actualOptions = loadContainerOptions();
 
         /* ---------- tsParticles - start ------------ */
         this.eventListeners = new EventListeners(this);
@@ -366,7 +363,7 @@ export class Container {
     }
 
     reset(): Promise<void> {
-        this._options = new Options();
+        this._options = loadContainerOptions();
 
         return this.refresh();
     }
@@ -582,12 +579,6 @@ export class Container {
     }
 
     async init(): Promise<void> {
-        this._options = new Options();
-
-        for (const preset of this.presets) {
-            this._options.load(Plugins.getPreset(preset));
-        }
-
         const shapes = Plugins.getSupportedShapes();
 
         for (const type of shapes) {
@@ -599,12 +590,8 @@ export class Container {
         }
 
         /* options settings */
-        this._options.load(this._initialSourceOptions);
-        this._options.load(this._sourceOptions);
-
-        this.actualOptions = new Options();
-
-        this.actualOptions.load(this._options);
+        this._options = loadContainerOptions(this._initialSourceOptions, this.sourceOptions);
+        this.actualOptions = loadContainerOptions(this._options);
 
         /* init canvas + particles */
         this.retina.init();

engine/src/Core/Particle.ts

@@ -1,6 +1,5 @@
 import type { Container } from "./Container";
 import type { IParticles } from "../Options/Interfaces/Particles/IParticles";
-import { ParticlesOptions } from "../Options/Classes/Particles/ParticlesOptions";
 import { Shape } from "../Options/Classes/Particles/Shape/Shape";
 import {
     AnimationStatus,
@@ -27,6 +26,7 @@ import {
     getRangeValue,
     isInArray,
     itemFromArray,
+    loadParticlesOptions,
     Plugins,
     randomInRange,
     setRangeValue,
@@ -64,7 +64,7 @@ const fixOutMode = (data: {
     setCb: (value: number) => void;
     radius: number;
 }) => {
-    if (isInArray(data.outMode, data.checkModes) || isInArray(data.outMode, data.checkModes)) {
+    if (isInArray(data.outMode, data.checkModes)) {
         if (data.coord > data.maxCoord - data.radius * 2) {
             data.setCb(-data.radius);
         } else if (data.coord < data.radius * 2) {
@@ -144,9 +144,7 @@ export class Particle implements IParticle {
 
         const pxRatio = container.retina.pixelRatio;
         const mainOptions = container.actualOptions;
-        const particlesOptions = new ParticlesOptions();
-
-        particlesOptions.load(mainOptions.particles);
+        const particlesOptions = loadParticlesOptions(mainOptions.particles);
 
         const shapeType = particlesOptions.shape.type;
         const reduceDuplicates = particlesOptions.reduceDuplicates;
@@ -336,7 +334,7 @@ export class Particle implements IParticle {
             drawer.particleInit(container, this);
         }
 
-        for (const [, plugin] of container.plugins) {
+        for (const [ , plugin ] of container.plugins) {
             if (plugin.particleCreated) {
                 plugin.particleCreated(this);
             }
@@ -362,7 +360,7 @@ export class Particle implements IParticle {
     draw(delta: IDelta): void {
         const container = this.container;
 
-        for (const [, plugin] of container.plugins) {
+        for (const [ , plugin ] of container.plugins) {
             container.canvas.drawParticlePlugin(plugin, this, delta);
         }
 
@@ -420,7 +418,7 @@ export class Particle implements IParticle {
         this.destroyed = true;
         this.bubble.inRange = false;
 
-        for (const [, plugin] of this.container.plugins) {
+        for (const [ , plugin ] of this.container.plugins) {
             if (plugin.particleDestroyed) {
                 plugin.particleDestroyed(this, override);
             }
@@ -468,7 +466,7 @@ export class Particle implements IParticle {
         zIndex: number,
         tryCount = 0
     ): Vector3d {
-        for (const [, plugin] of container.plugins) {
+        for (const [ , plugin ] of container.plugins) {
             const pluginPos =
                 plugin.particlePosition !== undefined ? plugin.particlePosition(position, this) : undefined;
 
@@ -490,7 +488,7 @@ export class Particle implements IParticle {
             fixHorizontal = (outMode: OutMode | keyof typeof OutMode | OutModeAlt) => {
                 fixOutMode({
                     outMode,
-                    checkModes: [OutMode.bounce, OutMode.bounceHorizontal],
+                    checkModes: [ OutMode.bounce, OutMode.bounceHorizontal ],
                     coord: pos.x,
                     maxCoord: container.canvas.size.width,
                     setCb: (value: number) => (pos.x += value),
@@ -500,7 +498,7 @@ export class Particle implements IParticle {
             fixVertical = (outMode: OutMode | keyof typeof OutMode | OutModeAlt) => {
                 fixOutMode({
                     outMode,
-                    checkModes: [OutMode.bounce, OutMode.bounceVertical],
+                    checkModes: [ OutMode.bounce, OutMode.bounceVertical ],
                     coord: pos.y,
                     maxCoord: container.canvas.size.height,
                     setCb: (value: number) => (pos.y += value),
@@ -599,14 +597,14 @@ export class Particle implements IParticle {
         const life = {
             delay: container.retina.reduceFactor
                 ? ((getRangeValue(lifeOptions.delay.value) * (lifeOptions.delay.sync ? 1 : Math.random())) /
-                      container.retina.reduceFactor) *
-                  1000
+                    container.retina.reduceFactor) *
+                1000
                 : 0,
             delayTime: 0,
             duration: container.retina.reduceFactor
                 ? ((getRangeValue(lifeOptions.duration.value) * (lifeOptions.duration.sync ? 1 : Math.random())) /
-                      container.retina.reduceFactor) *
-                  1000
+                    container.retina.reduceFactor) *
+                1000
                 : 0,
             time: 0,
             count: particlesOptions.life.count,

engine/src/Core/Particles.ts

@@ -1,11 +1,19 @@
 import type { Container } from "./Container";
 import { Particle } from "./Particle";
-import { getRangeValue, Plugins, Point, QuadTree, randomInRange, Rectangle, setRangeValue } from "../Utils";
+import {
+    getRangeValue,
+    loadParticlesOptions,
+    Plugins,
+    Point,
+    QuadTree,
+    randomInRange,
+    Rectangle,
+    setRangeValue,
+} from "../Utils";
 import type { RecursivePartial } from "../Types";
 import type { IParticles } from "../Options/Interfaces/Particles/IParticles";
 import { InteractionManager } from "./InteractionManager";
 import type { IDensity } from "../Options/Interfaces/Particles/Number/IDensity";
-import { ParticlesOptions } from "../Options/Classes/Particles/ParticlesOptions";
 import type { ICoordinates, IDelta, IMouseData, IParticle, IRgb } from "./Interfaces";
 import { Mover } from "./Particle/Mover";
 import { IParticlesFrequencies } from "./Interfaces/IParticlesFrequencies";
@@ -320,10 +328,7 @@ export class Particles {
 
     addSplitParticle(parent: Particle): Particle | undefined {
         const splitOptions = parent.options.destroy.split;
-        const options = new ParticlesOptions();
-
-        options.load(parent.options);
-
+        const options = loadParticlesOptions(parent.options);
         const factor = getRangeValue(splitOptions.factor);
 
         options.color.load({

engine/src/Options/Classes/Options.ts

@@ -1,10 +1,9 @@
 import type { IOptions } from "../Interfaces/IOptions";
 import { Interactivity } from "./Interactivity/Interactivity";
-import { ParticlesOptions } from "./Particles/ParticlesOptions";
 import { BackgroundMask } from "./BackgroundMask/BackgroundMask";
 import type { RangeValue, RecursivePartial, SingleOrMultiple } from "../../Types";
 import { Background } from "./Background/Background";
-import { Plugins } from "../../Utils";
+import { loadParticlesOptions, Plugins } from "../../Utils";
 import type { IOptionLoader } from "../Interfaces/IOptionLoader";
 import { Theme } from "./Theme/Theme";
 import { ResponsiveMode, ThemeMode } from "../../Enums";
@@ -51,7 +50,7 @@ export class Options implements IOptions, IOptionLoader<IOptions> {
         this.interactivity = new Interactivity();
         this.manualParticles = [];
         this.motion = new Motion();
-        this.particles = new ParticlesOptions();
+        this.particles = loadParticlesOptions();
         this.pauseOnBlur = true;
         this.pauseOnOutsideViewport = true;
         this.responsive = [];