feat: moved more code out from engine to specific plugins

engine/src/Core/Retina.ts

@@ -76,7 +76,6 @@ export class Retina {
 
         const modes = options.interactivity.modes;
 
-        this.attractModeDistance = modes.attract.distance * ratio;
         this.slowModeRadius = modes.slow.radius * ratio;
     }
 

engine/src/Options/Classes/Interactivity/Modes/Modes.ts

@@ -1,4 +1,3 @@
-import { Attract } from "./Attract";
 import type { Container } from "../../../../Core/Container";
 import type { Engine } from "../../../../engine";
 import type { IExternalInteractor } from "../../../../Core/Interfaces/IExternalInteractor";
@@ -14,8 +13,6 @@ import { Slow } from "./Slow";
 export class Modes implements IModes, IOptionLoader<IModes> {
     [name: string]: unknown;
 
-    attract;
-
     readonly #container;
     readonly #engine;
 
@@ -25,7 +22,6 @@ export class Modes implements IModes, IOptionLoader<IModes> {
         this.#engine = engine;
         this.#container = container;
 
-        this.attract = new Attract();
         this.slow = new Slow();
     }
 
@@ -34,7 +30,6 @@ export class Modes implements IModes, IOptionLoader<IModes> {
             return;
         }
 
-        this.attract.load(data.attract);
         this.slow.load(data.slow);
 
         if (this.#container) {

engine/src/Options/Interfaces/Interactivity/Modes/IModes.ts

@@ -1,4 +1,3 @@
-import type { IAttract } from "./IAttract";
 import type { ISlow } from "./ISlow";
 
 /**
@@ -8,6 +7,5 @@ import type { ISlow } from "./ISlow";
 export interface IModes {
     [name: string]: unknown;
 
-    attract: IAttract;
     slow: ISlow;
 }

engine/src/bundle.ts

@@ -66,7 +66,6 @@ export * from "./Options/Classes/Interactivity/Events/Events";
 export * from "./Options/Classes/Interactivity/Events/HoverEvent";
 export * from "./Options/Classes/Interactivity/Events/Parallax";
 export * from "./Options/Classes/Interactivity/Interactivity";
-export * from "./Options/Classes/Interactivity/Modes/Attract";
 export * from "./Options/Classes/Interactivity/Modes/Modes";
 export * from "./Options/Classes/Interactivity/Modes/Slow";
 export * from "./Options/Classes/ManualParticle";

engine/src/index.ts

@@ -97,7 +97,6 @@ export * from "./Options/Classes/Interactivity/Events/Events";
 export * from "./Options/Classes/Interactivity/Events/HoverEvent";
 export * from "./Options/Classes/Interactivity/Events/Parallax";
 export * from "./Options/Classes/Interactivity/Interactivity";
-export * from "./Options/Classes/Interactivity/Modes/Attract";
 export * from "./Options/Classes/Interactivity/Modes/Modes";
 export * from "./Options/Classes/Interactivity/Modes/Slow";
 export * from "./Options/Classes/ManualParticle";
@@ -160,7 +159,6 @@ export * from "./Options/Interfaces/Interactivity/Events/IDivEvent";
 export * from "./Options/Interfaces/Interactivity/Events/IEvents";
 export * from "./Options/Interfaces/Interactivity/Events/IHoverEvent";
 export * from "./Options/Interfaces/Interactivity/Events/IParallax";
-export * from "./Options/Interfaces/Interactivity/Modes/IAttract";
 export * from "./Options/Interfaces/Interactivity/Modes/IModeDiv";
 export * from "./Options/Interfaces/Interactivity/Modes/IModes";
 export * from "./Options/Interfaces/Interactivity/Modes/ISlow";

interactions/external/attract/src/Attractor.ts

@@ -1,3 +1,4 @@
+import type { AttractContainer, AttractMode, IAttractMode } from "./Types";
 import {
     Circle,
     ClickMode,
@@ -10,37 +11,32 @@ import {
     isInArray,
     mouseMoveEvent,
 } from "tsparticles-engine";
-import type { Container, ICoordinates, Particle, Range } from "tsparticles-engine";
-
-interface IContainerAttract {
-    clicking?: boolean;
-    count?: number;
-    finish?: boolean;
-    particles: Particle[];
-}
-
-type ContainerAttractor = Container & {
-    attract?: IContainerAttract;
-};
+import type { ICoordinates, IModes, Modes, Particle, Range, RecursivePartial } from "tsparticles-engine";
+import { Attract } from "./Options/Classes/Attract";
 
 /**
  * Particle external attract manager
  * @category Interactions
  */
 export class Attractor extends ExternalInteractorBase {
+    readonly #container;
+
     handleClickMode: (mode: string) => void;
 
-    constructor(container: ContainerAttractor) {
+    constructor(container: AttractContainer) {
         super(container);
 
+        this.#container = container;
+
         if (!container.attract) {
             container.attract = { particles: [] };
         }
 
         this.handleClickMode = (mode): void => {
-            const options = this.container.actualOptions;
+            const options = this.#container.actualOptions,
+                attract = options.interactivity.modes.attract;
 
-            if (mode !== ClickMode.attract) {
+            if (!attract || mode !== ClickMode.attract) {
                 return;
             }
 
@@ -70,7 +66,7 @@ export class Attractor extends ExternalInteractorBase {
 
                     container.attract.clicking = false;
                 }
-            }, options.interactivity.modes.attract.duration * 1000);
+            }, attract.duration * 1000);
         };
     }
 
@@ -79,11 +75,18 @@ export class Attractor extends ExternalInteractorBase {
     }
 
     init(): void {
-        // do nothing
+        const container = this.#container,
+            attract = container.actualOptions.interactivity.modes.attract;
+
+        if (!attract) {
+            return;
+        }
+
+        container.retina.attractModeDistance = attract.distance * container.retina.pixelRatio;
     }
 
     async interact(): Promise<void> {
-        const container = this.container,
+        const container = this.#container,
             options = container.actualOptions,
             mouseMoveStatus = container.interactivity.status === mouseMoveEvent,
             events = options.interactivity.events,
@@ -100,7 +103,7 @@ export class Attractor extends ExternalInteractorBase {
     }
 
     isEnabled(particle?: Particle): boolean {
-        const container = this.container,
+        const container = this.#container,
             options = container.actualOptions,
             mouse = container.interactivity.mouse,
             events = (particle?.interactivity ?? options.interactivity).events;
@@ -115,12 +118,25 @@ export class Attractor extends ExternalInteractorBase {
         return isInArray(HoverMode.attract, hoverMode) || isInArray(ClickMode.attract, clickMode);
     }
 
+    loadModeOptions(
+        options: Modes & AttractMode,
+        ...sources: RecursivePartial<(IModes & IAttractMode) | undefined>[]
+    ): void {
+        for (const source of sources) {
+            if (!options.attract) {
+                options.attract = new Attract();
+            }
+
+            options.attract.load(source?.attract);
+        }
+    }
+
     reset(): void {
         // do nothing
     }
 
     private clickAttract(): void {
-        const container = this.container as ContainerAttractor;
+        const container = this.#container;
 
         if (!container.attract) {
             container.attract = { particles: [] };
@@ -156,7 +172,7 @@ export class Attractor extends ExternalInteractorBase {
     }
 
     private hoverAttract(): void {
-        const container = this.container;
+        const container = this.#container;
         const mousePos = container.interactivity.mouse.position;
 
         if (!mousePos) {
@@ -169,9 +185,14 @@ export class Attractor extends ExternalInteractorBase {
     }
 
     private processAttract(position: ICoordinates, attractRadius: number, area: Range): void {
-        const container = this.container,
-            attractOptions = container.actualOptions.interactivity.modes.attract,
-            query = container.particles.quadTree.query(area, (p) => this.isEnabled(p));
+        const container = this.#container,
+            attractOptions = container.actualOptions.interactivity.modes.attract;
+
+        if (!attractOptions) {
+            return;
+        }
+
+        const query = container.particles.quadTree.query(area, (p) => this.isEnabled(p));
 
         for (const particle of query) {
             const { dx, dy, distance } = getDistances(particle.position, position);

engine/src/Options/Classes/Interactivity/Modes/Attract.ts → interactions/external/attract/src/Options/Classes/Attract.ts

@@ -1,8 +1,6 @@
-import { EasingType } from "../../../../Enums/Types/EasingType";
-import type { EasingTypeAlt } from "../../../../Enums/Types/EasingType";
-import type { IAttract } from "../../../Interfaces/Interactivity/Modes/IAttract";
-import type { IOptionLoader } from "../../../Interfaces/IOptionLoader";
-import type { RecursivePartial } from "../../../../Types/RecursivePartial";
+import type { EasingTypeAlt, IOptionLoader, RecursivePartial } from "tsparticles-engine";
+import { EasingType } from "tsparticles-engine";
+import type { IAttract } from "../Interfaces/IAttract";
 
 /**
  * @category Options

interactions/external/attract/src/Options/Classes/AttractOptions.ts

@@ -0,0 +1,8 @@
+import type { AttractMode } from "../../Types";
+import type { Options } from "tsparticles-engine";
+
+export type AttractOptions = Options & {
+    interactivity: {
+        modes: AttractMode;
+    };
+};

engine/src/Options/Interfaces/Interactivity/Modes/IAttract.ts → interactions/external/attract/src/Options/Interfaces/IAttract.ts

@@ -1,4 +1,4 @@
-import type { EasingType, EasingTypeAlt } from "../../../../Enums/Types/EasingType";
+import type { EasingType, EasingTypeAlt } from "tsparticles-engine";
 
 /**
  * @category Options

interactions/external/attract/src/Types.ts

@@ -0,0 +1,27 @@
+import type { Container, Particle } from "tsparticles-engine";
+import type { Attract } from "./Options/Classes/Attract";
+import type { AttractOptions } from "./Options/Classes/AttractOptions";
+import type { IAttract } from "./Options/Interfaces/IAttract";
+
+export type IAttractMode = {
+    attract: IAttract;
+};
+
+export type AttractMode = {
+    attract?: Attract;
+};
+
+interface IContainerAttract {
+    clicking?: boolean;
+    count?: number;
+    finish?: boolean;
+    particles: Particle[];
+}
+
+export type AttractContainer = Container & {
+    actualOptions: AttractOptions;
+    attract?: IContainerAttract;
+    retina: {
+        attractModeDistance?: number;
+    };
+};