forked from nikita/muzika-gromche
38 lines
1.4 KiB
Vue
38 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
import MarkerBox from '@/components/timeline/markers/MarkerBox.vue';
|
|
import { useTimelineTicksBeats, useTimelineTicksSeconds } from '@/lib/useTimelineTicks';
|
|
import { toPx } from '@/lib/vue';
|
|
import { useTimelineStore } from '@/store/TimelineStore';
|
|
import { storeToRefs } from 'pinia';
|
|
import TickInterval from './TickInterval.vue';
|
|
|
|
const timeline = useTimelineStore();
|
|
const { contentWidthIncludingEmptySpacePx, headerHeight } = storeToRefs(timeline);
|
|
|
|
const allTicks = [
|
|
{ ticks: useTimelineTicksSeconds(), position: "top" },
|
|
{ ticks: useTimelineTicksBeats(), position: "bottom" },
|
|
] as const;
|
|
|
|
</script>
|
|
<template>
|
|
<div class="tw:absolute tw:max-h-full tw:overflow-hidden" style=""
|
|
:style="{ width: contentWidthIncludingEmptySpacePx, height: toPx(headerHeight) }">
|
|
|
|
<!-- header ticks for seconds and beats-->
|
|
<div class="tw:absolute tw:size-full" v-for="{ ticks, position } in allTicks">
|
|
<TickInterval v-for="tick in ticks.ticks.value" :position :left="ticks.left(tick).value"
|
|
:width="ticks.widthPx.value" :label="ticks.label(tick).value" />
|
|
</div>
|
|
|
|
<div class="tw:absolute tw:size-full tw:border-b tw:border-[#252525]"></div>
|
|
|
|
<!-- header markers -->
|
|
<div class="tw:absolute tw:size-full">
|
|
<MarkerBox v-for="marker in timeline.markers" :marker />
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
<style scoped></style>
|