113 lines
3.5 KiB
Vue
113 lines
3.5 KiB
Vue
<template>
|
|
<track-container>
|
|
<template v-if="!locked">
|
|
<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)" />
|
|
</template>
|
|
<template v-else>
|
|
<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" />
|
|
</template>
|
|
</track-container>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import TrackUnit from "@/ui/TrackUnit/TrackUnit.vue";
|
|
import TrackContainer from "@/ui/Track/TrackContainer.vue";
|
|
import { useBeatStore } from "@/BeatStore";
|
|
import { computed } from 'vue';
|
|
import { useAppStateStore } from "@/AppState";
|
|
|
|
const props = defineProps<{
|
|
beatIndex: number,
|
|
locked?: boolean,
|
|
trackIndex: number,
|
|
}>();
|
|
|
|
const {
|
|
selectedTool,
|
|
activeStickingType,
|
|
activeTrackUnitType,
|
|
} = useAppStateStore();
|
|
|
|
const { beats } = useBeatStore();
|
|
const beat = computed(() => beats.value[props.beatIndex] ?? null);
|
|
const track = computed(() => beat.value?.tracks.value[props.trackIndex] ?? null);
|
|
|
|
const trackUnits = computed(() => {
|
|
const units = [];
|
|
if (track.value) {
|
|
for (let i = 0; i < track.value.unitCount(); i++) {
|
|
const unit = track.value.getUnitByIndex(i);
|
|
if (unit) {
|
|
units.push(unit);
|
|
}
|
|
}
|
|
}
|
|
return units;
|
|
});
|
|
|
|
function toggle(index: number) {
|
|
if (!track.value) return;
|
|
if (selectedTool.value === 'track-unit-type') {
|
|
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: activeTrackUnitType.value === null ? false : true, type: activeTrackUnitType.value === null ? undefined : activeTrackUnitType.value });
|
|
break;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.track-unit {
|
|
&.spaced {
|
|
margin-bottom: 0;
|
|
margin-right: 1em;
|
|
}
|
|
}
|
|
.vertical-mode {
|
|
.track-unit {
|
|
&.spaced {
|
|
margin-bottom: 1em;
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
</style>
|