Add: BPM・拍子変更機能を追加

src/components/Sing/ChangeValueDialog/TempoChangeDialog.stories.ts

@@ -1,13 +1,15 @@
 import { userEvent, within, expect, fn } from "@storybook/test";
 import { Meta, StoryObj } from "@storybook/vue3";
-
 import TempoChangeDialog from "./TempoChangeDialog.vue";
+import { DEFAULT_BPM } from "@/sing/domain";
 
 const meta: Meta<typeof TempoChangeDialog> = {
   component: TempoChangeDialog,
   args: {
     modelValue: true,
-    tempoChange: undefined,
+    tempoChange: {
+      bpm: DEFAULT_BPM,
+    },
     mode: "add",
 
     onOk: fn(),

src/components/Sing/ChangeValueDialog/TempoChangeDialog.vue

@@ -23,23 +23,18 @@ import { QInput, useDialogPluginComponent } from "quasar";
 import { ref } from "vue";
 import CommonDialog from "./CommonDialog.vue";
 import { Tempo } from "@/store/type";
-import { DEFAULT_BPM } from "@/sing/domain";
 import { cloneWithUnwrapProxy } from "@/helpers/cloneWithUnwrapProxy";
 
 const modelValue = defineModel<boolean>();
 const props = defineProps<{
-  tempoChange: Omit<Tempo, "position"> | undefined;
+  tempoChange: Omit<Tempo, "position">;
   mode: "add" | "edit";
 }>();
 defineEmits({
   ...useDialogPluginComponent.emitsObject,
 });
 
-const tempoChange = ref(
-  cloneWithUnwrapProxy(props.tempoChange) || {
-    bpm: DEFAULT_BPM,
-  },
-);
+const tempoChange = ref(cloneWithUnwrapProxy(props.tempoChange));
 </script>
 
 <style scoped lang="scss">

src/components/Sing/ChangeValueDialog/TimeSignatureChangeDialog.stories.ts

@@ -1,13 +1,16 @@
 import { userEvent, within, expect, fn } from "@storybook/test";
 import { Meta, StoryObj } from "@storybook/vue3";
-
 import TimeSignatureChangeDialog from "./TimeSignatureChangeDialog.vue";
+import { DEFAULT_BEAT_TYPE, DEFAULT_BEATS } from "@/sing/domain";
 
 const meta: Meta<typeof TimeSignatureChangeDialog> = {
   component: TimeSignatureChangeDialog,
   args: {
     modelValue: true,
-    timeSignatureChange: undefined,
+    timeSignatureChange: {
+      beats: DEFAULT_BEATS,
+      beatType: DEFAULT_BEAT_TYPE,
+    },
     mode: "add",
 
     onOk: fn(),

src/components/Sing/ChangeValueDialog/TimeSignatureChangeDialog.vue

@@ -41,22 +41,19 @@ import { ref } from "vue";
 import CommonDialog from "./CommonDialog.vue";
 import { TimeSignature } from "@/store/type";
 import { cloneWithUnwrapProxy } from "@/helpers/cloneWithUnwrapProxy";
-import { BEAT_TYPES, DEFAULT_BEAT_TYPE, DEFAULT_BEATS } from "@/sing/domain";
+import { BEAT_TYPES } from "@/sing/domain";
 
 const modelValue = defineModel<boolean>();
 const props = defineProps<{
-  timeSignatureChange: Omit<TimeSignature, "measureNumber"> | undefined;
+  timeSignatureChange: Omit<TimeSignature, "measureNumber">;
   mode: "add" | "edit";
 }>();
 defineEmits({
   ...useDialogPluginComponent.emitsObject,
 });
 
 const timeSignatureChange = ref(
-  cloneWithUnwrapProxy(props.timeSignatureChange) || {
-    beats: DEFAULT_BEATS,
-    beatType: DEFAULT_BEAT_TYPE,
-  },
+  cloneWithUnwrapProxy(props.timeSignatureChange),
 );
 
 const beatTypeOptions = BEAT_TYPES.map((beatType) => ({

src/components/Sing/SequencerRuler/Presentation.vue

@@ -8,7 +8,7 @@
     <ContextMenu
       ref="contextMenu"
       :header="contextMenuHeader"
-      :menudata="contextMenudata"
+      :menudata="contextMenuData"
       :uiLocked
     />
     <svg
@@ -109,10 +109,8 @@ import {
   ref,
   onMounted,
   onUnmounted,
-  ExtractPropTypes,
   ComponentPublicInstance,
   useTemplateRef,
-  Component,
   toRef,
 } from "vue";
 import { Dialog } from "quasar";
@@ -407,31 +405,6 @@ const timeSignatureChangeExists = computed(
   () => currentTimeSignature.value.measureNumber === currentMeasure.value,
 );
 
-const showValueChangeDialog = async <T extends Component, R>(
-  component: T,
-  componentProps: ExtractPropTypes<T>,
-) => {
-  const { promise, resolve } = Promise.withResolvers<R | "cancelled">();
-
-  Dialog.create({
-    component,
-    componentProps,
-  })
-    .onOk((result: R) => {
-      resolve(result);
-    })
-    .onCancel(() => {
-      resolve("cancelled");
-    });
-
-  const result = await promise;
-  if (result === "cancelled") {
-    return;
-  }
-
-  return result;
-};
-
 const contextMenuHeader = computed(() => {
   const texts = [];
   if (tempoChangeExists.value) {
@@ -444,92 +417,84 @@ const contextMenuHeader = computed(() => {
   }
   return texts.join("、");
 });
-const contextMenudata = computed<ContextMenuItemData[]>(() =>
-  (
-    [
-      {
-        type: "button",
-        label: tempoChangeExists.value
-          ? `テンポ変化を編集`
-          : "テンポ変化を挿入",
-        onClick: async () => {
-          const result = await showValueChangeDialog<
-            typeof TempoChangeDialog,
-            {
-              tempoChange: Omit<Tempo, "position">;
-            }
-          >(TempoChangeDialog, {
-            tempoChange: tempoChangeExists.value
-              ? currentTempo.value
-              : undefined,
-            mode: tempoChangeExists.value ? "edit" : "add",
-          });
-          if (!result) {
-            return;
-          }
-          emit("setTempo", {
-            ...result.tempoChange,
-            position: playheadTicks.value,
-          });
-
-          contextMenu.value?.hide();
+const contextMenuData = computed<ContextMenuItemData[]>(() => {
+  const menuData: ContextMenuItemData[] = [];
+  menuData.push({
+    type: "button",
+    label: tempoChangeExists.value ? `テンポ変化を編集` : "テンポ変化を挿入",
+    onClick: async () => {
+      Dialog.create({
+        component: TempoChangeDialog,
+        componentProps: {
+          tempoChange: currentTempo.value,
+          mode: tempoChangeExists.value ? "edit" : "add",
         },
-        disableWhenUiLocked: true,
+      }).onOk((result: { tempoChange: Omit<Tempo, "position"> }) => {
+        emit("setTempo", {
+          ...result.tempoChange,
+          position: playheadTicks.value,
+        });
+      });
+      contextMenu.value?.hide();
+    },
+    disableWhenUiLocked: true,
+  });
+
+  if (tempoChangeExists.value) {
+    menuData.push({
+      type: "button",
+      label: "テンポ変化を削除",
+      disabled: currentTempo.value.position === 0,
+      onClick: () => {
+        emit("removeTempo", playheadTicks.value);
+
+        contextMenu.value?.hide();
       },
-      tempoChangeExists.value && {
-        type: "button",
-        label: "テンポ変化を削除",
-        disabled: currentTempo.value.position === 0,
-        onClick: () => {
-          emit("removeTempo", playheadTicks.value);
-
-          contextMenu.value?.hide();
+      disableWhenUiLocked: true,
+    });
+  }
+  menuData.push({
+    type: "separator",
+  });
+  menuData.push({
+    type: "button",
+    label: timeSignatureChangeExists.value
+      ? `拍子変化を編集`
+      : "拍子変化を挿入",
+    onClick: async () => {
+      Dialog.create({
+        component: TimeSignatureChangeDialog,
+        componentProps: {
+          timeSignatureChange: currentTimeSignature.value,
+          mode: timeSignatureChangeExists.value ? "edit" : "add",
         },
-        disableWhenUiLocked: true,
-      },
-      {
-        type: "button",
-        label: timeSignatureChangeExists.value
-          ? `拍子変化を編集`
-          : "拍子変化を挿入",
-        onClick: async () => {
-          const result = await showValueChangeDialog<
-            typeof TimeSignatureChangeDialog,
-            {
-              timeSignatureChange: Omit<TimeSignature, "measureNumber">;
-            }
-          >(TimeSignatureChangeDialog, {
-            timeSignatureChange: timeSignatureChangeExists.value
-              ? currentTimeSignature.value
-              : undefined,
-            mode: timeSignatureChangeExists.value ? "edit" : "add",
-          });
-          if (!result) {
-            return;
-          }
+      }).onOk(
+        (result: { timeSignatureChange: Omit<TimeSignature, "position"> }) => {
           emit("setTimeSignature", {
             ...result.timeSignatureChange,
             measureNumber: currentMeasure.value,
           });
-
-          contextMenu.value?.hide();
-        },
-        disableWhenUiLocked: true,
-      },
-      timeSignatureChangeExists.value && {
-        type: "button",
-        label: "拍子変化を削除",
-        disabled: currentMeasure.value === 1,
-        onClick: () => {
-          emit("removeTimeSignature", currentMeasure.value);
-
-          contextMenu.value?.hide();
         },
-        disableWhenUiLocked: true,
+      );
+      contextMenu.value?.hide();
+    },
+    disableWhenUiLocked: true,
+  });
+  if (timeSignatureChangeExists.value) {
+    menuData.push({
+      type: "button",
+      label: "拍子変化を削除",
+      disabled: currentMeasure.value === 1,
+      onClick: () => {
+        emit("removeTimeSignature", currentMeasure.value);
+
+        contextMenu.value?.hide();
       },
-    ] satisfies (ContextMenuItemData | boolean)[]
-  ).filter((item) => item !== false),
-);
+      disableWhenUiLocked: true,
+    });
+  }
+  return menuData;
+});
 </script>
 
 <style scoped lang="scss">