feat: more ui, looping

src/ui/BeatGroup/Beat/BeatUnit/BeatUnitView.ts

@@ -1,4 +1,4 @@
-import BeatUnit, {BeatUnitEvents} from "../../../../BeatUnit";
+import BeatUnit, {BeatUnitEvents, BeatUnitType} from "../../../../BeatUnit";
 import ISubscriber from "../../../../Subscriber";
 import UINode, {UINodeOptions} from "../../../UINode";
 import {IPublisher} from "../../../../Publisher";
@@ -10,37 +10,79 @@ export type BeatUnitUINodeOptions = UINodeOptions & {
 
 export default class BeatUnitView extends UINode implements ISubscriber {
     private beatUnit: BeatUnit;
+    private subscription!: {unbind: () => void};
 
     constructor(options: BeatUnitUINodeOptions) {
         super(options);
         this.beatUnit = options.beatUnit;
         this.setupBindings();
+    }
+
+    setUnit(beatUnit: BeatUnit): void {
+        this.subscription.unbind();
+        this.beatUnit = beatUnit;
+        this.setupBindings();
         this.rebuild();
+        this.redraw();
     }
 
     private setupBindings() {
-        this.beatUnit.addSubscriber(this, "all");
+        this.subscription = this.beatUnit.addSubscriber(this, "all");
     }
 
-    notify<T extends string | number>(publisher: IPublisher<T>, event: "all" | T[] | T) {
+    toggle(): void {
+        this.beatUnit.toggle();
+    }
+
+    turnOn(): void {
+        this.beatUnit.setOn(true);
+    }
+
+    turnOff(): void {
+        this.beatUnit.setOn(false);
+    }
+
+    notify<T extends string | number>(publisher: IPublisher<T>, event: "all" | T[] | T): void {
         if (event === BeatUnitEvents.On) {
-            this.node?.classList.add("on");
+            this.node?.classList.add("beat-unit-on");
         } else if (event === BeatUnitEvents.Off) {
-            this.node?.classList.remove("on");
+            this.node?.classList.remove("beat-unit-on");
+        } else if (event === BeatUnitEvents.TypeChange) {
+            if (this.beatUnit.getType() === BeatUnitType.GhostNote) {
+                this.node?.classList.add("beat-unit-ghost");
+            } else {
+                this.node?.classList.remove("beat-unit-ghost");
+            }
         }
     }
 
     rebuild(): HTMLElement {
         const classes = ["beat-unit"];
         if (this.beatUnit.isOn()) {
-            classes.push("on");
+            classes.push("beat-unit-on");
         }
         this.node = UINode.make("div", {
             classes: classes,
-            onclick: () => {
-                this.beatUnit.toggle();
+            oncontextmenu: () => false,
+        });
+        this.onMouseUp((ev: MouseEvent) => {
+            if (ev.button === 1) {
+                const currentType = this.beatUnit.getType();
+                this.beatUnit.setType(currentType === BeatUnitType.GhostNote ? BeatUnitType.Normal : BeatUnitType.GhostNote);
             }
         });
         return this.node;
     }
+
+    onHover(cb: () => void): void {
+        this.getNode().onmouseover = cb;
+    }
+
+    onMouseDown(cb: (ev: MouseEvent) => void): void {
+        this.getNode().onmousedown = cb;
+    }
+
+    onMouseUp(cb: (ev: MouseEvent) => void): void {
+        this.getNode().onmouseup = cb;
+    }
 }