88 lines
2.5 KiB
TypeScript
88 lines
2.5 KiB
TypeScript
import BeatUnit, {BeatUnitEvents, BeatUnitType} from "../../../../BeatUnit";
|
|
import ISubscriber from "../../../../Subscriber";
|
|
import UINode, {UINodeOptions} from "../../../UINode";
|
|
import {IPublisher} from "../../../../Publisher";
|
|
import "./BeatUnit.css";
|
|
|
|
export type BeatUnitUINodeOptions = UINodeOptions & {
|
|
beatUnit: BeatUnit,
|
|
};
|
|
|
|
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.redraw();
|
|
}
|
|
|
|
private setupBindings() {
|
|
this.subscription = this.beatUnit.addSubscriber(this, "all");
|
|
}
|
|
|
|
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("beat-unit-on");
|
|
} else if (event === BeatUnitEvents.Off) {
|
|
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("beat-unit-on");
|
|
}
|
|
this.node = UINode.make("div", {
|
|
classes: classes,
|
|
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;
|
|
}
|
|
}
|