migrated to vue wtf

2023-02-26 22:14:43 +01:00
parent b16e20a86a
commit 766faf5f56
54 changed files with 3135 additions and 3538 deletions
--- a/src/ui/Track/Track.vue
+++ b/src/ui/Track/Track.vue
@@ -0,0 +1,152 @@
+<template>
+    <div class="track">
+        <div class="track-main">
+            <div class="track-unit-block">
+                <track-unit v-for="(trackUnit, i) in trackUnits" 
+                    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)" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+    import TrackUnit from "@/ui/TrackUnit/TrackUnit.vue";
+    import { useBeatStore } from "@/BeatStore";
+    import { computed } from 'vue';
+    import { useAppStateStore } from "@/AppState";
+
+    const props = defineProps<{
+        beatIndex: number,
+        trackIndex: number,
+    }>();
+
+    const { 
+        selectedTool, 
+        activeStickingType,
+        activeTrackUnitType,
+        selectingUnits,
+        deselectingUnits,
+    } = 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);
+
+    const trackUnits = computed(() => {
+        const units = [];
+        if (track.value) {
+            for (let i = 0; i < track.value.unitRecord.value.length; i++) {
+                const unit = track.value.getUnitByIndex(i);
+                if (unit) { 
+                    units.push(unit);
+                }
+            }
+        }
+        return units;
+    });
+
+    function rotateTrackUnit(index: number) {
+        track.value?.rotateUnit(index);
+    }
+
+    function applyCurrentToolToTrackUnit(index: number) {
+        if (selectedTool.value === "sticking") {
+            if (selectingUnits.value) {
+                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) {
+                track.value?.updateUnit(index, { on: true, type: activeTrackUnitType.value });
+            } else if (deselectingUnits.value) {
+                track.value?.setUnitOn(index, false);
+            }
+        } else if (selectedTool.value === "eraser") {
+            if (selectingUnits.value || deselectingUnits.value) {
+                track.value?.setUnitOn(index, false);
+            }
+        }
+    }
+</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-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;
+    }
+
+    .vertical-mode .track {
+        display: inline-block;
+    }
+</style>