feat: better layout

src/ui/BeatGroupSettings/BeatGroupSettingsView.ts

@@ -19,7 +19,8 @@ export default class BeatGroupSettingsView extends UINode implements ISubscriber
     private timeSigUpInput!: NumberInputView;
     private loopSettingsView!: BeatLikeLoopSettingsView;
     private autoBeatLengthCheckbox!: BoolBoxView;
-    private forceFullBarsCheckbox!: BoolBoxView;
+    private beatSettingsViews: BeatSettingsView[] = [];
+    private beatSettingsContainer!: HTMLDivElement;
     private autoBeatOptions!: HTMLElement;
 
     constructor(options: BeatGroupSettingsUINodeOptions) {
@@ -29,6 +30,7 @@ export default class BeatGroupSettingsView extends UINode implements ISubscriber
             BeatGroupEvents.BarCountChanged,
             BeatGroupEvents.TimeSigUpChanged,
             BeatEvents.DisplayTypeChanged,
+            BeatGroupEvents.BeatListChanged,
         ]);
     }
 
@@ -43,6 +45,27 @@ export default class BeatGroupSettingsView extends UINode implements ISubscriber
             } else {
                 this.autoBeatOptions.classList.remove("visible");
             }
+        } else if (event === BeatGroupEvents.BeatListChanged) {
+            this.remakeBeatSettingsViews();
+        }
+    }
+
+    private remakeBeatSettingsViews() {
+        const beatCount = this.beatGroup.getBeatCount();
+        this.beatSettingsViews.splice(beatCount, this.beatSettingsViews.length - beatCount);
+        for (let i = 0; i < beatCount; i++) {
+            if (this.beatSettingsViews[i]) {
+                this.beatSettingsViews[i].setBeat(this.beatGroup.getBeatByIndex(i));
+            } else {
+                this.beatSettingsViews.push(new BeatSettingsView({ beat: this.beatGroup.getBeatByIndex(i) }));
+            }
+        }
+        if (!this.beatSettingsContainer) {
+            this.beatSettingsContainer = UINode.make("div", {
+                subs: this.beatSettingsViews.map(view => view.render())
+            });
+        } else {
+            this.beatSettingsContainer.replaceChildren(...this.beatSettingsViews.map(view => view.render()));
         }
     }
 
@@ -76,10 +99,7 @@ export default class BeatGroupSettingsView extends UINode implements ISubscriber
                 }),
             ]
         });
-        const beatSettingsViews = [];
-        for (let i = 0; i < this.beatGroup.getBeatCount(); i++) {
-            beatSettingsViews.push(new BeatSettingsView({ beat: this.beatGroup.getBeatByIndex(i) }));
-        }
+        this.remakeBeatSettingsViews();
         this.node = UINode.make("div", {
             classes: ["beat-group-settings"],
             subs: [
@@ -104,7 +124,7 @@ export default class BeatGroupSettingsView extends UINode implements ISubscriber
                             innerText: "New Track",
                             onclick: () => this.beatGroup.addBeat(),
                         }),
-                        ...beatSettingsViews.map(view => view.render()),
+                        this.beatSettingsContainer
                     ],
                 }),
             ],

src/ui/BeatLikeLoopSettings/BeatLikeLoopSettings.css

@@ -1,5 +1,4 @@
 .loop-settings {
-    margin-top: 1em;
 }
 
 .loop-settings-option-group {

src/ui/BeatLikeLoopSettings/BeatLikeLoopSettingsView.ts

@@ -9,6 +9,7 @@ import BoolBoxView from "../Widgets/BoolBox/BoolBoxView";
 
 export type BeatLikeLoopSettingsViewUINodeOptions = UINodeOptions & {
     beatLike: BeatLike,
+    title?: string,
 };
 
 export default class BeatLikeLoopSettingsView extends UINode implements ISubscriber {
@@ -16,10 +17,12 @@ export default class BeatLikeLoopSettingsView extends UINode implements ISubscri
     private loopLengthInput!: NumberInputView;
     private loopCheckbox!: BoolBoxView;
     private loopLengthSection!: HTMLDivElement;
+    private title: string;
 
     constructor(options: BeatLikeLoopSettingsViewUINodeOptions) {
         super(options);
         this.beatLike = options.beatLike;
+        this.title = options.title ?? "Looping settings:";
         this.setupBindings();
     }
 
@@ -30,7 +33,7 @@ export default class BeatLikeLoopSettingsView extends UINode implements ISubscri
         ]);
     }
 
