Merge branch 'main' into change/to-tools

src/components/Dialog/DictionaryManageDialog.vue

@@ -289,7 +289,7 @@
 import { computed, ref, watch } from "vue";
 import { QInput } from "quasar";
 import AudioAccent from "@/components/Talk/AudioAccent.vue";
-import ContextMenu from "@/components/Menu/ContextMenu.vue";
+import ContextMenu from "@/components/Menu/ContextMenu/Container.vue";
 import { useRightClickContextMenu } from "@/composables/useRightClickContextMenu";
 import { useStore } from "@/store";
 import type { FetchAudioResult } from "@/store/type";

src/components/Menu/ContextMenu/Container.vue

@@ -0,0 +1,34 @@
+<!-- StoreのUI_LOCKEDを参照してContextMenuを表示する -->
+
+<template>
+  <Presentation ref="contextMenu" :header :menudata :uiLocked />
+</template>
+
+<script lang="ts">
+export type { ContextMenuItemData } from "./Presentation.vue";
+</script>
+<script setup lang="ts">
+import { computed, useTemplateRef } from "vue";
+import type { ComponentExposed } from "vue-component-type-helpers";
+import Presentation, { ContextMenuItemData } from "./Presentation.vue";
+import { useStore } from "@/store";
+
+defineOptions({
+  name: "ContextMenu",
+});
+
+defineProps<{
+  header?: string;
+  menudata: ContextMenuItemData[];
+}>();
+defineExpose({
+  hide: () => {
+    contextMenu.value?.hide();
+  },
+});
+
+const store = useStore();
+const uiLocked = computed(() => store.getters.UI_LOCKED);
+const contextMenu =
+  useTemplateRef<ComponentExposed<typeof Presentation>>("contextMenu");
+</script>

src/components/Menu/ContextMenu.vue → src/components/Menu/ContextMenu/Presentation.vue

@@ -26,23 +26,22 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted, ref } from "vue";
+import { onMounted, onUnmounted, ref } from "vue";
 import { QMenu } from "quasar";
-import MenuItem from "./MenuItem.vue";
-import { MenuItemButton, MenuItemSeparator } from "./type";
-import { useStore } from "@/store";
+import MenuItem from "../MenuItem.vue";
+import { MenuItemButton, MenuItemSeparator } from "../type";
 
 defineProps<{
   header?: string;
   menudata: ContextMenuItemData[];
+
+  uiLocked?: boolean;
 }>();
 defineExpose({
   hide: () => {
     contextMenu.value?.hide();
   },
 });
