update

src/ui/Track/Track.vue

@@ -34,22 +34,11 @@
         selectedTool, 
         activeStickingType,
         activeTrackUnitType,
-        selectingUnits,
-        deselectingUnts,
     } = useAppStateStore();
     const { beats } = useBeatStore();
     const beat = computed(() => beats.value[props.beatIndex] ?? null);
     const track = computed(() => beat.value?.tracks.value[props.trackIndex] ?? null);
 
-    function swapUp() {
-        beat.value?.swapTracksByIndices(props.trackIndex + 1, props.trackIndex);
-    }
-
-    function swapDown() {
-        beat.value?.swapTracksByIndices(props.trackIndex, props.trackIndex - 1);
-    }
-
-
     const trackUnits = computed(() => {
         const units = [];
         if (track.value) {
@@ -66,7 +55,7 @@
     function toggle(index: number) {
         if (!track.value) return;
         track.value.toggleUnit(index);
-        if (track.value.getUnitByIndex(index).on) {
+        if (track.value.getUnitByIndex(index)?.on) {
             applyCurrentToolToTrackUnit(index);
         }
     }
@@ -96,74 +85,72 @@
 </script>
 
 <style scoped lang="scss">
-    .vertical-mode .track {
-        height: 36px;
-    }
-
-    .vertical-mode .track {
-        height: auto;
-    }
-
-    .track > * {
-        padding-right: 1em;
-        padding-left: 1em;
-    }
-
-    .vertical-mode .track-unit.spaced {
-        margin-bottom: 1em;
-        margin-right: 0;
-    }
-
-    .track-unit.spaced {
-        margin-bottom: 0;
-        margin-right: 1em;
-    }
-
-    .vertical-mode .track > * {
-        padding-right: 0;
-        padding-left: 0;
+    .track-unit {
+        &.spaced {
+            margin-bottom: 0;
+            margin-right: 1em;
+        }
     }
 
     .track-unit-block {
         height: 2em;
     }
 
-    .vertical-mode .track-unit-block {
-        height: auto;
-        width: 2em;
-    }
-
     .track-spacer {
         display: inline-block;
         width: 1em;
         height: 2em;
     }
 
-    .vertical-mode .track-spacer {
-        display: block;
-        width: 2em;
-        height: 1em;
-    }
-
     .track-main {
         height: 36px;
     }
 
-    .vertical-mode .track-main {
-        width: 2em;
-        margin-right: 4px;
-        display: block;
-    }
-
     .track-settings-container {
         display: flex;
     }
 
     .track {
         width: max-content;
+        & > * {
+            padding-right: 1em;
+            padding-left: 1em;
+        }
     }
 
-    .vertical-mode .track {
-        display: inline-block;
+    .vertical-mode {
+        .track-spacer {
+            display: block;
+            width: 2em;
+            height: 1em;
+        }
+
+        .track-unit-block {
+            height: auto;
+            width: 2em;
+        }
+
+        .track-main {
+            width: 2em;
+            margin-right: 4px;
+            display: block;
+        }
+
+        .track {
+            display: inline-block;
+            height: 36px;
+
+            & > * {
+                padding-right: 0;
+                padding-left: 0;
+            }
+        }
+
+        .track-unit {
+            &.spaced {
+                margin-bottom: 1em;
+                margin-right: 0;
+            }
+        }
     }
 </style>