feat: added autobeat for full bars

src/ui/BeatGroup/Beat/BeatSettings/BeatSettingsView.ts

@@ -3,7 +3,6 @@ import Beat, {BeatEvents} from "../../../../Beat";
 import {IPublisher} from "../../../../Publisher";
 import ISubscriber from "../../../../Subscriber";
 import "./BeatSettings.css";
-import BeatLike from "../../../../BeatLike";
 import BeatLikeLoopSettingsView from "../../BeatLikeLoopSettings/BeatLikeLoopSettingsView";
 
 export type BeatSettingsViewUINodeOptions = UINodeOptions & {

src/ui/BeatGroup/Beat/BeatView.ts

@@ -18,8 +18,8 @@ export default class BeatView extends UINode implements ISubscriber {
     private beatUnitViews: BeatUnitView[] = [];
     private beatUnitViewBlock: HTMLElement | null = null;
     private lastHoveredBeatUnitView: BeatUnitView | null = null;
-    private static deselectingUnits = false;
-    private static selectingUnits = false;
+    static deselectingUnits = false;
+    static selectingUnits = false;
 
     constructor(options: BeatUINodeOptions) {
         super(options);
@@ -68,11 +68,6 @@ export default class BeatView extends UINode implements ISubscriber {
                     view = new BeatUnitView({beatUnit});
                     this.beatUnitViews.push(view);
                 }
-                view.onMouseDown((event: MouseEvent) => this.onBeatUnitClick(event.button, i));
-                window.addEventListener("mouseup", (event: MouseEvent) => {
-                    BeatView.selectingUnits = false;
-                    BeatView.deselectingUnits = false;
-                });
                 view.onHover(() => {
                     this.lastHoveredBeatUnitView = view;
                     if (BeatView.selectingUnits) {
@@ -81,6 +76,7 @@ export default class BeatView extends UINode implements ISubscriber {
                         this.lastHoveredBeatUnitView.turnOff();
                     }
                 });
+                view.onMouseDown((event: MouseEvent) => this.onBeatUnitClick(event.button, i));
             }
         }
     }
@@ -149,6 +145,9 @@ export default class BeatView extends UINode implements ISubscriber {
             classes: ["beat-title"],
         });
         this.setupBeatUnits();
+        if (!this.beatUnitViewBlock) {
+            throw new Error("Beat unit block setup failed!");
+        }
         this.settingsView = new BeatSettingsView({beat: this.beat});
         this.settingsToggleButton = UINode.make("div", {
             classes: ["beat-settings-btn"],
@@ -162,7 +161,7 @@ export default class BeatView extends UINode implements ISubscriber {
                     classes: ["beat-main"],
                     subs: [
                         this.title,
-                        this.beatUnitViewBlock!,
+                        this.beatUnitViewBlock,
                     ]
                 }),
                 this.settingsToggleButton,
@@ -175,3 +174,8 @@ export default class BeatView extends UINode implements ISubscriber {
         return this.node;
     }
 }
+
+window.addEventListener("mouseup", () => {
+    BeatView.selectingUnits = false;
+    BeatView.deselectingUnits = false;
+});

src/ui/BeatGroup/BeatGroupSettings/BeatGroupSettings.css

@@ -12,3 +12,10 @@
     display: inline-block;
     text-align: center;
 }
+
+.beat-group-settings-option-group {
+    display: none;
+}
+.beat-group-settings-option-group.visible {
+    display: inline-block;
+}

src/ui/BeatGroup/BeatGroupSettings/BeatGroupSettingsView.ts

@@ -5,6 +5,7 @@ import {IPublisher} from "../../../Publisher";
 import {BeatGroupEvents} from "../../../BeatGroup";
 import BeatLikeLoopSettingsView from "../BeatLikeLoopSettings/BeatLikeLoopSettingsView";
 import "./BeatGroupSettings.css";