-const store = useStore();
-const uiLocked = computed(() => store.getters.UI_LOCKED);
 
 const contextMenu = ref<QMenu>();
 /**

src/components/Sing/PlayheadPositionDisplay.vue

@@ -18,7 +18,7 @@ import { ref, computed } from "vue";
 import { useStore } from "@/store";
 import ContextMenu, {
   ContextMenuItemData,
-} from "@/components/Menu/ContextMenu.vue";
+} from "@/components/Menu/ContextMenu/Container.vue";
 import {
   getTimeSignaturePositions,
   MeasuresBeats,

src/components/Sing/ScoreSequencer.vue

@@ -172,7 +172,7 @@ import {
 } from "vue";
 import ContextMenu, {
   ContextMenuItemData,
-} from "@/components/Menu/ContextMenu.vue";
+} from "@/components/Menu/ContextMenu/Container.vue";
 import { NoteId } from "@/type/preload";
 import { useStore } from "@/store";
 import { Note, SequencerEditTarget } from "@/store/type";

src/components/Sing/SequencerNote.vue

@@ -75,7 +75,7 @@ import {
 } from "@/sing/viewHelper";
 import ContextMenu, {
   ContextMenuItemData,
-} from "@/components/Menu/ContextMenu.vue";
+} from "@/components/Menu/ContextMenu/Container.vue";
 
 const props = defineProps<{
   note: Note;

src/components/Sing/SequencerRuler/Container.vue

@@ -6,6 +6,7 @@
     :sequencerZoomX
     :numMeasures
     :playheadTicks
+    :sequencerSnapType
     @update:playheadTicks="updatePlayheadTicks"
     @deselectAllNotes="deselectAllNotes"
   />
@@ -35,6 +36,7 @@ const store = useStore();
 const tpqn = computed(() => store.state.tpqn);
 const timeSignatures = computed(() => store.state.timeSignatures);
 const sequencerZoomX = computed(() => store.state.sequencerZoomX);
+const sequencerSnapType = computed(() => store.state.sequencerSnapType);
 
 const playheadTicks = computed(() => store.getters.PLAYHEAD_POSITION);
 

src/components/Sing/SequencerRuler/Presentation.vue

@@ -62,7 +62,12 @@
 
 <script setup lang="ts">
 import { computed, ref, onMounted, onUnmounted } from "vue";
-import { getMeasureDuration, getTimeSignaturePositions } from "@/sing/domain";
+import {
+  getMeasureDuration,
+  getTimeSignaturePositions,
+  getNoteDuration,
+  snapTicksToGrid,
+} from "@/sing/domain";
 import { baseXToTick, tickToBaseX } from "@/sing/viewHelper";
 import { TimeSignature } from "@/store/type";
 
@@ -73,6 +78,7 @@ const props = defineProps<{
   tpqn: number;
   timeSignatures: TimeSignature[];
   sequencerZoomX: number;
+  sequencerSnapType: number;
 }>();
 const playheadTicks = defineModel<number>("playheadTicks", { required: true });
 const emit = defineEmits<{
@@ -134,6 +140,10 @@ const playheadX = computed(() => {
   return Math.floor(baseX * props.sequencerZoomX);
 });
 
+const snapTicks = computed(() => {
+  return getNoteDuration(props.sequencerSnapType, props.tpqn);
+});
+
 const onClick = (event: MouseEvent) => {
   emit("deselectAllNotes");
 
@@ -142,7 +152,10 @@ const onClick = (event: MouseEvent) => {
     throw new Error("sequencerRulerElement is null.");
   }
   const baseX = (props.offset + event.offsetX) / props.sequencerZoomX;
-  const ticks = baseXToTick(baseX, props.tpqn);
+  const ticks = snapTicksToGrid(
+    baseXToTick(baseX, props.tpqn),
+    snapTicks.value,
+  );
   playheadTicks.value = ticks;
 };
 

src/components/Sing/SequencerRuler/index.stories.ts

@@ -19,6 +19,7 @@ const meta: Meta<typeof Presentation> = {
     tpqn: 480,
     offset: 0,
     numMeasures: 32,
+    sequencerSnapType: 4,
     "onUpdate:playheadTicks": fn<(value: number) => void>(),
     onDeselectAllNotes: fn(),
   },

src/components/Sing/SideBar/TrackItem.vue

@@ -165,7 +165,7 @@ import { computed, watchEffect, ref } from "vue";
 import CharacterSelectMenu from "@/components/Sing/CharacterMenuButton/CharacterSelectMenu.vue";
 import SingerIcon from "@/components/Sing/SingerIcon.vue";
 import { useStore } from "@/store";
-import ContextMenu from "@/components/Menu/ContextMenu.vue";
+import ContextMenu from "@/components/Menu/ContextMenu/Container.vue";
 import { shouldPlayTracks } from "@/sing/domain";
 import { CharacterInfo, StyleInfo, TrackId } from "@/type/preload";
 

src/components/Sing/ToolBar/ToolBar.vue

@@ -589,7 +589,7 @@ const snapTypeSelectModel = computed({
 
   :deep(.q-field__label) {
     font-size: 9px;
-    top: 2px;
+    top: 5.5px;
     margin-left: 6px;
     transform: translateY(0) !important;
     color: var(--scheme-color-on-surface-variant);

src/components/Talk/AccentPhrase.vue

@@ -208,7 +208,7 @@ import { computed, ref } from "vue";
 import AudioAccent from "./AudioAccent.vue";
 import AudioParameter from "./AudioParameter.vue";
 import { MenuItemButton } from "@/components/Menu/type";
-import ContextMenu from "@/components/Menu/ContextMenu.vue";
+import ContextMenu from "@/components/Menu/ContextMenu/Container.vue";
 import { useStore } from "@/store";
 import { AudioKey, MoraDataType } from "@/type/preload";
 import { Mora } from "@/openapi/models/Mora";

src/components/Talk/AudioCell.vue

@@ -114,7 +114,7 @@ import { computed, watch, ref, nextTick } from "vue";
 import { QInput } from "quasar";
 import CharacterButton from "@/components/CharacterButton.vue";
 import { MenuItemButton, MenuItemSeparator } from "@/components/Menu/type";
-import ContextMenu from "@/components/Menu/ContextMenu.vue";
+import ContextMenu from "@/components/Menu/ContextMenu/Container.vue";
 import { useStore } from "@/store";
 import { AudioKey, SplitTextWhenPasteType, Voice } from "@/type/preload";
 import { SelectionHelperForQInput } from "@/helpers/SelectionHelperForQInput";

src/composables/useRightClickContextMenu.ts

@@ -6,7 +6,7 @@
 import { QInput } from "quasar";
 import { ref, Ref, nextTick } from "vue";
 import { MenuItemButton, MenuItemSeparator } from "@/components/Menu/type";
-import ContextMenu from "@/components/Menu/ContextMenu.vue";
+import ContextMenu from "@/components/Menu/ContextMenu/Container.vue";
 import { SelectionHelperForQInput } from "@/helpers/SelectionHelperForQInput";
 
 /**

src/sing/domain.ts

@@ -591,3 +591,10 @@ export const shouldPlayTracks = (tracks: Map<TrackId, Track>): Set<TrackId> => {
       .map(([trackId]) => trackId),
   );
 };
+
+/**
+ * 指定されたティックを直近のグリッドに合わせる
+ */
+export function snapTicksToGrid(ticks: number, snapTicks: number): number {
+  return Math.round(ticks / snapTicks) * snapTicks;
+}