feat: added a lot of styling, new inc/dec widget, new folder structure for widgets

2021-09-05 14:39:29 +02:00
parent 3f8c82dcaf
commit 5f23e6db12
17 changed files with 466 additions and 223 deletions
--- a/src/ui/BeatSettings/BeatSettingsView.ts
+++ b/src/ui/BeatSettings/BeatSettingsView.ts
@@ -0,0 +1,91 @@
+import "./BeatSettings.css";
+import Beat, {BeatEvents} from "../../Beat";
+import UINode, {UINodeOptions} from "../UINode";
+import ISubscriber from "../../Subscriber";
+import NumberInputView from "../Widgets/NumberInput/NumberInputView";
+import BeatLikeLoopSettingsView from "../BeatLikeLoopSettings/BeatLikeLoopSettingsView";
+import {IPublisher} from "../../Publisher";
+
+export type BeatSettingsViewUINodeOptions = UINodeOptions & {
+    beat: Beat,
+};
+
+export default class BeatSettingsView extends UINode implements ISubscriber {
+    private beat: Beat;
+    private visible = false;
+    private timeSigUp!: NumberInputView;
+    private timeSigDown!: NumberInputView;
+    private barCountInput!: NumberInputView;
+    private loopSettingsView!: BeatLikeLoopSettingsView;
+
+    constructor(options: BeatSettingsViewUINodeOptions) {
+        super(options);
+        this.beat = options.beat;
+        this.setupBindings();
+    }
+
+    private setupBindings() {
+        this.beat.addSubscriber(this, "all");
+    }
+
+    notify<T extends string | number>(publisher: IPublisher<T>, event: "all" | T[] | T): void {
+        if (event === BeatEvents.NewTimeSig) {
+            this.timeSigUp.setValue(this.beat.getTimeSigUp());
+            this.timeSigDown.setValue(this.beat.getTimeSigDown());
+        } else if (event === BeatEvents.NewBarCount) {
+            this.barCountInput.setValue(this.beat.getBarCount());
+        }
+    }
+
+    toggleVisible(): void {
+        this.visible = !this.visible;
+        if (this.visible) {
+            this.node?.classList.add("visible");
+        } else {
+            this.node?.classList.remove("visible");
+        }
+    }
+
+    isOpen(): boolean {
+        return this.visible;
+    }
+
+    rebuild(): HTMLElement {
+        this.loopSettingsView = new BeatLikeLoopSettingsView({beatLike: this.beat});
+        this.timeSigUp = new NumberInputView({
+            initialValue: this.beat.getTimeSigUp(),
+            setter: (value: number) => this.beat.setBarCount(value),
+            getter: () => this.beat.getBarCount(),
+        });
+        this.timeSigDown = new NumberInputView({
+            initialValue: this.beat.getTimeSigDown(),
+            setter: (value: number) => this.beat.setBarCount(value),
+            getter: () => this.beat.getBarCount(),
+        });
+        this.barCountInput = new NumberInputView({
+            label: "Bar Count:",
+            initialValue: this.beat.getBarCount(),
+            setter: (value: number) => this.beat.setBarCount(value),
+            getter: () => this.beat.getBarCount(),
+        });
+        this.node = UINode.make("div", {
+            classes: ["beat-settings"],
+            subs: [
+                UINode.make("div", {
+                    classes: ["beat-settings-time-sig", "beat-settings-option-group", "beat-settings-option"],
+                    subs: [
+                        UINode.make("label", {innerText: "Time Signature:"}),
+                        this.timeSigUp.render(),
+                        this.timeSigDown.render(),
+                    ]
+                }),
+                UINode.make("div", {
+                    classes: ["beat-settings-bar", "beat-settings-option-group", "beat-settings-option"],
+                    subs: [this.barCountInput.render()],
+                }),
+                this.loopSettingsView.render(),
+            ],
+        });
+        return this.node;
+    }
+}