feat: moved twinkle options to twinkle updater package

tsparticles · Jun 6, 2022 · d6389d4 · d6389d4
1 parent 85abd01
commit d6389d4
Show file tree

Hide file tree

Showing 16 changed files with 99 additions and 43 deletions.
diff --git a/editor/src/Sections/Options/Particles/Twinkle/TwinkleOptionsEditor.ts b/editor/src/Sections/Options/Particles/Twinkle/TwinkleOptionsEditor.ts
@@ -1,18 +1,18 @@
-import type { Container, ITwinkle, ITwinkleValues } from "tsparticles-engine";
 import { EditorGroup, EditorType } from "object-gui";
+import type { Container } from "tsparticles-engine";
 import { EditorBase } from "../../../../EditorBase";
 
 export class TwinkleOptionsEditor extends EditorBase {
     group!: EditorGroup;
-    private options!: ITwinkle;
+    private options!: unknown;
 
     constructor(particles: Container) {
         super(particles);
     }
 
     addToGroup(parent: EditorGroup, options?: unknown): void {
         this.group = parent.addGroup("twinkle", "Twinkle", true, options);
-        this.options = this.group.data as ITwinkle;
+        this.options = this.group.data as unknown;
 
         this.addTwinkle();
     }
@@ -24,7 +24,7 @@ export class TwinkleOptionsEditor extends EditorBase {
 
     private addTwinkleValues(group: EditorGroup): void {
         const particles = this.particles;
-        const options = group.data as ITwinkleValues;
+        const options = group.data as { color: string | undefined | { value: unknown } };
         const color = typeof options.color === "string" ? options.color : options.color?.value;
 
         group.addProperty("color", "Color", EditorType.color, color, false).change(async (value: unknown) => {

diff --git a/editor/src/Sections/Options/Particles/Wobble/WobbleOptionsEditor.ts b/editor/src/Sections/Options/Particles/Wobble/WobbleOptionsEditor.ts
@@ -1,18 +1,18 @@
-import type { Container, IWobble } from "tsparticles-engine";
 import { EditorGroup, EditorType } from "object-gui";
+import type { Container } from "tsparticles-engine";
 import { EditorBase } from "../../../../EditorBase";
 
 export class WobbleOptionsEditor extends EditorBase {
     group!: EditorGroup;
-    private options!: IWobble;
+    private options!: unknown;
 
     constructor(particles: Container) {
         super(particles);
     }
 
     addToGroup(parent: EditorGroup): void {
         this.group = parent.addGroup("wobble", "Wobble");
-        this.options = this.group.data as IWobble;
+        this.options = this.group.data as unknown;
 
         this.addProperties();
     }

diff --git a/engine/src/Options/Classes/Particles/ParticlesOptions.ts b/engine/src/Options/Classes/Particles/ParticlesOptions.ts
@@ -25,7 +25,6 @@ import type { SingleOrMultiple } from "../../../Types/SingleOrMultiple";
 import { Size } from "./Size/Size";
 import { Stroke } from "./Stroke";
 import { Tilt } from "./Tilt/Tilt";
-import { Twinkle } from "./Twinkle/Twinkle";
 import { ZIndex } from "./ZIndex/ZIndex";
 import { deepExtend } from "../../../Utils/Utils";
 
@@ -56,7 +55,6 @@ export class ParticlesOptions implements IParticlesOptions, IOptionLoader<IParti
     shadow;
     stroke: SingleOrMultiple<Stroke>;
     tilt;
-    twinkle;
     zIndex;
 
     /**
@@ -124,7 +122,6 @@ export class ParticlesOptions implements IParticlesOptions, IOptionLoader<IParti
         this.size = new Size();
         this.stroke = new Stroke();
         this.tilt = new Tilt();
-        this.twinkle = new Twinkle();
         this.zIndex = new ZIndex();
     }
 
@@ -171,7 +168,6 @@ export class ParticlesOptions implements IParticlesOptions, IOptionLoader<IParti
         this.size.load(data.size);
         this.shadow.load(data.shadow);
         this.tilt.load(data.tilt);
-        this.twinkle.load(data.twinkle);
         this.zIndex.load(data.zIndex);
 
         const collisions = data.move?.collisions ?? data.move?.bounce;

diff --git a/engine/src/Options/Interfaces/Particles/IParticlesOptions.ts b/engine/src/Options/Interfaces/Particles/IParticlesOptions.ts
@@ -22,7 +22,6 @@ import type { IShape } from "./Shape/IShape";
 import type { ISize } from "./Size/ISize";
 import type { IStroke } from "./IStroke";
 import type { ITilt } from "./Tilt/ITilt";
-import type { ITwinkle } from "./Twinkle/ITwinkle";
 import type { IZIndex } from "./ZIndex/IZIndex";
 import type { ParticlesGroups } from "../../../Types/ParticlesGroups";
 import type { RecursivePartial } from "../../../Types/RecursivePartial";
@@ -65,7 +64,6 @@ export interface IParticlesOptions {
     size: ISize;
     stroke: SingleOrMultiple<IStroke>;
     tilt: ITilt;
-    twinkle: ITwinkle;
     zIndex: IZIndex;
 
     [name: string]: unknown;

diff --git a/engine/src/bundle.ts b/engine/src/bundle.ts
@@ -120,8 +120,6 @@ export * from "./Options/Classes/Particles/Size/Size";
 export * from "./Options/Classes/Particles/Size/SizeAnimation";
 export * from "./Options/Classes/Particles/Tilt/Tilt";
 export * from "./Options/Classes/Particles/Tilt/TiltAnimation";
-export * from "./Options/Classes/Particles/Twinkle/Twinkle";
-export * from "./Options/Classes/Particles/Twinkle/TwinkleValues";
 export * from "./Options/Classes/Particles/ZIndex/ZIndex";
 export * from "./Options/Classes/Responsive";
 export * from "./Options/Classes/Theme/Theme";

diff --git a/engine/src/index.ts b/engine/src/index.ts
@@ -178,8 +178,6 @@ export * from "./Options/Classes/Particles/Size/Size";
 export * from "./Options/Classes/Particles/Size/SizeAnimation";
 export * from "./Options/Classes/Particles/Tilt/Tilt";
 export * from "./Options/Classes/Particles/Tilt/TiltAnimation";
-export * from "./Options/Classes/Particles/Twinkle/Twinkle";
-export * from "./Options/Classes/Particles/Twinkle/TwinkleValues";
 export * from "./Options/Classes/Particles/ZIndex/ZIndex";
 export * from "./Options/Classes/Responsive";
 export * from "./Options/Classes/Theme/Theme";
@@ -274,8 +272,6 @@ export * from "./Options/Interfaces/Particles/Size/ISize";
 export * from "./Options/Interfaces/Particles/Size/ISizeAnimation";
 export * from "./Options/Interfaces/Particles/Tilt/ITilt";
 export * from "./Options/Interfaces/Particles/Tilt/ITiltAnimation";
-export * from "./Options/Interfaces/Particles/Twinkle/ITwinkle";
-export * from "./Options/Interfaces/Particles/Twinkle/ITwinkleValues";
 export * from "./Options/Interfaces/Particles/ZIndex/IZIndex";
 export * from "./Options/Interfaces/Theme/ITheme";
 export * from "./Options/Interfaces/Theme/IThemeDefault";

diff --git a/engine/tests/Fixture/TestContainer.ts b/engine/tests/Fixture/TestContainer.ts
@@ -4,6 +4,10 @@ import { Options } from "../../src";
 import { RecursivePartial } from "../../src";
 import { tsParticles } from "../../src";
 
+const Window = require("window");
+
+const gThis = globalThis;
+
 declare global {
     interface Window {
         SVGPathSeg: unknown;
@@ -16,6 +20,8 @@ export class TestContainer {
     container: Container;
 
     constructor(options?: RecursivePartial<IOptions>) {
+        gThis.window = new Window();
+
         window.SVGPathSeg = {} as any;
         tsParticles.init();
 
@@ -40,7 +46,7 @@ export class TestContainer {
         }
 
         this.container = new Container(tsParticles, this.id, this.options);
-        this.container.actualOptions = new Options(tsParticles);
+        this.container.actualOptions = new Options(tsParticles, this.container);
         this.container.actualOptions.load(this.container.options);
         this.container.init();
     }

diff --git a/engine/tests/Options.ts b/engine/tests/Options.ts
@@ -13,11 +13,14 @@ import {
 } from "../src";
 import type { IParticlesOptions, RecursivePartial } from "../src";
 import { describe, it } from "mocha";
+import { TestContainer } from "./Fixture/TestContainer";
 import { expect } from "chai";
 
+const testContainer = new TestContainer({});
+
 describe("Options tests", () => {
     it("checking default options", () => {
-        const options = new Options(tsParticles);
+        const options = new Options(tsParticles, testContainer.container);
 
         /* background */
         expect(options.background.color).to.include({ value: "" });
@@ -154,7 +157,7 @@ describe("Options tests", () => {
     });
 
     it("check default preset options", () => {
-        const options = new Options(tsParticles);
+        const options = new Options(tsParticles, testContainer.container);
         const preset = {
             background: {
                 color: "#0d47a1",
@@ -328,7 +331,7 @@ describe("Options tests", () => {
     });
 
     it("check test preset options", () => {
-        const options = new Options(tsParticles);
+        const options = new Options(tsParticles, testContainer.container);
         const preset = {
             background: {
                 color: "#0d47a1",
@@ -519,7 +522,7 @@ describe("Options tests", () => {
     });
 
     it("check particlesOptions override", () => {
-        const particlesOptions = new ParticlesOptions();
+        const particlesOptions = new ParticlesOptions(tsParticles, testContainer.container);
 
         const generalOptions: RecursivePartial<IParticlesOptions> = {
             number: {

diff --git a/engine/tests/Themes.ts b/engine/tests/Themes.ts
@@ -1,7 +1,10 @@
 import { ClickMode, HoverMode, MoveDirection, Options, OutMode, RotateDirection, ThemeMode, tsParticles } from "../src";
 import { describe, it } from "mocha";
+import { TestContainer } from "./Fixture/TestContainer";
 import { expect } from "chai";
 
+const testContainer = new TestContainer({});
+
 describe("Themes", () => {
     const sourceOptions = {
         themes: [
@@ -93,7 +96,7 @@ describe("Themes", () => {
         detectRetina: true,
     };
 
-    const options = new Options(tsParticles);
+    const options = new Options(tsParticles, testContainer.container);
 
     options.load(sourceOptions);
 

diff --git a/interactions/particles/links/src/LinkInstance.ts b/interactions/particles/links/src/LinkInstance.ts
@@ -1,4 +1,4 @@
-import type { Container, IContainerPlugin, IRgb, Particle } from "tsparticles-engine";
+import type { Container, IContainerPlugin, IRangeColor, IRgb, Particle, RangeValue } from "tsparticles-engine";
 import { drawLinkLine, drawLinkTriangle } from "./Utils";
 import { getDistance, getLinkColor, getRangeValue, rangeColorToRgb } from "tsparticles-engine";
 import type { ILink } from "./ILink";
@@ -145,9 +145,18 @@ export class LinkInstance implements IContainerPlugin {
              *                        from those two for the connecting line color
              */
 
-            const twinkle = p1.options.twinkle.lines;
+            const twinkle = (
+                p1.options.twinkle as {
+                    lines: {
+                        enable: boolean;
+                        frequency: number;
+                        color: IRangeColor;
+                        opacity: RangeValue;
+                    };
+                }
+            )?.lines;
 
-            if (twinkle.enable) {
+            if (twinkle?.enable) {
                 const twinkleFreq = twinkle.frequency,
                     twinkleRgb = rangeColorToRgb(twinkle.color),
                     twinkling = Math.random() < twinkleFreq;

diff --git a/...ions/Classes/Particles/Twinkle/Twinkle.ts → ...rs/twinkle/src/Options/Classes/Twinkle.ts b/...ions/Classes/Particles/Twinkle/Twinkle.ts → ...rs/twinkle/src/Options/Classes/Twinkle.ts
@@ -1,6 +1,5 @@
-import type { IOptionLoader } from "../../../Interfaces/IOptionLoader";
-import type { ITwinkle } from "../../../Interfaces/Particles/Twinkle/ITwinkle";
-import type { RecursivePartial } from "../../../../Types/RecursivePartial";
+import type { IOptionLoader, RecursivePartial } from "tsparticles-engine";
+import type { ITwinkle } from "../Interfaces/ITwinkle";
 import { TwinkleValues } from "./TwinkleValues";
 
 /**

diff --git a/...lasses/Particles/Twinkle/TwinkleValues.ts → ...nkle/src/Options/Classes/TwinkleValues.ts b/...lasses/Particles/Twinkle/TwinkleValues.ts → ...nkle/src/Options/Classes/TwinkleValues.ts
@@ -1,9 +1,6 @@
-import type { IOptionLoader } from "../../../Interfaces/IOptionLoader";
-import type { ITwinkleValues } from "../../../Interfaces/Particles/Twinkle/ITwinkleValues";
-import { OptionsColor } from "../../OptionsColor";
-import type { RangeValue } from "../../../../Types/RangeValue";
-import type { RecursivePartial } from "../../../../Types/RecursivePartial";
-import { setRangeValue } from "../../../../Utils/NumberUtils";
+import type { IOptionLoader, RangeValue, RecursivePartial } from "tsparticles-engine";
+import { OptionsColor, setRangeValue } from "tsparticles-engine";
+import type { ITwinkleValues } from "../Interfaces/ITwinkleValues";
 
 /**
  * @category Options

diff --git a/.../Interfaces/Particles/Twinkle/ITwinkle.ts → ...winkle/src/Options/Interfaces/ITwinkle.ts b/.../Interfaces/Particles/Twinkle/ITwinkle.ts → ...winkle/src/Options/Interfaces/ITwinkle.ts
diff --git a/...faces/Particles/Twinkle/ITwinkleValues.ts → .../src/Options/Interfaces/ITwinkleValues.ts b/...faces/Particles/Twinkle/ITwinkleValues.ts → .../src/Options/Interfaces/ITwinkleValues.ts
@@ -1,5 +1,4 @@
-import type { IOptionsColor } from "../../IOptionsColor";
-import type { RangeValue } from "../../../../Types/RangeValue";
+import type { IOptionsColor, RangeValue } from "tsparticles-engine";
 
 /**
  * @category Options

diff --git a/updaters/twinkle/src/TwinkleUpdater.ts b/updaters/twinkle/src/TwinkleUpdater.ts
@@ -1,5 +1,26 @@
-import type { IParticleColorStyle, IParticleUpdater, Particle } from "tsparticles-engine";
+import type {
+    IParticleColorStyle,
+    IParticleUpdater,
+    IParticlesOptions,
+    Particle,
+    ParticlesOptions,
+    RecursivePartial,
+} from "tsparticles-engine";
 import { getRangeValue, getStyleFromHsl, rangeColorToHsl } from "tsparticles-engine";
+import { ITwinkle } from "./Options/Interfaces/ITwinkle";
+import { Twinkle } from "./Options/Classes/Twinkle";
+
+type TwinkeParticle = Particle & {
+    options: TwinkleParticlesOptions;
+};
+
+type ITwinkleParticlesOptions = IParticlesOptions & {
+    twinkle?: ITwinkle;
+};
+
+type TwinkleParticlesOptions = ParticlesOptions & {
+    twinkle?: Twinkle;
+};
 
 export class TwinkleUpdater implements IParticleUpdater {
     getColorStyles(
@@ -9,7 +30,13 @@ export class TwinkleUpdater implements IParticleUpdater {
         opacity: number
     ): IParticleColorStyle {
         const pOptions = particle.options,
-            twinkle = pOptions.twinkle.particles,
+            twinkleOptions = pOptions.twinkle as Twinkle;
+
+        if (!twinkleOptions) {
+            return {};
+        }
+
+        const twinkle = twinkleOptions.particles,
             twinkling = twinkle.enable && Math.random() < twinkle.frequency,
             zIndexOptions = particle.options.zIndex,
             zOpacityFactor = (1 - particle.zIndexFactor) ** zIndexOptions.opacityRate,
@@ -29,11 +56,35 @@ export class TwinkleUpdater implements IParticleUpdater {
         // do nothing
     }
 
-    isEnabled(particle: Particle): boolean {
-        return particle.options.twinkle.particles.enable;
+    isEnabled(particle: TwinkeParticle): boolean {
+        const pOptions = particle.options,
+            twinkleOptions = pOptions.twinkle as Twinkle;
+
+        if (!twinkleOptions) {
+            return false;
+        }
+
+        return twinkleOptions.particles.enable;
     }
 
     update(): void {
         // do nothing
     }
+
+    loadOptions(
+        options: TwinkleParticlesOptions,
+        ...sources: (RecursivePartial<ITwinkleParticlesOptions> | undefined)[]
+    ): void {
+        for (const source of sources) {
+            if (!source?.twinkle) {
+                continue;
+            }
+
+            if (!options.twinkle) {
+                options.twinkle = new Twinkle();
+            }
+
+            options.twinkle.load(source.twinkle);
+        }
+    }
 }
diff --git a/utils/webpack/common/getExternals.js b/utils/webpack/common/getExternals.js
@@ -71,6 +71,7 @@ const getExternals = (bundle) => {
         "tsparticles-updater-roll",
         "tsparticles-updater-size",
         "tsparticles-updater-tilt",
+        "tsparticles-updater-twinkle",
         "tsparticles-updater-wobble");
 };