feat: added motion options to editor

tsparticles · Sep 29, 2020 · 80a30a7 · 80a30a7
1 parent c1da926
commit 80a30a7
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 1 deletion.
diff --git a/core/editor/src/Sections/Options/BackgroundMask/BackgroundMaskOptionsEditor.ts b/core/editor/src/Sections/Options/BackgroundMask/BackgroundMaskOptionsEditor.ts
@@ -38,7 +38,7 @@ export class BackgroundMaskOptionsEditor extends EditorBase {
             });
 
         coverGroup
-            .addProperty("opacity", "Opacity", EditorType.number, typeof options.opacity)
+            .addProperty("opacity", "Opacity", EditorType.number)
             .change(async () => {
                 await particles.refresh();
             })

diff --git a/core/editor/src/Sections/Options/Motion/MotionOptionsEditor.ts b/core/editor/src/Sections/Options/Motion/MotionOptionsEditor.ts
@@ -0,0 +1,45 @@
+import type { Container } from "tsparticles/dist/Core/Container";
+import { EditorGroup, EditorType } from "object-gui";
+import { EditorBase } from "../../../EditorBase";
+import type { IMotion } from "tsparticles/dist/Options/Interfaces/Motion/IMotion";
+
+export class MotionOptionsEditor extends EditorBase {
+    private group!: EditorGroup;
+    private options!: IMotion;
+
+    constructor(particles: Container) {
+        super(particles);
+    }
+
+    public addToGroup(parent: EditorGroup): void {
+        this.group = parent.addGroup("motion", "Motion");
+        this.options = this.group.data as IMotion;
+
+        this.addReduce();
+        this.addProperties();
+    }
+
+    private addReduce(): void {
+        const particles = this.particles;
+        const coverGroup = this.group.addGroup("reduce", "Reduce");
+
+        coverGroup
+            .addProperty("factor", "Factor", EditorType.number)
+            .change(async () => {
+                await particles.refresh();
+            })
+            .step(1);
+
+        coverGroup.addProperty("value", "Value", EditorType.boolean).change(async () => {
+            await particles.refresh();
+        });
+    }
+
+    private addProperties(): void {
+        const particles = this.particles;
+
+        this.group.addProperty("disable", "Disable", EditorType.boolean).change(async () => {
+            await particles.refresh();
+        });
+    }
+}
diff --git a/core/editor/src/Sections/Options/OptionsEditor.ts b/core/editor/src/Sections/Options/OptionsEditor.ts
@@ -8,6 +8,7 @@ import { InfectionOptionsEditor } from "./Infection/InfectionOptionsEditor";
 import { Editor, EditorGroup, EditorType } from "object-gui";
 import { EditorBase } from "../../EditorBase";
 import { BackgroundModeOptionsEditor } from "./BackgroundMode/BackgroundModeOptionsEditor";
+import { MotionOptionsEditor } from "./Motion/MotionOptionsEditor";
 
 export class OptionsEditor extends EditorBase {
     public group!: EditorGroup;
@@ -26,6 +27,7 @@ export class OptionsEditor extends EditorBase {
         this.addBackgroundMode();
         this.addInfection();
         this.addInteractivity();
+        this.addMotion();
         this.addParticles();
 
         this.addProperties();
@@ -81,6 +83,12 @@ export class OptionsEditor extends EditorBase {
         options.addToGroup(this.group);
     }
 
+    private addMotion(): void {
+        const options = new MotionOptionsEditor(this.particles);
+
+        options.addToGroup(this.group);
+    }
+
     private addParticles(): void {
         const options = new ParticlesOptionsEditor(this.particles);