feat: added roll editor

tsparticles · Jun 28, 2021 · 4560212 · 4560212
1 parent d237d30
commit 4560212
Show file tree

Hide file tree

Showing 3 changed files with 101 additions and 1 deletion.
diff --git a/core/editor/src/Sections/Options/Particles/ParticlesOptionsEditor.ts b/core/editor/src/Sections/Options/Particles/ParticlesOptionsEditor.ts
@@ -20,6 +20,7 @@ import { EditorType } from "object-gui";
 import { DestroyOptionsEditor } from "./Destroy/DestroyOptionsEditor";
 import { TiltOptionsEditor } from "./Tilt/TiltOptionsEditor";
 import { WobbleOptionsEditor } from "./Wobble/WobbleOptionsEditor";
+import { RollOptionsEditor } from "./Roll/RollOptionsEditor";
 
 export class ParticlesOptionsEditor extends EditorBase {
     group!: EditorGroup;
@@ -42,6 +43,7 @@ export class ParticlesOptionsEditor extends EditorBase {
         this.addMove();
         this.addNumber();
         this.addOpacity();
+        this.addRoll();
         this.addRotate();
         this.addShadow();
         this.addShape();
@@ -107,6 +109,12 @@ export class ParticlesOptionsEditor extends EditorBase {
         options.addToGroup(this.group);
     }
 
+    private addRoll(): void {
+        const options = new RollOptionsEditor(this.particles);
+
+        options.addToGroup(this.group);
+    }
+
     private addRotate(): void {
         const options = new RotateOptionsEditor(this.particles);
 

diff --git a/core/editor/src/Sections/Options/Particles/Roll/RollOptionsEditor.ts b/core/editor/src/Sections/Options/Particles/Roll/RollOptionsEditor.ts
@@ -0,0 +1,92 @@
+import type { Container } from "tsparticles";
+import { EditorGroup, EditorType } from "object-gui";
+import { EditorBase } from "../../../../EditorBase";
+import type { IRoll } from "tsparticles/Options/Interfaces/Particles/Roll/IRoll";
+
+export class RollOptionsEditor extends EditorBase {
+    group!: EditorGroup;
+    private options!: IRoll;
+
+    constructor(particles: Container) {
+        super(particles);
+    }
+
+    addToGroup(parent: EditorGroup): void {
+        this.group = parent.addGroup("roll", "Roll");
+        this.options = this.group.data as IRoll;
+
+        this.addDarken();
+        this.addEnlighten();
+        this.addProperties();
+    }
+
+    private addDarken() {
+        const particles = this.particles;
+        const group = this.group.addGroup("darken", "Darken");
+
+        group.addProperty("enable", "Enable", EditorType.boolean).change(async () => {
+            await particles.refresh();
+        });
+
+        group.addProperty("value", "Value", EditorType.number).change(async () => {
+            await particles.refresh();
+        });
+    }
+
+    private addEnlighten() {
+        const particles = this.particles;
+        const group = this.group.addGroup("enlighten", "Enlighten");
+
+        group.addProperty("enable", "Enable", EditorType.boolean).change(async () => {
+            await particles.refresh();
+        });
+
+        group.addProperty("value", "Value", EditorType.number).change(async () => {
+            await particles.refresh();
+        });
+    }
+
+    private addProperties(): void {
+        const particles = this.particles;
+        const color =
+            typeof this.options.backColor === "string"
+                ? this.options.backColor
+                : this.options.backColor instanceof Array
+                ? this.options.backColor[0]
+                : this.options.backColor?.value;
+
+        this.group
+            .addProperty("backColor", "Back Color", EditorType.color, color, false)
+            .change(async (value: unknown) => {
+                if (typeof value === "string") {
+                    if (typeof this.options.backColor === "string") {
+                        this.options.backColor = value;
+                    } else {
+                        if (this.options.backColor === undefined) {
+                            this.options.backColor = {
+                                value: value,
+                            };
+                        } else {
+                            if (this.options.backColor instanceof Array) {
+                                this.options.backColor = {
+                                    value: value,
+                                };
+                            } else {
+                                this.options.backColor.value = value;
+                            }
+                        }
+                    }
+                }
+
+                await particles.refresh();
+            });
+
+        this.group.addProperty("enable", "Enable", EditorType.boolean).change(async () => {
+            await particles.refresh();
+        });
+
+        this.group.addProperty("speed", "Speed", EditorType.number).change(async () => {
+            await particles.refresh();
+        });
+    }
+}
diff --git a/demo/editor/app.js b/demo/editor/app.js
@@ -12,7 +12,7 @@ app.set('views', './views');
 app.set('view engine', 'pug');
 app.use(stylus.middleware('./public'));
 app.use(express.static('./public'));
-app.use("/tsparticles", express.static("./node_modules/tsparticles/dist"));
+app.use("/tsparticles", express.static("./node_modules/tsparticles"));
 app.use("/object-gui", express.static("./node_modules/object-gui/dist"));
 app.use("/tsparticles-editor", express.static("./node_modules/tsparticles-editor/dist"));
 app.use("/pathseg", express.static("./node_modules/pathseg/"));