feat: cleaned up mouse behaviour and saving

src/ui/Track/Track.vue

@@ -3,15 +3,17 @@
         <div class="track-main">
             <div class="track-unit-block">
                 <track-unit v-for="(trackUnit, i) in trackUnits" 
+                    :key="`tu${ trackIndex }${ i }`"
+                    :id="`tu${ trackIndex }${ i }`"
                     class="track-unit"
                     :class="{ spaced: (i + 1) % beat!.timeSigUp.value === 0 }"
                     :sticking-type="trackUnit.stickingType"
                     :type="trackUnit.type"
                     :on="trackUnit.on"
                     @rotate-type="rotateTrackUnit(i)"
-                    @mouseup="applyCurrentToolToTrackUnit(i)"
-                    @mousedown="applyCurrentToolToTrackUnit(i)"
-                    @mouseover="applyCurrentToolToTrackUnit(i)" />
+                    @deactivate="deactivateUnit(i)"
+                    @toggle="toggle(i)"
+                    @apply-tool="applyCurrentToolToTrackUnit(i)" />
             </div>
         </div>
     </div>
@@ -53,27 +55,34 @@
         return units;
     });
 
+    function toggle(index: number) {
+        if (!track.value) return;
+        track.value.toggleUnit(index);
+        if (track.value.getUnitByIndex(index).on) {
+            applyCurrentToolToTrackUnit(index);
+        }
+    }
+
     function rotateTrackUnit(index: number) {
         track.value?.rotateUnit(index);
     }
 
+    function deactivateUnit(index: number) {
+        track.value?.setStickingType(index, 0);
+        track.value?.setUnitOn(index, false);
+    }
+
     function applyCurrentToolToTrackUnit(index: number) {
-        if (selectedTool.value === "sticking") {
-            if (selectingUnits.value) {
+        switch (selectedTool.value) {
+            case "sticking":
                 track.value?.setStickingType(index, activeStickingType.value);
-            } else if (deselectingUnits.value) {
-                track.value?.setStickingType(index, 0);
-            }
-        } else if (selectedTool.value === "track-unit-type") {
-            if (selectingUnits.value) {
+                break;
+            case "track-unit-type":
                 track.value?.updateUnit(index, { on: true, type: activeTrackUnitType.value });
-            } else if (deselectingUnits.value) {
+                break;
+            case "eraser":
                 track.value?.setUnitOn(index, false);
-            }
-        } else if (selectedTool.value === "eraser") {
-            if (selectingUnits.value || deselectingUnits.value) {
-                track.value?.setUnitOn(index, false);
-            }
+                break;
         }
     }
 </script>