fix: fixed track unit event handling and initialisation

src/ui/Beat/BeatView.ts

@@ -29,17 +29,17 @@ export default class BeatView extends UINode implements ISubscriber<EventTypeSub
         this.title = options.title;
         this.currentOrientation = options.orientation ?? "horizontal";
         this.subscription = this.beat.addSubscriber(this, EventTypeSubscriptions);
-        this.setupBeatViews();
+        this.setupTrackViews();
     }
 
     notify(publisher: unknown, event: EventTypeSubscriptions): void {
         if (event === BeatEvents.TrackListChanged) {
-            this.setupBeatViews();
+            this.setupTrackViews();
             this.redraw();
         }
     }
 
-    private setupBeatViews(): void {
+    private setupTrackViews(): void {
         const newCount = this.beat.getTrackCount();
         for (let i = 0; i < newCount; i++) {
             const beat = this.beat.getTrackByIndex(i);
@@ -69,11 +69,11 @@ export default class BeatView extends UINode implements ISubscriber<EventTypeSub
         this.redraw();
     }
 
-    setBeatGroup(newBeatGroup: Beat): void {
+    setBeat(newBeat: Beat): void {
-        this.beat = newBeatGroup;
+        this.beat = newBeat;
         this.subscription.unbind();
         this.subscription = this.beat.addSubscriber(this, BeatEvents.TrackListChanged);
-        this.setupBeatViews();
+        this.setupTrackViews();
         this.redraw();
     }
 

src/ui/BeatSettings/BeatSettingsView.ts

@@ -35,7 +35,7 @@ export default class BeatSettingsView extends UINode implements ISubscriber<Even
         this.setupBindings();
     }
 
-    setBeatGroup(newBeat: Beat): void {
+    setBeat(newBeat: Beat): void {
         this.beat = newBeat;
         this.setupBindings();
         EventTypeSubscriptions.forEach(eventType => this.notify(null, eventType));
@@ -78,7 +78,7 @@ export default class BeatSettingsView extends UINode implements ISubscriber<Even
             if (this.trackSettingsViews[i]) {
                 this.trackSettingsViews[i].setBeat(this.beat.getTrackByIndex(i));
             } else {
-                this.trackSettingsViews.push(new TrackSettingsView({ track: this.beat.getTrackByIndex(i) }));
+                this.trackSettingsViews.unshift(new TrackSettingsView({ track: this.beat.getTrackByIndex(i) }));
             }
         }
         if (!this.trackSettingsContainer) {

src/ui/Root/RootView.ts

@@ -62,8 +62,8 @@ export default class RootView extends UINode {
 
     setMainBeatGroup(beat: Beat): void {
         this.focusedBeat = beat;
-        this.beatSettingsView.setBeatGroup(this.focusedBeat);
+        this.beatSettingsView.setBeat(this.focusedBeat);
-        this.beatView.setBeatGroup(this.focusedBeat);
+        this.beatView.setBeat(this.focusedBeat);
         this.stageTitleBarView.setBeat(this.focusedBeat);
     }
 

src/ui/Track/TrackView.ts

@@ -72,8 +72,8 @@ export default class TrackView extends UINode implements ISubscriber<EventTypeSu
                 } else {
                     view = new TrackUnitView({trackUnit});
                     this.trackUnitViews.push(view);
-                    view.onHover(() => this.onBeatViewHover(view));
+                    view.onHover(() => this.onTrackUnitViewHover(view));
-                    view.onMouseUp((event: MouseEvent) => this.onTrackUnitClick(event.button, i));
+                    view.onMouseDown((event: MouseEvent) => this.onTrackUnitClick(event.button, i));
                 }
             }
         }
@@ -84,15 +84,14 @@ export default class TrackView extends UINode implements ISubscriber<EventTypeSu
     private onTrackUnitClick(button: number, index: number) {
         if (button === 0) {
             TrackView.selectingUnits = true;
-            this.track.getUnitByIndex(index)?.toggle();
         } else if (button === 2) {
             TrackView.deselectingUnits = true;
             this.track.getUnitByIndex(index)?.setOn(false);
         }
     }
 
-    private onBeatViewHover(trackView: TrackUnitView) {
+    private onTrackUnitViewHover(trackUnitView: TrackUnitView) {
-        this.lastHoveredTrackUnitView = trackView;
+        this.lastHoveredTrackUnitView = trackUnitView;
         if (TrackView.selectingUnits) {
             this.lastHoveredTrackUnitView.turnOn();
         } else if (TrackView.deselectingUnits) {

src/ui/TrackUnit/TrackUnitView.ts

@@ -20,14 +20,14 @@ export default class TrackUnitView extends UINode implements ISubscriber<EventTy
     private subscription: ISubscription | null = null;
     private publisher: IPublisher<TrackUnitEvent> = new Publisher<TrackUnitEvent, TrackUnitView>(this);
     private rotationTimeout: ReturnType<typeof setTimeout> | null = null;
-    private mouseUpListeners: ((ev: MouseEvent) => void)[] = [];
+    private mouseDownListeners: ((ev: MouseEvent) => void)[] = [];
     private hoverListeners: ((ev: MouseEvent) => void)[] = [];
     private blockNextMouseUp = false;
 
     constructor(options: TrackUnitUINodeOptions) {
         super(options);
         this.trackUnit = options.trackUnit;
-        this.setupBindings();
+        this.setUnit(this.trackUnit);
     }
 
     setUnit(trackUnit: TrackUnit | null): void {
@@ -45,8 +45,12 @@ export default class TrackUnitView extends UINode implements ISubscriber<EventTy
         this.subscription?.unbind();
         this.subscription = this.trackUnit.addSubscriber(this, EventTypeSubscriptions);
         this.hoverListeners.forEach(listener => this.getNode().removeEventListener("mouseover", listener));
+        this.mouseDownListeners.forEach(listener => this.getNode().removeEventListener("mousedown", listener));
         this.redraw();
+        this.hoverListeners.forEach(listener => this.getNode().addEventListener("mouseover", listener));
+        this.mouseDownListeners.forEach(listener => this.getNode().addEventListener("mousedown", listener));
         this.getNode().addEventListener("mousedown", (ev) => this.handleMouseDown(ev));
+        this.getNode().addEventListener("mouseout", (ev) => this.handleMouseOut(ev));
         this.getNode().addEventListener("mouseup", (ev) => this.handleMouseUp(ev));
         this.getNode().addEventListener("touchstart", (ev) => this.handleTouchStart(ev));
         this.getNode().addEventListener("touchend", (ev) => this.handleTouchEnd(ev));
@@ -56,6 +60,7 @@ export default class TrackUnitView extends UINode implements ISubscriber<EventTy
         if (ev.button === 1) {
             this.trackUnit.rotateType();
         } else if (ev.button === 0) {
+            this.toggle();
             this.rotationTimeout = this.rotationTimeout || setTimeout(() => {
                 this.trackUnit.rotateType();
                 this.blockNextMouseUp = true;
@@ -64,13 +69,20 @@ export default class TrackUnitView extends UINode implements ISubscriber<EventTy
         }
     }
 
+    private handleMouseOut(ev: MouseEvent): void {
+        if (this.rotationTimeout) {
+            clearTimeout(this.rotationTimeout);
+            this.rotationTimeout = null;
+        }
+    }
+
     private handleMouseUp(ev: MouseEvent): void {
         if (this.rotationTimeout) {
             clearTimeout(this.rotationTimeout);
             this.rotationTimeout = null;
         }
         if (!this.blockNextMouseUp) {
-            this.mouseUpListeners.forEach(listener => listener(ev));
+            this.mouseDownListeners.forEach(listener => listener(ev));
         }
         this.blockNextMouseUp = false;
     }
@@ -148,7 +160,8 @@ export default class TrackUnitView extends UINode implements ISubscriber<EventTy
         this.getNode().addEventListener("mouseover", cb);
     }
 
-    onMouseUp(cb: (ev: MouseEvent) => void): void {
+    onMouseDown(cb: (ev: MouseEvent) => void): void {
-        this.mouseUpListeners.push(cb);
+        this.mouseDownListeners.push(cb);
+        this.getNode().addEventListener("mousedown", cb);
     }
 }