-    notify<T extends string | number>(publisher: IPublisher<T>, event: "all" | T[] | T): void {
+    notify<T extends string | number>(publisher: IPublisher<T> | null, event: "all" | T[] | T): void {
         if (event === BeatEvents.LoopLengthChanged) {
             this.loopLengthInput.setValue(this.beatLike.getLoopLength());
         } else if (event === BeatEvents.DisplayTypeChanged) {
@@ -43,6 +46,12 @@ export default class BeatLikeLoopSettingsView extends UINode implements ISubscri
         }
     }
 
+    setBeatLike(beatLike: BeatLike): void {
+        this.beatLike = beatLike;
+        this.notify(null, BeatEvents.LoopLengthChanged);
+        this.notify(null, BeatEvents.DisplayTypeChanged);
+    }
+
     rebuild(): HTMLElement {
         this.loopLengthInput = new NumberInputView({
             initialValue: this.beatLike.getLoopLength(),
@@ -70,7 +79,7 @@ export default class BeatLikeLoopSettingsView extends UINode implements ISubscri
         this.node = UINode.make("div", {
             classes: ["loop-settings"],
             subs: [
-                UINode.make("p", {innerText: "Global looping settings:"}),
+                UINode.make("p", {innerText: this.title}),
                 UINode.make("div", {
                     classes: ["loop-settings-option-group"],
                     subs: [

src/ui/BeatSettings/BeatSettings.css

@@ -24,3 +24,8 @@
 .beat-settings-time-sig input {
     margin: auto;
 }
+
+.beat-settings-name-field {
+    margin: auto auto auto auto;
+    width: 5em;
+}

src/ui/BeatSettings/BeatSettingsView.ts

@@ -11,7 +11,6 @@ export type BeatSettingsViewUINodeOptions = UINodeOptions & {
 
 export default class BeatSettingsView extends UINode implements ISubscriber {
     private beat: Beat;
-    private visible = false;
     private nameInput!: HTMLInputElement;
     private loopSettingsView!: BeatLikeLoopSettingsView;
 
@@ -25,7 +24,13 @@ export default class BeatSettingsView extends UINode implements ISubscriber {
         this.beat.addSubscriber(this, "all");
     }
 
-    notify<T extends string | number>(publisher: IPublisher<T>, event: "all" | T[] | T): void {
+    setBeat(beat: Beat): void {
+        this.beat = beat;
+        this.loopSettingsView.setBeatLike(beat);
+        this.notify(null, BeatEvents.NewName);
+    }
+
+    notify<T extends string | number>(publisher: IPublisher<T> | null, event: "all" | T[] | T): void {
         if (event === BeatEvents.NewName) {
             this.nameInput.value = this.beat.getName();
         }
@@ -35,6 +40,7 @@ export default class BeatSettingsView extends UINode implements ISubscriber {
         this.loopSettingsView = new BeatLikeLoopSettingsView({beatLike: this.beat});
         this.nameInput = UINode.make("input", {
             value: this.beat.getName(),
+            classes: ["beat-settings-name-field"],
             type: "text",
             oninput: (event: Event) => this.beat.setName((event.target as HTMLInputElement).value),
         });

src/ui/Root/Root.css

@@ -25,7 +25,8 @@
     background-color: var(--color-bg-light);
     height: 100%;
     width: 30em;
-    padding: 3em;
+    padding: 0 3em 0 3em;
+    overflow: scroll;
     display: inline-block;
 }