update

src/ui/Beat/Beat.vue

@@ -2,14 +2,17 @@
     <div class="beat" :class="{ vertical: false }">
         <editable-text-field node-type="h3" class="beat-title" v-model="beat!.name.value" />
         <div class="beat-main-container">
-            <div class="beat-titles-container">
-                <div class="beat-track-title" v-for="title in titles">{{ title }}</div>
-            </div>
             <div class="beat-track-container">
-                <track-view 
-                    v-for="(_, i) in beat!.tracks.value" 
-                    :beat-index="beatIndex" 
-                    :track-index="i" />
+                <draggable handle=".handle" :list="tracks" @change="onMove" item-key="index">
+                    <template #item="{ element }">
+                        <div class="beat-line">
+                            <editable-text-field class="track-name" v-model="element.track.name.value" />
+                            <span class="handle"><icon color="var(--color-ui-neutral-dark)" icon-name="list" /></span>
+                            <track-view :beat-index="beatIndex" 
+                                        :track-index="element.index" />
+                        </div>
+                    </template>
+                </draggable>
             </div>
         </div>
     </div>
@@ -21,6 +24,9 @@
     import { useAppStateStore } from '@/AppState';
     import { useBeatStore } from '@/BeatStore';
     import { computed } from "vue";
+    import Draggable from "vuedraggable";
+    import type { Track } from "@/Track";
+    import Icon from "../Widgets/Icon/Icon.vue";
 
     const props = defineProps<{
         beatIndex: number,
@@ -31,13 +37,30 @@
     const { beats } = useBeatStore();
     const beat = computed(() => beats.value[props.beatIndex] ?? null);
 
-    const titles = computed(() => {
-        const titles = beats.value[props.beatIndex]?.tracks.value.map(track => track.name.value) ?? [];
-        if (props.orientation === 'horizontal')  {
-            titles.reverse();
+    const tracks = computed(() => {
+        const trackList = beat.value?.tracks.value ?? [];
+        const length = trackList.length;
+        const list: { index: number, track: Track }[] = [];
+        for (let i = 0; i < length; i++) {
+            list.push({
+                index: i,
+                track: trackList[i]!,
+            });
         }
-        return titles;
+        if (props.orientation === 'horizontal')  {
+            list.reverse();
+        }
+        return list;
     });
+
+    function onMove(evt: { moved: { oldIndex: number, newIndex: number }}) {
+        if (props.orientation === 'horizontal') {
+            beat.value?.insertAt(tracks.value.length - 1 - evt.moved.oldIndex, tracks.value.length - 1 - evt.moved.newIndex);
+        } else {
+            beat.value?.insertAt(evt.moved.oldIndex, evt.moved.newIndex);
+        }
+    }
+
 </script>
 
 <style scoped lang="scss">
@@ -72,6 +95,7 @@
     }
 
     .beat-track-container {
+        position: relative;
         display: inline-block;
     }
 
@@ -115,5 +139,25 @@
         writing-mode: vertical-rl;
         text-align: right;
     }
+
+    .handle {
+        color: var(--color-ui-neutral-dark);
+        opacity: 0%;
+
+        &:hover {
+            opacity: 100%;
+        }
+    }
+
+    .beat-line {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-end;
+        align-items: center;
+    }
+
+    .track-name {
+        text-align: right;
+    }
 </style>
 

src/ui/Root/Root.vue

@@ -13,7 +13,7 @@
                 </div>
                 <div 
                     class="sidebar-add-beat"
-                    @click="addNewBeat()">
+                    @click="onAddNewBeat()">
                     +
                 </div>
             </div> 
@@ -103,6 +103,10 @@
         saveDirty,
     } = beatStore;
 
+    function onAddNewBeat() {
+        activeBeatIndex.value = addNewBeat();
+    }
+
     watch(saveDirty, (dirty) => {
         if (dirty) {
             document.title = `${ TITLE } (unsaved changes)`;

src/ui/Track/Track.vue

@@ -35,12 +35,20 @@
         activeStickingType,
         activeTrackUnitType,
         selectingUnits,
-        deselectingUnits,
+        deselectingUnts,
     } = useAppStateStore();
     const { beats } = useBeatStore();
     const beat = computed(() => beats.value[props.beatIndex] ?? null);
     const track = computed(() => beat.value?.tracks.value[props.trackIndex] ?? null);
-    const title = computed(() => track.value?.name);
+
+    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 = [];

src/ui/TrackSettings/TrackSettings.vue

@@ -1,16 +1,16 @@
 <template>
     <div class="track-settings" v-if="track && beat">
         <div class="track-settings-title-container">
-            <editable-text-field v-model="track!.name.value" />
+            <editable-text-field v-model="track.name.value" />
         </div>
         <div class="track-settings-lower">
-            <action-button icon-name="snowflake" type="secondary" alt="Bake Loops" :disabled="!track!.looping.value" @click="track!.bakeLoops()" />
-            <action-button icon-name="trash" type="secondary" alt="Delete Track" @click="beat!.removeTrack(trackIndex)" />
+            <action-button icon-name="snowflake" type="secondary" alt="Bake Loops" :disabled="!track.looping.value" @click="track.bakeLoops()" />
+            <action-button icon-name="trash" type="secondary" alt="Delete Track" @click="beat.removeTrack(trackIndex)" />
             <div class="loop-settings">
-                <bool-box label="Loop:" v-model="track!.looping.value" />
+                <bool-box label="Loop:" v-model="track.looping.value" />
             </div>
-            <div class="loop-settings-option" :class="{ hide: !track!.looping.value }">
-                <number-input v-model="track!.loopLength.value" />
+            <div class="loop-settings-option" :class="{ hide: !track.looping.value }">
+                <number-input v-model="track.loopLength.value" />
            </div>
         </div>
     </div>
@@ -22,7 +22,7 @@
     import ActionButton from "@/ui/Widgets/ActionButton/ActionButton.vue";
     import EditableTextField from "@/ui/Widgets/EditableTextField/EditableTextField.vue";
     import { useBeatStore } from "@/BeatStore";
-    import { computed } from "vue";
+    import { computed, watch } from "vue";
 
     const props = defineProps<{
         beatIndex: number,
@@ -32,6 +32,8 @@
     const { beats } = useBeatStore();
     const beat = computed(() => beats.value[props.beatIndex] ?? null);
     const track = computed(() => beat.value?.tracks.value[props.trackIndex] ?? null);
+
+    watch(track, () => console.log(track.value));
 </script>
 
 <style scoped lang="scss">