From e08d09f7243c4fd790b990e1c3f75c832b9e3ef3 Mon Sep 17 00:00:00 2001 From: Matteo Bruni <176620+matteobruni@users.noreply.github.com> Date: Wed, 27 Jul 2022 15:44:25 +0200 Subject: [PATCH] fix: moved gradients classes to gradient updater, lighter engine --- engine/src/Core/Canvas.ts | 2 +- .../Classes/Particles/ParticlesOptions.ts | 23 -- .../Options/Classes/Particles/Shape/Shape.ts | 38 +-- .../Interfaces/Particles/IParticlesOptions.ts | 2 - engine/src/Utils/CanvasUtils.ts | 35 +-- engine/src/bundle.ts | 6 - engine/src/index.ts | 9 - .../external/connect/src/Connector.ts | 43 +++- updaters/gradient/src/GradientUpdater.ts | 231 +++++++++++------- .../Options/Classes}/AnimatableGradient.ts | 7 +- .../Classes}/AnimatableGradientColor.ts | 7 +- .../src/Options/Classes}/GradientAngle.ts | 10 +- .../Classes}/GradientAngleAnimation.ts | 7 +- .../Options/Classes}/GradientColorOpacity.ts | 12 +- .../Classes}/GradientColorOpacityAnimation.ts | 9 +- .../src/Options}/Interfaces/Gradients.ts | 5 +- .../Options/Interfaces/IAnimatableGradient.ts | 5 +- .../Options/Interfaces/IOptionsGradient.ts | 7 +- 18 files changed, 221 insertions(+), 237 deletions(-) rename {engine/src/Options/Classes/Gradients => updaters/gradient/src/Options/Classes}/AnimatableGradient.ts (76%) rename {engine/src/Options/Classes/Gradients => updaters/gradient/src/Options/Classes}/AnimatableGradientColor.ts (76%) rename {engine/src/Options/Classes/Gradients => updaters/gradient/src/Options/Classes}/GradientAngle.ts (62%) rename {engine/src/Options/Classes/Gradients => updaters/gradient/src/Options/Classes}/GradientAngleAnimation.ts (74%) rename {engine/src/Options/Classes/Gradients => updaters/gradient/src/Options/Classes}/GradientColorOpacity.ts (57%) rename {engine/src/Options/Classes/Gradients => updaters/gradient/src/Options/Classes}/GradientColorOpacityAnimation.ts (72%) rename {engine/src/Core => updaters/gradient/src/Options}/Interfaces/Gradients.ts (59%) rename {engine => updaters/gradient}/src/Options/Interfaces/IAnimatableGradient.ts (58%) rename {engine => updaters/gradient}/src/Options/Interfaces/IOptionsGradient.ts (61%) diff --git a/engine/src/Core/Canvas.ts b/engine/src/Core/Canvas.ts index 4012c979e11..63efc8ec93d 100644 --- 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 index 3dfc209b472..e956ae0a820 100644 --- 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; groups: ParticlesGroups; interactivity?: RecursivePartial; links; @@ -62,7 +60,6 @@ export class ParticlesOptions implements IParticlesOptions, IOptionLoader { - 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 index 813130667e7..1fbebc3a507 100644 --- 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 { 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 index d0d68150866..5712b2bdd5c 100644 --- 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; groups: ParticlesGroups; interactivity?: RecursivePartial; diff --git a/engine/src/Utils/CanvasUtils.ts b/engine/src/Utils/CanvasUtils.ts index 775fcbfd048..4bfc5502546 100644 --- 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 index 0f3db06fc9e..9e9cd4040f0 100644 --- 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 index c668b50f49e..90a6621441c 100644 --- 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,7 +167,6 @@ 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"; @@ -182,7 +174,6 @@ 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 index 6542124116d..a5de65d95b5 100644 --- 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, diff --git a/updaters/gradient/src/GradientUpdater.ts b/updaters/gradient/src/GradientUpdater.ts index 4776f7baae7..c31aa882a78 100644 --- a/updaters/gradient/src/GradientUpdater.ts +++ b/updaters/gradient/src/GradientUpdater.ts @@ -20,8 +20,14 @@ import type { IParticleNumericValueAnimation, IParticleUpdater, IParticleValueAnimation, + IParticlesOptions, Particle, + ParticlesOptions, + RecursivePartial, + SingleOrMultiple, } from "tsparticles-engine"; +import { AnimatableGradient } from "./Options/Classes/AnimatableGradient"; +import type { IAnimatableGradient } from "./Options/Interfaces/IAnimatableGradient"; interface IParticleGradientColorAnimation { opacity?: IParticleNumericValueAnimation; @@ -40,6 +46,15 @@ type GradientParticle = Particle & { * Gets the particle gradient options */ gradient?: IParticleGradientAnimation; + options: GradientParticlesOptions; +}; + +type IGradientParticlesOptions = IParticlesOptions & { + gradient?: SingleOrMultiple; +}; + +type GradientParticlesOptions = ParticlesOptions & { + gradient?: SingleOrMultiple; }; function updateColorOpacity(delta: IDelta, value: IParticleNumericValueAnimation): void { @@ -218,101 +233,104 @@ export class GradientUpdater implements IParticleUpdater { ? itemFromArray(particle.options.gradient) : particle.options.gradient; - if (gradient) { - particle.gradient = { - angle: { - value: gradient.angle.value, - enable: gradient.angle.animation.enable, - velocity: - (getRangeValue(gradient.angle.animation.speed) / 360) * particle.container.retina.reduceFactor, - decay: 1 - getRangeValue(gradient.angle.animation.decay), - }, - type: gradient.type, - colors: [], - }; - - let rotateDirection = gradient.angle.direction; - - if (rotateDirection === RotateDirection.random) { - const index = Math.floor(tspRandom() * 2); - - rotateDirection = index > 0 ? RotateDirection.counterClockwise : RotateDirection.clockwise; - } + if (!gradient) { + return; + } + + particle.gradient = { + angle: { + value: gradient.angle.value, + enable: gradient.angle.animation.enable, + velocity: + (getRangeValue(gradient.angle.animation.speed) / 360) * particle.container.retina.reduceFactor, + decay: 1 - getRangeValue(gradient.angle.animation.decay), + }, + type: gradient.type, + colors: [], + }; + + let rotateDirection = gradient.angle.direction; + + if (rotateDirection === RotateDirection.random) { + const index = Math.floor(tspRandom() * 2); + + rotateDirection = index > 0 ? RotateDirection.counterClockwise : RotateDirection.clockwise; + } + + switch (rotateDirection) { + case RotateDirection.counterClockwise: + case "counterClockwise": + particle.gradient.angle.status = AnimationStatus.decreasing; + break; + case RotateDirection.clockwise: + particle.gradient.angle.status = AnimationStatus.increasing; + break; + } + + const reduceDuplicates = particle.options.reduceDuplicates; + + for (const grColor of gradient.colors) { + const grHslColor = rangeColorToHsl(grColor.value, particle.id, reduceDuplicates); - switch (rotateDirection) { - case RotateDirection.counterClockwise: - case "counterClockwise": - particle.gradient.angle.status = AnimationStatus.decreasing; - break; - case RotateDirection.clockwise: - particle.gradient.angle.status = AnimationStatus.increasing; - break; + if (!grHslColor) { + continue; } - const reduceDuplicates = particle.options.reduceDuplicates; - - for (const grColor of gradient.colors) { - const grHslColor = rangeColorToHsl(grColor.value, particle.id, reduceDuplicates); - - if (grHslColor) { - const grHslAnimation = getHslAnimationFromHsl( - grHslColor, - grColor.value.animation, - particle.container.retina.reduceFactor - ); - - const addColor = { - stop: grColor.stop, - value: grHslAnimation, - opacity: grColor.opacity - ? { - enable: grColor.opacity.animation.enable, - max: getRangeMax(grColor.opacity.value), - min: getRangeMin(grColor.opacity.value), - status: AnimationStatus.increasing, - value: getRangeValue(grColor.opacity.value), - velocity: - (getRangeValue(grColor.opacity.animation.speed) / 100) * - particle.container.retina.reduceFactor, - decay: 1 - getRangeValue(grColor.opacity.animation.decay), - } - : undefined, - }; - - if (grColor.opacity && addColor.opacity) { - const opacityRange = grColor.opacity.value; - - addColor.opacity.min = getRangeMin(opacityRange); - addColor.opacity.max = getRangeMax(opacityRange); - - const opacityAnimation = grColor.opacity.animation; - - switch (opacityAnimation.startValue) { - case StartValueType.min: - addColor.opacity.value = addColor.opacity.min; - addColor.opacity.status = AnimationStatus.increasing; - - break; - - case StartValueType.random: - addColor.opacity.value = randomInRange(addColor.opacity); - addColor.opacity.status = - tspRandom() >= 0.5 ? AnimationStatus.increasing : AnimationStatus.decreasing; - - break; - - case StartValueType.max: - default: - addColor.opacity.value = addColor.opacity.max; - addColor.opacity.status = AnimationStatus.decreasing; - - break; - } - } - - particle.gradient.colors.push(addColor); + const grHslAnimation = getHslAnimationFromHsl( + grHslColor, + grColor.value.animation, + particle.container.retina.reduceFactor + ), + addColor = { + stop: grColor.stop, + value: grHslAnimation, + opacity: grColor.opacity + ? { + enable: grColor.opacity.animation.enable, + max: getRangeMax(grColor.opacity.value), + min: getRangeMin(grColor.opacity.value), + status: AnimationStatus.increasing, + value: getRangeValue(grColor.opacity.value), + velocity: + (getRangeValue(grColor.opacity.animation.speed) / 100) * + particle.container.retina.reduceFactor, + decay: 1 - getRangeValue(grColor.opacity.animation.decay), + } + : undefined, + }; + + if (grColor.opacity && addColor.opacity) { + const opacityRange = grColor.opacity.value; + + addColor.opacity.min = getRangeMin(opacityRange); + addColor.opacity.max = getRangeMax(opacityRange); + + const opacityAnimation = grColor.opacity.animation; + + switch (opacityAnimation.startValue) { + case StartValueType.min: + addColor.opacity.value = addColor.opacity.min; + addColor.opacity.status = AnimationStatus.increasing; + + break; + + case StartValueType.random: + addColor.opacity.value = randomInRange(addColor.opacity); + addColor.opacity.status = + tspRandom() >= 0.5 ? AnimationStatus.increasing : AnimationStatus.decreasing; + + break; + + case StartValueType.max: + default: + addColor.opacity.value = addColor.opacity.max; + addColor.opacity.status = AnimationStatus.decreasing; + + break; } } + + particle.gradient.colors.push(addColor); } } @@ -326,6 +344,39 @@ export class GradientUpdater implements IParticleUpdater { ); } + loadOptions( + options: GradientParticlesOptions, + ...sources: (RecursivePartial | undefined)[] + ): void { + for (const source of sources) { + if (!source?.gradient) { + continue; + } + + const gradientToLoad = source.gradient; + + if (!gradientToLoad) { + continue; + } + + if (gradientToLoad instanceof Array) { + options.gradient = gradientToLoad.map((s) => { + const tmp = new AnimatableGradient(); + + tmp.load(s); + + return tmp; + }); + } else { + if (!options.gradient || options.gradient instanceof Array) { + options.gradient = new AnimatableGradient(); + } + + options.gradient.load(gradientToLoad); + } + } + } + update(particle: GradientParticle, delta: IDelta): void { updateGradient(particle, delta); } diff --git a/engine/src/Options/Classes/Gradients/AnimatableGradient.ts b/updaters/gradient/src/Options/Classes/AnimatableGradient.ts similarity index 76% rename from engine/src/Options/Classes/Gradients/AnimatableGradient.ts rename to updaters/gradient/src/Options/Classes/AnimatableGradient.ts index 767197d50fe..bb0e6960d26 100644 --- a/engine/src/Options/Classes/Gradients/AnimatableGradient.ts +++ b/updaters/gradient/src/Options/Classes/AnimatableGradient.ts @@ -1,9 +1,8 @@ +import type { IOptionLoader, RecursivePartial } from "tsparticles-engine"; import { AnimatableGradientColor } from "./AnimatableGradientColor"; import { GradientAngle } from "./GradientAngle"; -import { GradientType } from "../../../Enums/Types/GradientType"; -import type { IAnimatableGradient } from "../../Interfaces/IAnimatableGradient"; -import type { IOptionLoader } from "../../Interfaces/IOptionLoader"; -import type { RecursivePartial } from "../../../Types/RecursivePartial"; +import { GradientType } from "tsparticles-engine"; +import type { IAnimatableGradient } from "../Interfaces/IAnimatableGradient"; export class AnimatableGradient implements IAnimatableGradient, IOptionLoader { angle: GradientAngle; diff --git a/engine/src/Options/Classes/Gradients/AnimatableGradientColor.ts b/updaters/gradient/src/Options/Classes/AnimatableGradientColor.ts similarity index 76% rename from engine/src/Options/Classes/Gradients/AnimatableGradientColor.ts rename to updaters/gradient/src/Options/Classes/AnimatableGradientColor.ts index 67627f0761b..e70391812d7 100644 --- a/engine/src/Options/Classes/Gradients/AnimatableGradientColor.ts +++ b/updaters/gradient/src/Options/Classes/AnimatableGradientColor.ts @@ -1,8 +1,7 @@ -import { AnimatableColor } from "../AnimatableColor"; +import type { IOptionLoader, RecursivePartial } from "tsparticles-engine"; +import { AnimatableColor } from "tsparticles-engine"; import { GradientColorOpacity } from "./GradientColorOpacity"; -import type { IAnimatableGradientColor } from "../../Interfaces/IOptionsGradient"; -import type { IOptionLoader } from "../../Interfaces/IOptionLoader"; -import type { RecursivePartial } from "../../../Types/RecursivePartial"; +import type { IAnimatableGradientColor } from "../Interfaces/IOptionsGradient"; export class AnimatableGradientColor implements IAnimatableGradientColor, IOptionLoader { opacity?: GradientColorOpacity; diff --git a/engine/src/Options/Classes/Gradients/GradientAngle.ts b/updaters/gradient/src/Options/Classes/GradientAngle.ts similarity index 62% rename from engine/src/Options/Classes/Gradients/GradientAngle.ts rename to updaters/gradient/src/Options/Classes/GradientAngle.ts index 0a816ab41f3..5b66c3a3505 100644 --- a/engine/src/Options/Classes/Gradients/GradientAngle.ts +++ b/updaters/gradient/src/Options/Classes/GradientAngle.ts @@ -1,11 +1,7 @@ +import type { IAnimatable, IAnimation, IOptionLoader, RecursivePartial, RotateDirectionAlt } from "tsparticles-engine"; import { GradientAngleAnimation } from "./GradientAngleAnimation"; -import type { IAnimatable } from "../../Interfaces/IAnimatable"; -import type { IAnimation } from "../../Interfaces/IAnimation"; -import type { IGradientAngle } from "../../../Core/Interfaces/Gradients"; -import type { IOptionLoader } from "../../Interfaces/IOptionLoader"; -import type { RecursivePartial } from "../../../Types/RecursivePartial"; -import { RotateDirection } from "../../../Enums/Directions/RotateDirection"; -import type { RotateDirectionAlt } from "../../../Enums/Directions/RotateDirection"; +import type { IGradientAngle } from "../Interfaces/Gradients"; +import { RotateDirection } from "tsparticles-engine"; export class GradientAngle implements IGradientAngle, IAnimatable, IOptionLoader> diff --git a/engine/src/Options/Classes/Gradients/GradientAngleAnimation.ts b/updaters/gradient/src/Options/Classes/GradientAngleAnimation.ts similarity index 74% rename from engine/src/Options/Classes/Gradients/GradientAngleAnimation.ts rename to updaters/gradient/src/Options/Classes/GradientAngleAnimation.ts index 7bf02fa4f9c..a826125a2cc 100644 --- a/engine/src/Options/Classes/Gradients/GradientAngleAnimation.ts +++ b/updaters/gradient/src/Options/Classes/GradientAngleAnimation.ts @@ -1,8 +1,5 @@ -import type { IAnimation } from "../../Interfaces/IAnimation"; -import type { IOptionLoader } from "../../Interfaces/IOptionLoader"; -import type { RangeValue } from "../../../Types/RangeValue"; -import type { RecursivePartial } from "../../../Types/RecursivePartial"; -import { setRangeValue } from "../../../Utils/NumberUtils"; +import type { IAnimation, IOptionLoader, RangeValue, RecursivePartial } from "tsparticles-engine"; +import { setRangeValue } from "tsparticles-engine"; export class GradientAngleAnimation implements IAnimation, IOptionLoader { count: RangeValue; diff --git a/engine/src/Options/Classes/Gradients/GradientColorOpacity.ts b/updaters/gradient/src/Options/Classes/GradientColorOpacity.ts similarity index 57% rename from engine/src/Options/Classes/Gradients/GradientColorOpacity.ts rename to updaters/gradient/src/Options/Classes/GradientColorOpacity.ts index da5789ca240..eaa0291d7e0 100644 --- a/engine/src/Options/Classes/Gradients/GradientColorOpacity.ts +++ b/updaters/gradient/src/Options/Classes/GradientColorOpacity.ts @@ -1,12 +1,8 @@ +import type { IAnimatable, IAnimation, IOptionLoader, RangeValue, RecursivePartial } from "tsparticles-engine"; import { GradientColorOpacityAnimation } from "./GradientColorOpacityAnimation"; -import type { IAnimatable } from "../../Interfaces/IAnimatable"; -import type { IAnimation } from "../../Interfaces/IAnimation"; -import type { IGradientColorOpacity } from "../../../Core/Interfaces/Gradients"; -import type { IGradientColorOpacityAnimation } from "../../Interfaces/IOptionsGradient"; -import type { IOptionLoader } from "../../Interfaces/IOptionLoader"; -import type { RangeValue } from "../../../Types/RangeValue"; -import type { RecursivePartial } from "../../../Types/RecursivePartial"; -import { setRangeValue } from "../../../Utils/NumberUtils"; +import type { IGradientColorOpacity } from "../Interfaces/Gradients"; +import type { IGradientColorOpacityAnimation } from "../Interfaces/IOptionsGradient"; +import { setRangeValue } from "tsparticles-engine"; export class GradientColorOpacity implements diff --git a/engine/src/Options/Classes/Gradients/GradientColorOpacityAnimation.ts b/updaters/gradient/src/Options/Classes/GradientColorOpacityAnimation.ts similarity index 72% rename from engine/src/Options/Classes/Gradients/GradientColorOpacityAnimation.ts rename to updaters/gradient/src/Options/Classes/GradientColorOpacityAnimation.ts index 7bca6bd9412..04152fe3d84 100644 --- a/engine/src/Options/Classes/Gradients/GradientColorOpacityAnimation.ts +++ b/updaters/gradient/src/Options/Classes/GradientColorOpacityAnimation.ts @@ -1,9 +1,6 @@ -import type { IGradientColorOpacityAnimation } from "../../Interfaces/IOptionsGradient"; -import type { IOptionLoader } from "../../Interfaces/IOptionLoader"; -import type { RangeValue } from "../../../Types/RangeValue"; -import type { RecursivePartial } from "../../../Types/RecursivePartial"; -import { StartValueType } from "../../../Enums/Types/StartValueType"; -import { setRangeValue } from "../../../Utils/NumberUtils"; +import type { IOptionLoader, RangeValue, RecursivePartial } from "tsparticles-engine"; +import { StartValueType, setRangeValue } from "tsparticles-engine"; +import type { IGradientColorOpacityAnimation } from "../Interfaces/IOptionsGradient"; export class GradientColorOpacityAnimation implements IGradientColorOpacityAnimation, IOptionLoader diff --git a/engine/src/Core/Interfaces/Gradients.ts b/updaters/gradient/src/Options/Interfaces/Gradients.ts similarity index 59% rename from engine/src/Core/Interfaces/Gradients.ts rename to updaters/gradient/src/Options/Interfaces/Gradients.ts index 1ceea92dfeb..9932280fcd8 100644 --- a/engine/src/Core/Interfaces/Gradients.ts +++ b/updaters/gradient/src/Options/Interfaces/Gradients.ts @@ -1,7 +1,4 @@ -import type { RotateDirection, RotateDirectionAlt } from "../../Enums/Directions/RotateDirection"; -import type { GradientType } from "../../Enums/Types/GradientType"; -import type { IOptionsColor } from "../../Options/Interfaces/IOptionsColor"; -import type { RangeValue } from "../../Types/RangeValue"; +import type { GradientType, IOptionsColor, RangeValue, RotateDirection, RotateDirectionAlt } from "tsparticles-engine"; export interface IGradientColorOpacity { value: RangeValue; diff --git a/engine/src/Options/Interfaces/IAnimatableGradient.ts b/updaters/gradient/src/Options/Interfaces/IAnimatableGradient.ts similarity index 58% rename from engine/src/Options/Interfaces/IAnimatableGradient.ts rename to updaters/gradient/src/Options/Interfaces/IAnimatableGradient.ts index e5d1041db56..a949cfac26c 100644 --- a/engine/src/Options/Interfaces/IAnimatableGradient.ts +++ b/updaters/gradient/src/Options/Interfaces/IAnimatableGradient.ts @@ -1,7 +1,6 @@ +import type { IAnimatable, IAnimation } from "tsparticles-engine"; import type { IAnimatableGradientColor, IOptionsGradient } from "./IOptionsGradient"; -import type { IAnimatable } from "./IAnimatable"; -import type { IAnimation } from "./IAnimation"; -import type { IGradientAngle } from "../../Core/Interfaces/Gradients"; +import type { IGradientAngle } from "./Gradients"; export type IAnimatableGradient = IOptionsGradient & { angle: IGradientAngle & IAnimatable; diff --git a/engine/src/Options/Interfaces/IOptionsGradient.ts b/updaters/gradient/src/Options/Interfaces/IOptionsGradient.ts similarity index 61% rename from engine/src/Options/Interfaces/IOptionsGradient.ts rename to updaters/gradient/src/Options/Interfaces/IOptionsGradient.ts index 8b3dbce599c..02f4da6640d 100644 --- a/engine/src/Options/Interfaces/IOptionsGradient.ts +++ b/updaters/gradient/src/Options/Interfaces/IOptionsGradient.ts @@ -1,8 +1,5 @@ -import type { IGradient, IGradientColor, IGradientColorOpacity } from "../../Core/Interfaces/Gradients"; -import type { IAnimatable } from "./IAnimatable"; -import type { IAnimatableColor } from "./IAnimatableColor"; -import type { IAnimation } from "./IAnimation"; -import type { StartValueType } from "../../Enums/Types/StartValueType"; +import type { IAnimatable, IAnimatableColor, IAnimation, StartValueType } from "tsparticles-engine"; +import type { IGradient, IGradientColor, IGradientColorOpacity } from "./Gradients"; export interface IGradientColorOpacityAnimation extends IAnimation { startValue: StartValueType | keyof typeof StartValueType;