arne-drums/src/ui/Track/Track.vue

<template>
    <div class="track">
        <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)"
                    @deactivate="deactivateUnit(i)"
                    @toggle="toggle(i)"
                    @apply-tool="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 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) {
        switch (selectedTool.value) {
            case "sticking":
                track.value?.setStickingType(index, activeStickingType.value);
                break;
            case "track-unit-type":
                track.value?.updateUnit(index, { on: true, type: activeTrackUnitType.value });
                break;
            case "eraser":
                track.value?.setUnitOn(index, false);
                break;
        }
    }
</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>