ソング：再生位置の表示形式を変更できるようにする

src/components/Sing/PlayheadPositionDisplay.vue

@@ -0,0 +1,160 @@
+<template>
+  <div>
+    <div v-if="displayFormat === 'MinutesSeconds'" class="playhead-position">
+      <div>{{ minAndSecStr }}</div>
+      <div class="millisec">.{{ milliSecStr }}</div>
+    </div>
+    <div v-if="displayFormat === 'MeasuresBeats'" class="playhead-position">
+      <div>{{ measuresStr }}.</div>
+      <div>{{ beatsIntegerPartStr }}</div>
+      <div class="beats-fractional-part">.{{ beatsFractionalPartStr }}</div>
+    </div>
+    <ContextMenu ref="contextMenu" :menudata="contextMenuData" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted } from "vue";
+import { useStore } from "@/store";
+import ContextMenu, {
+  ContextMenuItemData,
+} from "@/components/Menu/ContextMenu.vue";
+import { getTimeSignaturePositions, ticksToMeasuresBeats } from "@/sing/domain";
+import { MeasuresBeats } from "@/store/type";
+import { useRootMiscSetting } from "@/composables/useRootMiscSetting";
+
+const store = useStore();
+
+const playheadTicks = ref(0);
+const [displayFormat, setDisplayFormat] = useRootMiscSetting(
+  store,
+  "playheadPositionDisplayFormat",
+);
+
+const timeSignatures = computed(() => {
+  const tpqn = store.state.tpqn;
+  const timeSignatures = store.state.timeSignatures;
+  const tsPositions = getTimeSignaturePositions(timeSignatures, tpqn);
+  return timeSignatures.map((value, index) => ({
+    ...value,
+    position: tsPositions[index],
+  }));
+});
+
+const measuresBeats = computed((): MeasuresBeats => {
+  if (displayFormat.value !== "MeasuresBeats") {
+    return { measures: 1, beats: 1 };
+  }
+  const tpqn = store.state.tpqn;
+  return ticksToMeasuresBeats(playheadTicks.value, timeSignatures.value, tpqn);
+});
+
+const measuresStr = computed(() => {
+  return measuresBeats.value.measures >= 0
+    ? String(measuresBeats.value.measures).padStart(3, "0")
+    : String(measuresBeats.value.measures);
+});
+
+const beatsIntegerPartStr = computed(() => {
+  const integerPart = Math.floor(measuresBeats.value.beats);
+  return String(integerPart).padStart(2, "0");
+});
+
+const beatsFractionalPartStr = computed(() => {
+  const integerPart = Math.floor(measuresBeats.value.beats);
+  const fractionalPart = Math.floor(
+    (measuresBeats.value.beats - integerPart) * 100,
+  );
+  return String(fractionalPart).padStart(2, "0");
+});
+
+const minAndSecStr = computed(() => {
+  if (displayFormat.value !== "MinutesSeconds") {
+    return "";
+  }
+  const ticks = playheadTicks.value;
+  const time = store.getters.TICK_TO_SECOND(ticks);
+  const intTime = Math.trunc(time);
+  const min = Math.trunc(intTime / 60);
+  const minStr = String(min).padStart(2, "0");
+  const secStr = String(intTime - min * 60).padStart(2, "0");
+  return `${minStr}:${secStr}`;
+});
+
+const milliSecStr = computed(() => {
+  if (displayFormat.value !== "MinutesSeconds") {
+    return "";
+  }
+  const ticks = playheadTicks.value;
+  const time = store.getters.TICK_TO_SECOND(ticks);
+  const intTime = Math.trunc(time);
+  const milliSec = Math.trunc((time - intTime) * 1000);
+  const milliSecStr = String(milliSec).padStart(3, "0");
+  return milliSecStr;
+});
+
+const contextMenu = ref<InstanceType<typeof ContextMenu>>();
+const contextMenuData = computed<ContextMenuItemData[]>(() => {
+  return [
+    {
+      type: "button",
+      label: "小節.拍",
+      disabled: displayFormat.value === "MeasuresBeats",
+      onClick: async () => {
+        contextMenu.value?.hide();
+        setDisplayFormat("MeasuresBeats");
+      },
+      disableWhenUiLocked: false,
+    },
+    {
+      type: "button",
+      label: "分:秒",
+      disabled: displayFormat.value === "MinutesSeconds",
+      onClick: async () => {
+        contextMenu.value?.hide();
+        setDisplayFormat("MinutesSeconds");
+      },
+      disableWhenUiLocked: false,
+    },
+  ];
+});
+
+const playheadPositionChangeListener = (position: number) => {
+  playheadTicks.value = position;
+};
+
+onMounted(() => {
+  void store.dispatch("ADD_PLAYHEAD_POSITION_CHANGE_LISTENER", {
+    listener: playheadPositionChangeListener,
+  });
+});
+
+onUnmounted(() => {
+  void store.dispatch("REMOVE_PLAYHEAD_POSITION_CHANGE_LISTENER", {
+    listener: playheadPositionChangeListener,
+  });
+});
+</script>
+
+<style scoped lang="scss">
+@use "@/styles/v2/variables" as vars;
+@use "@/styles/colors" as colors;
+
+.playhead-position {
+  align-items: center;
+  display: flex;
+  font-weight: 700;
+  font-size: 28px;
+  color: var(--scheme-color-on-surface);
+}
+
+.millisec {
+  font-size: 16px;
+  margin: 10px 0 0 2px;
+}
+
+.beats-fractional-part {
+  font-size: 16px;
+  margin: 10px 0 0 2px;
+}
+</style>

