Merge branch 'main' into selection-unify

.eslintrc.js

@@ -44,7 +44,11 @@ module.exports = {
   plugins: ["import"],
   parser: vueEslintParser,
   parserOptions: vueEslintParserOptions,
-  ignorePatterns: ["dist_electron/**/*", "dist/**/*", "node_modules/**/*"],
+  ignorePatterns: [
+    "dist/**/*",
+    "dist_*/**/*",
+    "node_modules/**/*",
+  ],
   rules: {
     "linebreak-style":
       process.env.NODE_ENV === "production" && process.platform !== "win32"

package.json

@@ -26,7 +26,7 @@
     "test-ui:storybook-vrt": "cross-env TARGET=storybook playwright test --ui",
     "lint": "eslint --ext .js,.vue,.ts,.mts *.config.* src tests build .storybook",
     "fmt": "eslint --ext .js,.vue,.ts,.mts *.config.* src tests build .storybook --fix",
-    "markdownlint": "markdownlint --ignore node_modules/ --ignore dist/ --ignore dist_electron/ ./",
+    "markdownlint": "markdownlint --ignore node_modules/ --ignore dist/ --ignore dist_electron/ --ignore dist_preview/ ./",
     "typecheck": "vue-tsc --noEmit",
     "typos": "cross-env ./build/vendored/typos/typos",
     "electron:build": "cross-env VITE_TARGET=electron vite build && electron-builder --config electron-builder.config.js --publish never",
@@ -46,6 +46,7 @@
     "@gtm-support/vue-gtm": "1.2.3",
     "@quasar/extras": "1.10.10",
     "@sevenc-nanashi/utaformatix-ts": "npm:@jsr/[email protected]",
+    "@std/path": "npm:@jsr/[email protected]",
     "async-lock": "1.4.0",
     "dayjs": "1.10.7",
     "electron-log": "5.1.2",
@@ -67,7 +68,7 @@
     "shlex": "2.1.2",
     "systeminformation": "5.21.15",
     "tree-kill": "1.2.2",
-    "vue": "3.5.11",
+    "vue": "3.5.13",
     "vuedraggable": "4.1.0",
     "vuex": "4.0.2",
     "zod": "3.22.4"
@@ -78,7 +79,7 @@
   "devDependencies": {
     "@chromatic-com/storybook": "1.5.0",
     "@openapitools/openapi-generator-cli": "2.15.3",
-    "@playwright/test": "1.48.0",
+    "@playwright/test": "1.48.2",
     "@quasar/vite-plugin": "1.8.1",
     "@storybook/addon-essentials": "8.4.4",
     "@storybook/addon-links": "8.4.4",
@@ -124,18 +125,17 @@
     "license-checker-rseidelsohn": "4.3.0",
     "markdownlint-cli": "0.37.0",
     "node-fetch": "2.7.0",
-    "playwright": "1.48.0",
+    "playwright": "1.48.2",
     "prettier": "3.2.5",
     "sass-embedded": "1.81.0",
     "storybook": "8.4.4",
     "typescript": "5.5.2",
     "vite": "5.4.11",
     "vite-plugin-checker": "0.8.0",
     "vite-plugin-electron": "0.29.0",
-    "vite-plugin-node-polyfills": "0.22.0",
     "vite-tsconfig-paths": "5.1.2",
     "vitest": "2.1.2",
-    "vue-tsc": "2.1.6",
+    "vue-tsc": "2.1.10",
     "yargs": "17.2.1"
   }
 }

src/backend/browser/fileImpl.ts

@@ -1,11 +1,11 @@
-import { sep } from "path";
 import { directoryHandleStoreKey } from "./contract";
 import { openDB } from "./browserConfig";
 import { SandboxKey } from "@/type/preload";
 import { failure, success } from "@/type/result";
 import { createLogger } from "@/domain/frontend/log";
 import { uuid4 } from "@/helpers/random";
 import { normalizeError } from "@/helpers/normalizeError";
+import path from "@/helpers/path";
 
 const log = createLogger("fileImpl");
 
@@ -73,12 +73,13 @@ export const showOpenDirectoryDialogImpl: (typeof window)[typeof SandboxKey]["sh
   };
 
 // separator 以前の文字列はディレクトリ名として扱う
-const resolveDirectoryName = (path: string) => path.split(sep)[0];
+const resolveDirectoryName = (dirPath: string) =>
+  dirPath.split(path.SEPARATOR)[0];
 
 // FileSystemDirectoryHandle.getFileHandle では / のような separator が含まれるとエラーになるため、ファイル名のみを抽出している
 const resolveFileName = (path: string) => {
   const maybeDirectoryHandleName = resolveDirectoryName(path);
-  return path.slice(maybeDirectoryHandleName.length + sep.length);
+  return path.slice(maybeDirectoryHandleName.length + 1);
 };
 
 // FileSystemDirectoryHandle.getFileHandle では / のような separator が含まれるとエラーになるため、以下の if 文で separator を除去している
@@ -116,22 +117,22 @@ const getDirectoryHandleFromDirectoryPath = async (
 // また GENERATE_AND_SAVE_ALL_AUDIO action では fixedExportEnabled の有効の有無に関わらず、ディレクトリ名も指定された状態でfilePathが渡ってくる
 export const writeFileImpl: (typeof window)[typeof SandboxKey]["writeFile"] =
   async (obj: { filePath: string; buffer: ArrayBuffer }) => {
-    const path = obj.filePath;
+    const filePath = obj.filePath;
 
-    if (!path.includes(sep)) {
+    if (!filePath.includes(path.SEPARATOR)) {
       const aTag = document.createElement("a");
       const blob = URL.createObjectURL(new Blob([obj.buffer]));
       aTag.href = blob;
-      aTag.download = path;
+      aTag.download = filePath;
       document.body.appendChild(aTag);
       aTag.click();
       document.body.removeChild(aTag);
       URL.revokeObjectURL(blob);
       return success(undefined);
     }
 
-    const fileName = resolveFileName(path);
-    const maybeDirectoryHandleName = resolveDirectoryName(path);
+    const fileName = resolveFileName(filePath);
+    const maybeDirectoryHandleName = resolveDirectoryName(filePath);
 
     const directoryHandle = await getDirectoryHandleFromDirectoryPath(
       maybeDirectoryHandleName,
@@ -153,15 +154,13 @@ export const writeFileImpl: (typeof window)[typeof SandboxKey]["writeFile"] =
   };
 
 export const checkFileExistsImpl: (typeof window)[typeof SandboxKey]["checkFileExists"] =
-  async (file) => {
-    const path = file;
-
-    if (!path.includes(sep)) {
+  async (filePath) => {
+    if (!filePath.includes(path.SEPARATOR)) {
       return Promise.resolve(false);
     }
 
-    const fileName = resolveFileName(path);
-    const maybeDirectoryHandleName = resolveDirectoryName(path);
+    const fileName = resolveFileName(filePath);
+    const maybeDirectoryHandleName = resolveDirectoryName(filePath);
 
     const directoryHandle = await getDirectoryHandleFromDirectoryPath(
       maybeDirectoryHandleName,

src/backend/electron/main.ts

@@ -41,12 +41,12 @@ import {
   EngineInfo,
   SystemError,
   defaultHotkeySettings,
-  isMac,
   defaultToolbarButtonSetting,
   EngineId,
   TextAsset,
 } from "@/type/preload";
 import { themes } from "@/domain/theme";
+import { isMac } from "@/helpers/platform";
 
 type SingleInstanceLockData = {
   filePath: string | undefined;

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/Dialog/SettingDialog/SettingDialog.vue

@@ -485,7 +485,6 @@ import {
   buildSongTrackAudioFileNameFromRawData,
 } from "@/store/utility";
 import {
-  isProduction,
   SavingSetting,
   EngineSettingType,
   ExperimentalSettingType,
@@ -496,6 +495,7 @@ import {
 } from "@/type/preload";
 import { createLogger } from "@/domain/frontend/log";
 import { useRootMiscSetting } from "@/composables/useRootMiscSetting";
+import { isProduction } from "@/helpers/platform";
 
 type SamplingRateOption = EngineSettingType["outputSamplingRate"];
 

src/components/Dialog/TextDialog/QuestionDialog.stories.ts

@@ -1,4 +1,4 @@
-import { userEvent, within, expect, fn, waitFor } from "@storybook/test";
+import { userEvent, within, expect, fn } from "@storybook/test";
 
 import { Meta, StoryObj } from "@storybook/vue3";
 import QuestionDialog from "./QuestionDialog.vue";
@@ -13,6 +13,7 @@ const meta: Meta<typeof QuestionDialog> = {
     message: "メッセージ",
     buttons: ["A", "B", "C"],
 
+    "onUpdate:modelValue": fn(),
     onOk: fn(),
     onHide: fn(),
   },
@@ -46,6 +47,7 @@ export const Close: Story = {
     const button = canvas.getByRole("button", { name: "A" });
     await userEvent.click(button);
 
+    await expect(args["onUpdate:modelValue"]).toBeCalledWith(false);
     await expect(args["onOk"]).toBeCalledWith({ index: 0 });
   },
 };
@@ -58,6 +60,7 @@ export const ClickBackdropWithoutCancel: Story = {
     if (!backdrop) throw new UnreachableError();
     await userEvent.click(backdrop);
 
+    await expect(args["onUpdate:modelValue"]).not.toBeCalled();
     await expect(args["onOk"]).not.toBeCalled();
   },
 };
@@ -70,7 +73,8 @@ export const ClickBackdropWithCancel: Story = {
     if (!backdrop) throw new UnreachableError();
     await userEvent.click(backdrop);
 
-    await waitFor(() => expect(args["onHide"]).toBeCalled());
+    await expect(args["onUpdate:modelValue"]).toBeCalledWith(false);
+    await expect(args["onOk"]).not.toBeCalled();
   },
 };
 

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";