djledda/arne-drums
3
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update

Browse Source
This commit is contained in:
Daniel Ledda
2024-06-01 20:16:48 +02:00
parent 80fa033a88
commit 87d53591f6
8 changed files with 97 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
src/ui/Track/Track.vue
View File

@@ -1,32 +1,42 @@
<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>
<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,
}>();
@@ -35,6 +45,7 @@
activeStickingType,
activeTrackUnitType,
} = useAppStateStore();
const { beats } = useBeatStore();
const beat = computed(() => beats.value[props.beatIndex] ?? null);
const track = computed(() => beat.value?.tracks.value[props.trackIndex] ?? null);
@@ -42,7 +53,7 @@
const trackUnits = computed(() => {
const units = [];
if (track.value) {
for (let i = 0; i < track.value.unitRecord.value.length; i++) {
for (let i = 0; i < track.value.unitCount(); i++) {
const unit = track.value.getUnitByIndex(i);
if (unit) {
units.push(unit);
@@ -90,61 +101,7 @@
margin-right: 1em;
}
}
.track-unit-block {
height: 2em;
}
.track-spacer {
display: inline-block;
width: 1em;
height: 2em;
}
.track-main {
height: 36px;
}
.track-settings-container {
display: flex;
}
.track {
width: max-content;
& > * {
padding-right: 1em;
padding-left: 1em;
}
}
.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;