src/components/Sing/ToolBar/ToolBar.vue

@@ -113,12 +113,7 @@
         icon="stop"
         @click="stop"
       />
-      <div class="sing-playhead-position">
-        <div>{{ playheadPositionMinSecStr }}</div>
-        <div class="sing-playhead-position-millisec">
-          .{{ playHeadPositionMilliSecStr }}
-        </div>
-      </div>
+      <PlayheadPositionDisplay class="sing-playhead-position" />
     </div>
     <!-- settings for edit controls -->
     <div class="sing-controls">
@@ -164,7 +159,8 @@
 </template>
 
 <script setup lang="ts">
-import { computed, watch, ref, onMounted, onUnmounted } from "vue";
+import { computed, watch, ref } from "vue";
+import PlayheadPositionDisplay from "../PlayheadPositionDisplay.vue";
 import EditTargetSwicher from "./EditTargetSwicher.vue";
 import { useStore } from "@/store";
 
@@ -383,30 +379,6 @@ const setVolumeRangeAdjustment = () => {
   });
 };
 
-const playheadTicks = ref(0);
-
-/// 再生時間の分と秒
-const playheadPositionMinSecStr = computed(() => {
-  const ticks = playheadTicks.value;
-  const time = store.getters.TICK_TO_SECOND(ticks);
-
-  const intTime = Math.trunc(time);
-  const min = Math.trunc(intTime / 60);
-  const minStr = String(min).padStart(2, "0");
-  const secStr = String(intTime - min * 60).padStart(2, "0");
-
-  return `${minStr}:${secStr}`;
-});
-
-const playHeadPositionMilliSecStr = computed(() => {
-  const ticks = playheadTicks.value;
-  const time = store.getters.TICK_TO_SECOND(ticks);
-  const intTime = Math.trunc(time);
-  const milliSec = Math.trunc((time - intTime) * 1000);
-  const milliSecStr = String(milliSec).padStart(3, "0");
-  return milliSecStr;
-});
-
 const nowPlaying = computed(() => store.state.nowPlaying);
 
 const play = () => {
@@ -463,22 +435,6 @@ const snapTypeSelectModel = computed({
     });
   },
 });
-
-const playheadPositionChangeListener = (position: number) => {
-  playheadTicks.value = position;
-};
-
-onMounted(() => {
-  void store.dispatch("ADD_PLAYHEAD_POSITION_CHANGE_LISTENER", {
-    listener: playheadPositionChangeListener,
-  });
-});
-
-onUnmounted(() => {
-  void store.dispatch("REMOVE_PLAYHEAD_POSITION_CHANGE_LISTENER", {
-    listener: playheadPositionChangeListener,
-  });
-});
 </script>
 
 <style scoped lang="scss">
