fix: moved gradients classes to gradient updater, lighter engine

tsparticles · Jul 27, 2022 · e08d09f · e08d09f
1 parent 500f13e
commit e08d09f
Show file tree

Hide file tree

Showing 18 changed files with 221 additions and 237 deletions.
diff --git a/engine/src/Core/Canvas.ts b/engine/src/Core/Canvas.ts
@@ -289,7 +289,7 @@ export class Canvas {
                 this.#postDrawUpdaters.push(updater);
             }
 
-            if (updater.getColorStyles && updater.getTransformValues && updater.beforeDraw) {
+            if (updater.getColorStyles || updater.getTransformValues || updater.beforeDraw) {
                 this.#preDrawUpdaters.push(updater);
             }
         }

diff --git a/engine/src/Options/Classes/Particles/ParticlesOptions.ts b/engine/src/Options/Classes/Particles/ParticlesOptions.ts
@@ -1,5 +1,4 @@
 import { AnimatableColor } from "../AnimatableColor";
-import { AnimatableGradient } from "../Gradients/AnimatableGradient";
 import { Collisions } from "./Collisions/Collisions";
 import type { Container } from "../../../Core/Container";
 import { Destroy } from "./Destroy/Destroy";
@@ -37,7 +36,6 @@ export class ParticlesOptions implements IParticlesOptions, IOptionLoader<IParti
     readonly #container;
     destroy;
     readonly #engine;
-    gradient: SingleOrMultiple<AnimatableGradient>;
     groups: ParticlesGroups;
     interactivity?: RecursivePartial<IInteractivity>;
     links;
@@ -62,7 +60,6 @@ export class ParticlesOptions implements IParticlesOptions, IOptionLoader<IParti
         this.color = new AnimatableColor();
         this.color.value = "#fff";
         this.destroy = new Destroy();
-        this.gradient = [];
         this.groups = {};
         this.links = new Links();
         this.move = new Move();
@@ -185,26 +182,6 @@ export class ParticlesOptions implements IParticlesOptions, IOptionLoader<IParti
             }
         }
 