+import {BeatEvents} from "../../../Beat";
 
 export type BeatGroupSettingsUINodeOptions = UINodeOptions & {
     beatGroup: BeatGroup,
@@ -15,21 +16,31 @@ export default class BeatGroupSettingsView extends UINode implements ISubscriber
     private barCountInput!: HTMLInputElement;
     private timeSigUpInput!: HTMLInputElement;
     private loopSettingsView!: BeatLikeLoopSettingsView;
+    private autoBeatLengthCheckbox!: HTMLInputElement;
+    private forceFullBarsCheckbox!: HTMLInputElement;
+    private autoBeatOptions!: HTMLElement;
 
     constructor(options: BeatGroupSettingsUINodeOptions) {
         super(options);
         this.beatGroup = options.beatGroup;
         this.beatGroup.addSubscriber(this, [
-            BeatGroupEvents.GlobalBarCountChanged,
-            BeatGroupEvents.GlobalTimeSigUpChanged
+            BeatGroupEvents.BarCountChanged,
+            BeatGroupEvents.TimeSigUpChanged,
+            BeatEvents.DisplayTypeChanged,
         ]);
     }
 
     notify<T extends string | number>(publisher: IPublisher<T>, event: "all" | T[] | T): void {
-        if (event === BeatGroupEvents.GlobalBarCountChanged) {
-            this.barCountInput.value = this.beatGroup.getBeatByIndex(0).getBarCount().toString();
-        } else if (event === BeatGroupEvents.GlobalTimeSigUpChanged) {
-            this.barCountInput.value = this.beatGroup.getBeatByIndex(0).getBarCount().toString();
+        if (event === BeatGroupEvents.BarCountChanged) {
+            this.barCountInput.valueAsNumber = this.beatGroup.getBeatByIndex(0).getBarCount();
+        } else if (event === BeatGroupEvents.TimeSigUpChanged) {
+            this.timeSigUpInput.valueAsNumber = this.beatGroup.getBeatByIndex(0).getTimeSigUp();
+        } else if (event === BeatEvents.DisplayTypeChanged) {
+            if (this.beatGroup.isLooping()) {
+                this.autoBeatOptions.classList.add("visible");
+            } else {
+                this.autoBeatOptions.classList.remove("visible");
+            }
         }
     }
 
@@ -46,13 +57,44 @@ export default class BeatGroupSettingsView extends UINode implements ISubscriber
             type: "number",
             value: this.beatGroup.getBeatByIndex(0).getTimeSigUp().toString(),
             oninput: () => {
-                this.beatGroup.setGlobalTimeSigUp(Number(this.timeSigUpInput.value));
+                this.beatGroup.setTimeSigUp(Number(this.timeSigUpInput.value));
             },
         });
+        this.autoBeatLengthCheckbox = UINode.make("input", {
+            type: "checkbox",
+            checked: this.beatGroup.autoBeatLengthOn(),
+            oninput: () => {
+                this.beatGroup.setIsUsingAutoBeatLength(this.autoBeatLengthCheckbox.checked);
+            },
+        });
+        this.forceFullBarsCheckbox = UINode.make("input", {
+            type: "checkbox",
+            checked: this.beatGroup.forcesFullBars(),
+            oninput: () => {
+                this.beatGroup.setForcesFullBars(this.forceFullBarsCheckbox.checked);
+            },
+        });
+        this.autoBeatOptions = UINode.make("div", {
+            classes: ["beat-group-settings-option-group"],
+            subs: [
+                UINode.make("div", {
+                    subs: [
+                        UINode.make("label", { innerText: "Auto beat length:"}),
+                        this.autoBeatLengthCheckbox,
+                    ],
+                }),
+                UINode.make("div", {
+                    subs: [
+                        UINode.make("label", { innerText: "Force full bars:"}),
+                        this.forceFullBarsCheckbox,
+                    ],
+                }),
+            ]
+        });
         this.node = UINode.make("div", {
             classes: ["beat-group-settings"],
             subs: [
-                UINode.make("h4", { innerText: "Settings for beat" }),
+                UINode.make("div", { innerText: "Settings for beat" }),
                 UINode.make("div", {
                     classes: ["beat-group-settings-options"],
                     subs: [
@@ -71,6 +113,7 @@ export default class BeatGroupSettingsView extends UINode implements ISubscriber
                             ],
                         }),
                         this.loopSettingsView.render(),
+                        this.autoBeatOptions,
                     ],
                 }),
             ],

src/ui/BeatGroup/BeatLikeLoopSettings/BeatLikeLoopSettingsView.ts

@@ -21,7 +21,10 @@ export default class BeatLikeLoopSettingsView extends UINode implements ISubscri
     }
 
     private setupBindings() {
-        this.beatLike.addSubscriber(this, "all");
+        this.beatLike.addSubscriber(this, [
+            BeatEvents.LoopLengthChanged,
+            BeatEvents.DisplayTypeChanged
+        ]);
     }
 
     notify<T extends string | number>(publisher: IPublisher<T>, event: "all" | T[] | T): void {