@@ -714,19 +670,7 @@ onUnmounted(() => {
 }
 
 .sing-playhead-position {
-  align-items: center;
-  display: flex;
-  font-size: 28px;
-  font-weight: 700;
   margin-left: 16px;
-  color: var(--scheme-color-on-surface);
-}
-
-.sing-playhead-position-millisec {
-  font-size: 16px;
-  font-weight: 700;
-  margin: 10px 0 0 2px;
-  color: var(--scheme-color-on-surface);
 }
 
 .sing-controls {

src/sing/domain.ts

@@ -9,6 +9,7 @@ import {
   PhraseKey,
   Track,
   EditorFrameAudioQuery,
+  MeasuresBeats,
 } from "@/store/type";
 import { FramePhoneme } from "@/openapi";
 import { TrackId } from "@/type/preload";
@@ -210,10 +211,53 @@ export function getMeasureDuration(
   beatType: number,
   tpqn: number,
 ) {
-  const wholeNoteDuration = tpqn * 4;
-  return (wholeNoteDuration / beatType) * beats;
+  return ((tpqn * 4) / beatType) * beats;
+}
+
+// NOTE: 戻り値の単位はtick
+export function getBeatDuration(beatType: number, tpqn: number) {
+  return (tpqn * 4) / beatType;
 }
 
+const findTimeSignatureIndex = (
+  ticks: number,
+  timeSignatures: (TimeSignature & { position: number })[],
+) => {
+  if (ticks < 0) {
+    return 0;
+  }
+  for (let i = 0; i < timeSignatures.length - 1; i++) {
+    if (
+      timeSignatures[i].position <= ticks &&
+      timeSignatures[i + 1].position > ticks
+    ) {
+      return i;
+    }
+  }
+  return timeSignatures.length - 1;
+};
+
+export const ticksToMeasuresBeats = (
+  ticks: number,
+  timeSignatures: (TimeSignature & { position: number })[],
+  tpqn: number,
+): MeasuresBeats => {
+  const tsIndex = findTimeSignatureIndex(ticks, timeSignatures);
+  const ts = timeSignatures[tsIndex];
+
+  const measureDuration = getMeasureDuration(ts.beats, ts.beatType, tpqn);
+  const beatDuration = getBeatDuration(ts.beatType, tpqn);
+
+  const posInTs = ticks - ts.position;
+  const measuresInTs = Math.floor(posInTs / measureDuration);
+  const measures = ts.measureNumber + measuresInTs;
+
+  const posInMeasure = posInTs - measureDuration * measuresInTs;
+  const beats = 1 + posInMeasure / beatDuration;
+
+  return { measures, beats };
+};
+
 export function getNumMeasures(
   notes: Note[],
   tempos: Tempo[],

src/store/setting.ts

@@ -65,6 +65,7 @@ export const settingStoreState: SettingStoreState = {
     panAndGain: true,
   },
   showSingCharacterPortrait: true,
+  playheadPositionDisplayFormat: "MinutesSeconds",
 };
 
 export const settingStore = createPartialStore<SettingStoreTypes>({
@@ -141,6 +142,7 @@ export const settingStore = createPartialStore<SettingStoreTypes>({
         "skipUpdateVersion",
         "undoableTrackOperations",
         "showSingCharacterPortrait",
+        "playheadPositionDisplayFormat",
       ] as const;
 
       // rootMiscSettingKeysに値を足し忘れていたときに型エラーを出す検出用コード

src/store/type.ts

@@ -827,6 +827,11 @@ export type SongExportSetting = {
   withTrackParameters: TrackParameters;
 };
 
+export type MeasuresBeats = {
+  measures: number;
+  beats: number;
+};
+
 export type SingingStoreState = {
   tpqn: number; // Ticks Per Quarter Note
   tempos: Tempo[];

src/type/preload.ts

@@ -600,6 +600,9 @@ export const rootMiscSettingSchema = z.object({
     })
     .default({}),
   showSingCharacterPortrait: z.boolean().default(true), // ソングエディタで立ち絵を表示するか
+  playheadPositionDisplayFormat: z
+    .enum(["MinutesSeconds", "MeasuresBeats"])
+    .default("MinutesSeconds"), // 再生ヘッド位置の表示モード
 });
 export type RootMiscSettingType = z.infer<typeof rootMiscSettingSchema>;