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

src/components/Sing/PlayheadPositionDisplay.vue

@@ -0,0 +1,138 @@
+<template>
+  <div>
+    <div v-if="displayFormat === 'MINUTES_SECONDS'" class="playhead-position">
+      <div>{{ minAndSecStr }}</div>
+      <div class="millisec">.{{ milliSecStr }}</div>
+    </div>
+    <div v-if="displayFormat === 'MEASURES_BEATS'" 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 } from "vue";
+import { useStore } from "@/store";
+import ContextMenu, {
+  ContextMenuItemData,
+} from "@/components/Menu/ContextMenu.vue";
+import {
+  getTimeSignaturePositions,
+  MeasuresBeats,
+  ticksToMeasuresBeats,
+} from "@/sing/domain";
+import { useRootMiscSetting } from "@/composables/useRootMiscSetting";
+
+const store = useStore();
+
+const playheadTicks = computed(() => store.getters.PLAYHEAD_POSITION);
+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 => {
+  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(() => {
+  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(() => {
+  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 === "MINUTES_SECONDS",
+      onClick: async () => {
+        contextMenu.value?.hide();
+        setDisplayFormat("MINUTES_SECONDS");
+      },
+      disableWhenUiLocked: false,
+    },
+    {
+      type: "button",
+      label: "小節.拍",
+      disabled: displayFormat.value === "MEASURES_BEATS",
+      onClick: async () => {
+        contextMenu.value?.hide();
+        setDisplayFormat("MEASURES_BEATS");
+      },
+      disableWhenUiLocked: false,
+    },
+  ];
+});
+</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/ScoreSequencer.vue

@@ -327,7 +327,7 @@ const scrollX = ref(0);
 const scrollY = ref(0);
 
 // 再生ヘッドの位置
-const playheadTicks = ref(0);
+const playheadTicks = computed(() => store.getters.PLAYHEAD_POSITION);
 const playheadX = computed(() => {
   const baseX = tickToBaseX(playheadTicks.value, tpqn.value);
   return Math.floor(baseX * zoomX.value);
@@ -1318,9 +1318,7 @@ const onScroll = (event: Event) => {
   }
 };
 
-const playheadPositionChangeListener = (position: number) => {
-  playheadTicks.value = position;
-
+watch(playheadTicks, (newPlayheadPosition) => {
   // オートスクロール
   const sequencerBodyElement = sequencerBody.value;
   if (!sequencerBodyElement) {
@@ -1337,7 +1335,7 @@ const playheadPositionChangeListener = (position: number) => {
   const scrollTop = sequencerBodyElement.scrollTop;
   const scrollWidth = sequencerBodyElement.scrollWidth;
   const clientWidth = sequencerBodyElement.clientWidth;
-  const playheadX = tickToBaseX(position, tpqn.value) * zoomX.value;
+  const playheadX = tickToBaseX(newPlayheadPosition, tpqn.value) * zoomX.value;
   const tolerance = 3;
   if (playheadX < scrollLeft) {
     sequencerBodyElement.scrollTo(playheadX, scrollTop);
@@ -1347,7 +1345,7 @@ const playheadPositionChangeListener = (position: number) => {
   ) {
     sequencerBodyElement.scrollTo(playheadX, scrollTop);
   }
-};
+});
 
 // スクロールバーの幅を取得する
 onMounted(() => {
@@ -1394,19 +1392,11 @@ onActivated(() => {
 
 // リスナー登録
 onActivated(() => {
-  void store.dispatch("ADD_PLAYHEAD_POSITION_CHANGE_LISTENER", {
-    listener: playheadPositionChangeListener,
-  });
-
   document.addEventListener("keydown", handleKeydown);
 });
 
 // リスナー解除
 onDeactivated(() => {
-  void store.dispatch("REMOVE_PLAYHEAD_POSITION_CHANGE_LISTENER", {
-    listener: playheadPositionChangeListener,
-  });
-
   document.removeEventListener("keydown", handleKeydown);
 });
 

src/components/Sing/SequencerRuler/Container.vue

@@ -12,7 +12,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted, ref } from "vue";
+import { computed } from "vue";
 import Presentation from "./Presentation.vue";
 import { useStore } from "@/store";
 
@@ -36,27 +36,12 @@ const tpqn = computed(() => store.state.tpqn);
 const timeSignatures = computed(() => store.state.timeSignatures);
 const sequencerZoomX = computed(() => store.state.sequencerZoomX);
 
-const playheadTicks = ref(0);
+const playheadTicks = computed(() => store.getters.PLAYHEAD_POSITION);
 
 const updatePlayheadTicks = (ticks: number) => {
   void store.dispatch("SET_PLAYHEAD_POSITION", { position: ticks });
 };
 
-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,
-  });
-});
-
 const deselectAllNotes = () => {
   void store.dispatch("DESELECT_ALL_NOTES");
 };

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 {