update

src/ui/Track/StickingTrack.vue

@@ -0,0 +1,69 @@
+<template>
+    <track-container>
+        <track-unit v-for="(trackUnit, i) in trackUnits" 
+            :key="`tu${ stickingType }${ i }`"
+            :id="`tu${ stickingType }${ i }`"
+            class="track-unit"
+            :class="{ spaced: (i + 1) % beat!.timeSigUp.value === 0 }"
+            :sticking-type="stickingType"
+            :type="trackUnit ?? 0"
+            :on="trackUnit !== null" />
+    </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';
+
+    const props = defineProps<{
+        beatIndex: number,
+        stickingType: number | null
+    }>();
+
+    const { beats } = useBeatStore();
+    const beat = computed(() => beats.value[props.beatIndex] ?? null);
+
+    const trackUnits = computed(() => {
+        const units: (number | null)[] = [];
+        if (!beat.value) {
+            return units;
+        }
+        const tracks = beat.value.getTracks() ?? [];
+        const unitCount = tracks[0]?.unitCount() ?? 0;
+        for (let i = 0; i < unitCount; i++) {
+            let found = null;
+            for (const track of tracks) {
+                const unit = track.getUnitByIndex(i);
+                if (unit) {
+                    if (unit.on && unit.stickingType === props.stickingType) {
+                        found = unit.type;
+                    }
+                }
+                if (found !== null) {
+                    break;
+                }
+            }
+            units.push(found);
+        }
+        return units;
+    });
+</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>

src/ui/Track/TrackContainer.vue

@@ -0,0 +1,45 @@
+<template>
+    <div class="track">
+        <div class="track-main">
+            <div class="track-unit-block">
+                <slot />
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped lang="scss">
+    .track-unit-block {
+        height: 2em;
+    }
+
+    .track-main {
+        height: 36px;
+    }
+
+    .track {
+        width: max-content;
+        & > * {
+            padding-right: 1em;
+            padding-left: 1em;
+        }
+    }
+
+    .vertical-mode {
+        .track-main {
+            width: 2em;
+            margin-right: 4px;
+            display: block;
+        }
+
+        .track {
+            display: inline-block;
+            height: 36px;
+
+            & > * {
+                padding-right: 0;
+                padding-left: 0;
+            }
+        }
+    }
+</style>

src/ui/interfaces.ts

@@ -0,0 +1,2 @@
+export interface UITrack {
+}