-        const gradientToLoad = data.gradient;
-
-        if (gradientToLoad) {
-            if (gradientToLoad instanceof Array) {
-                this.gradient = gradientToLoad.map((s) => {
-                    const tmp = new AnimatableGradient();
-
-                    tmp.load(s);
-
-                    return tmp;
-                });
-            } else {
-                if (this.gradient instanceof Array) {
-                    this.gradient = new AnimatableGradient();
-                }
-
-                this.gradient.load(gradientToLoad);
-            }
-        }
-
         if (this.#container) {
             const updaters = this.#engine.plugins.updaters.get(this.#container);
 

diff --git a/engine/src/Options/Classes/Particles/Shape/Shape.ts b/engine/src/Options/Classes/Particles/Shape/Shape.ts
@@ -144,38 +144,26 @@ export class Shape implements IShape, IOptionLoader<IShape> {
         altKey: string,
         altOverride: boolean
     ): void {
-        if (item === undefined) {
+        if (!item) {
             return;
         }
 
-        if (item instanceof Array) {
-            if (!(this.options[mainKey] instanceof Array)) {
-                this.options[mainKey] = [];
+        const emptyValue = item instanceof Array ? [] : {},
+            mainDifferentValues = item instanceof Array !== this.options[mainKey] instanceof Array,
+            altDifferentValues = item instanceof Array !== this.options[altKey] instanceof Array;
 
-                if (!this.options[altKey] || altOverride) {
-                    this.options[altKey] = [];
-                }
-            }
-
-            this.options[mainKey] = deepExtend(this.options[mainKey] ?? [], item) as IShapeValues[];
-
-            if (!this.options[altKey] || altOverride) {
-                this.options[altKey] = deepExtend(this.options[altKey] ?? [], item) as IShapeValues[];
-            }
-        } else {
-            if (this.options[mainKey] instanceof Array) {
-                this.options[mainKey] = {};
+        if (mainDifferentValues) {
+            this.options[mainKey] = emptyValue;
+        }
 
-                if (!this.options[altKey] || altOverride) {
-                    this.options[altKey] = {};
-                }
-            }
+        if (altDifferentValues && altOverride) {
+            this.options[altKey] = emptyValue;
+        }
 
-            this.options[mainKey] = deepExtend(this.options[mainKey] ?? {}, item) as IShapeValues[];
+        this.options[mainKey] = deepExtend(this.options[mainKey] ?? emptyValue, item) as IShapeValues[];
 
-            if (!this.options[altKey] || altOverride) {
-                this.options[altKey] = deepExtend(this.options[altKey] ?? {}, item) as IShapeValues[];
-            }
+        if (!this.options[altKey] || altOverride) {
+            this.options[altKey] = deepExtend(this.options[altKey] ?? emptyValue, item) as IShapeValues[];
         }
     }
 }
diff --git a/engine/src/Options/Interfaces/Particles/IParticlesOptions.ts b/engine/src/Options/Interfaces/Particles/IParticlesOptions.ts
@@ -3,7 +3,6 @@
  * @category Options
  */
 import type { IAnimatableColor } from "../IAnimatableColor";
-import type { IAnimatableGradient } from "../IAnimatableGradient";
 import type { ICollisions } from "./Collisions/ICollisions";
 import type { IDestroy } from "./Destroy/IDestroy";
 import type { IInteractivity } from "../Interactivity/IInteractivity";
@@ -34,7 +33,6 @@ export interface IParticlesOptions {
     collisions: ICollisions;
     color: IAnimatableColor;
     destroy: IDestroy;
-    gradient: SingleOrMultiple<IAnimatableGradient>;
     groups: ParticlesGroups;
     interactivity?: RecursivePartial<IInteractivity>;
 

diff --git a/engine/src/Utils/CanvasUtils.ts b/engine/src/Utils/CanvasUtils.ts
@@ -1,4 +1,4 @@
-import { colorMix, getStyleFromHsl, getStyleFromRgb } from "./ColorUtils";
+import { getStyleFromHsl, getStyleFromRgb } from "./ColorUtils";
 import { AlterType } from "../Enums/Types/AlterType";
 import type { Container } from "../Core/Container";
 import type { IContainerPlugin } from "../Core/Interfaces/IContainerPlugin";
@@ -68,39 +68,6 @@ export function clear(context: CanvasRenderingContext2D, dimension: IDimension):
     context.clearRect(0, 0, dimension.width, dimension.height);
 }
 
-/**
- * Creates a gradient using two particles colors and opacity.
- * @param context - The canvas context to draw on.
- * @param p1 - The first particle.
- * @param p2 - The second particle.
- * @param opacity - The opacity of the gradient.
- */
-export function gradient(
-    context: CanvasRenderingContext2D,
-    p1: IParticle,
-    p2: IParticle,
-    opacity: number
-): CanvasGradient | undefined {
-    const gradStop = Math.floor(p2.getRadius() / p1.getRadius()),
-        color1 = p1.getFillColor(),
-        color2 = p2.getFillColor();
-
-    if (!color1 || !color2) {
-        return;
-    }
-
-    const sourcePos = p1.getPosition(),
-        destPos = p2.getPosition(),
-        midRgb = colorMix(color1, color2, p1.getRadius(), p2.getRadius()),
-        grad = context.createLinearGradient(sourcePos.x, sourcePos.y, destPos.x, destPos.y);
-
-    grad.addColorStop(0, getStyleFromHsl(color1, opacity));
-    grad.addColorStop(gradStop > 1 ? 1 : gradStop, getStyleFromRgb(midRgb, opacity));
-    grad.addColorStop(1, getStyleFromHsl(color2, opacity));
-
-    return grad;
-}
-
 interface DrawParticleParams {
     /**
      * If enabled, the composite value will be used for blending the particle in the canvas

diff --git a/engine/src/bundle.ts b/engine/src/bundle.ts
@@ -51,12 +51,6 @@ export * from "./Enums/Types/EasingType";
 export * from "./Enums/AnimationStatus";
 export * from "./Enums/InteractivityDetect";
 export * from "./Options/Classes/AnimatableColor";
-export * from "./Options/Classes/Gradients/AnimatableGradient";
-export * from "./Options/Classes/Gradients/AnimatableGradientColor";
-export * from "./Options/Classes/Gradients/GradientAngle";
-export * from "./Options/Classes/Gradients/GradientAngleAnimation";
-export * from "./Options/Classes/Gradients/GradientColorOpacity";
-export * from "./Options/Classes/Gradients/GradientColorOpacityAnimation";
 export * from "./Options/Classes/AnimationOptions";
 export * from "./Options/Classes/Background/Background";
 export * from "./Options/Classes/BackgroundMask/BackgroundMask";

diff --git a/engine/src/index.ts b/engine/src/index.ts
@@ -19,7 +19,6 @@ const tsParticles = new Engine();
 tsParticles.init();
 
 export * from "./Core/Interfaces/Colors";
-export * from "./Core/Interfaces/Gradients";
 export * from "./Core/Interfaces/IBounds";
 export * from "./Core/Interfaces/IBubbleParticleData";
 export * from "./Core/Interfaces/ICircleBouncer";
@@ -83,12 +82,6 @@ export * from "./Enums/Types/EasingType";
 export * from "./Enums/AnimationStatus";
 export * from "./Enums/InteractivityDetect";
 export * from "./Options/Classes/AnimatableColor";
-export * from "./Options/Classes/Gradients/AnimatableGradient";
-export * from "./Options/Classes/Gradients/AnimatableGradientColor";
-export * from "./Options/Classes/Gradients/GradientAngle";
-export * from "./Options/Classes/Gradients/GradientAngleAnimation";
-export * from "./Options/Classes/Gradients/GradientColorOpacity";
-export * from "./Options/Classes/Gradients/GradientColorOpacityAnimation";
 export * from "./Options/Classes/AnimationOptions";
 export * from "./Options/Classes/Background/Background";
 export * from "./Options/Classes/BackgroundMask/BackgroundMask";
@@ -174,15 +167,13 @@ export * from "./Options/Interfaces/BackgroundMask/IBackgroundMaskCover";
 export * from "./Options/Interfaces/FullScreen/IFullScreen";
 export * from "./Options/Interfaces/IAnimatable";
 export * from "./Options/Interfaces/IAnimatableColor";
-export * from "./Options/Interfaces/IAnimatableGradient";
 export * from "./Options/Interfaces/IAnimation";
 export * from "./Options/Interfaces/IColorAnimation";
 export * from "./Options/Interfaces/IHslAnimation";
 export * from "./Options/Interfaces/IManualParticle";
 export * from "./Options/Interfaces/IOptionLoader";
 export * from "./Options/Interfaces/IOptions";
 export * from "./Options/Interfaces/IOptionsColor";
-export * from "./Options/Interfaces/IOptionsGradient";
 export * from "./Options/Interfaces/IResponsive";
 export * from "./Options/Interfaces/IValueWithRandom";
 export * from "./Options/Interfaces/Interactivity/Events/IClickEvent";

diff --git a/interactions/external/connect/src/Connector.ts b/interactions/external/connect/src/Connector.ts
@@ -1,5 +1,46 @@
 import type { Container, ICoordinates, Particle } from "tsparticles-engine";
-import { ExternalInteractorBase, HoverMode, drawLine, gradient, isInArray } from "tsparticles-engine";
+import {
+    ExternalInteractorBase,
+    HoverMode,
+    colorMix,
+    drawLine,
+    getStyleFromHsl,
+    getStyleFromRgb,
+    isInArray,
+} from "tsparticles-engine";
+
+/**
+ * Creates a gradient using two particles colors and opacity.
+ * @param context - The canvas context to draw on.
+ * @param p1 - The first particle.
+ * @param p2 - The second particle.
+ * @param opacity - The opacity of the gradient.
+ */
+function gradient(
+    context: CanvasRenderingContext2D,
+    p1: Particle,
+    p2: Particle,
+    opacity: number
+): CanvasGradient | undefined {
+    const gradStop = Math.floor(p2.getRadius() / p1.getRadius()),
+        color1 = p1.getFillColor(),
+        color2 = p2.getFillColor();
+
+    if (!color1 || !color2) {
+        return;
+    }
+
+    const sourcePos = p1.getPosition(),
+        destPos = p2.getPosition(),
+        midRgb = colorMix(color1, color2, p1.getRadius(), p2.getRadius()),
+        grad = context.createLinearGradient(sourcePos.x, sourcePos.y, destPos.x, destPos.y);
+
+    grad.addColorStop(0, getStyleFromHsl(color1, opacity));
+    grad.addColorStop(gradStop > 1 ? 1 : gradStop, getStyleFromRgb(midRgb, opacity));
+    grad.addColorStop(1, getStyleFromHsl(color2, opacity));
+
+    return grad;
+}
 
 function drawConnectLine(
     context: CanvasRenderingContext2D,