Merge remote-tracking branch 'upstream/main' into エンジンのmockを作る

.eslintrc.js

@@ -13,6 +13,9 @@ const tsEslintRules = {
   // TODO: いずれは有効化する
   "@typescript-eslint/require-await": "off",
 
+  // 比較関数無しでのsortは文字列での比較になり、ミスが起こりやすいため有効化
+  "@typescript-eslint/require-array-sort-compare": "error",
+
   "@typescript-eslint/no-misused-promises": [
     "error",
     {

.github/workflows/build.yml

@@ -26,8 +26,8 @@ on:
         default: false
 
 env:
-  VOICEVOX_ENGINE_VERSION: 0.21.1
-  VOICEVOX_RESOURCE_VERSION: 0.21.1
+  VOICEVOX_ENGINE_VERSION: 0.22.0
+  VOICEVOX_RESOURCE_VERSION: 0.22.0
   VOICEVOX_EDITOR_VERSION:
     |- # releaseタグ名か、workflow_dispatchでのバージョン名か、999.999.999-developが入る
     ${{ github.event.release.tag_name || github.event.inputs.version || '999.999.999-develop' }}

docs/UX・UIデザインの方針.md

@@ -59,9 +59,16 @@
   - それ以外はトーストで通知（`SHOW_NOTIFY_`系）
     - 例: 音声を書き出しました。
     - 例: エンジンが異常終了しました。エンジンの再起動が必要です。
-- ダイアログの warning と confirm の使い分け
-  - 続行することが望まれそうな場合は confirm
-  - キャンセルすることが望まれそうな場合は warning
+- ダイアログに関して
+  - warning と confirm の使い分け
+    - 続行することが望まれそうな場合は confirm
+    - キャンセルすることが望まれそうな場合は warning
+  - ダイアログの文面
+    - タイトルは疑問文「～しますか？」
+    - 本文は簡潔にし、「よろしいですか？」などを避ける
+  - ボタンの色
+    - 肯定的で、そちらを選ぶ可能性が高いボタンはPrimary色にする
+    - 破壊的で、状態を戻すのに手間がかかる操作を行うボタンはWarningn色にする
 
 ## 文章など
 

playwright.config.ts

@@ -73,9 +73,6 @@ const config: PlaywrightTestConfig = {
      * For example in `await expect(locator).toHaveText();`
      */
     timeout: 5 * 1000,
-    toHaveScreenshot: {
-      maxDiffPixelRatio: 0.001,
-    },
   },
   // ファイルシステムが関連してくるので、Electronテストでは並列化しない
   fullyParallel: !isElectron,

public/howtouse.md

@@ -129,6 +129,8 @@ GPU をお持ちの方は、音声の生成がずっと速い GPU モードを
   - 読み上げの抑揚を変更できます。数値が小さいほど棒読みに近くなります。
 - 音量
   - 音声の音量を変更できます。数値が大きいほど音が大きくなります。
+- 間の長さ
+  - 文中の無音の長さを変更できます。数値が大きいほど無音時間が長くなります。
 - 開始無音・終了無音
   - 音声の先頭や末尾の無音の長さを変更できます。数値が大きいほど無音時間が長くなります。
 
@@ -236,10 +238,6 @@ GPU をお持ちの方は、音声の生成がずっと速い GPU モードを
   - 元に戻す
 - `Ctrl` + `Y`
   - やり直す
-- `Ctrl` + `+`
-  - 拡大
-- `Ctrl` + `-`
-  - 縮小
 - `Esc`
   - テキスト欄からカーソルを外す
 - 1

public/updateInfos.json

@@ -1,4 +1,35 @@
 [
+  {
+    "version": "0.22.0",
+    "descriptions": [
+      "トーク：間の長さの一括制御",
+      "ソング：対応モーラを追加",
+      "ソング：ツール選択機能",
+      "ソング：途中でBPMや拍子を変更可能に",
+      "フルスクリーンに対応",
+      "ショートカットキー設定ダイアログのデザインを刷新",
+      "UIの拡大・縮小機能",
+      "開発環境の向上",
+      "バグ修正"
+    ],
+    "contributors": [
+      "aoirint",
+      "Hiroshiba",
+      "kebin628",
+      "rokujyushi",
+      "romot-co",
+      "sabonerune",
+      "Segu-g",
+      "sevenc-nanashi",
+      "sigprogramming",
+      "takana-v",
+      "takusea",
+      "tarepan",
+      "terapotan",
+      "tsunekazuomija",
+      "X-20A"
+    ]
+  },
   {
     "version": "0.21.1",
     "descriptions": ["キャラクター「Voidoll」を追加"],

src/backend/browser/sandbox.ts

@@ -9,7 +9,6 @@ import {
 import { getConfigManager } from "./browserConfig";
 import { IpcSOData } from "@/type/ipc";
 import {
-  defaultHotkeySettings,
   defaultToolbarButtonSetting,
   EngineId,
   EngineSettingType,
@@ -247,9 +246,6 @@ export const api: Sandbox = {
   changePinWindow() {
     throw new Error(`Not supported on Browser version: changePinWindow`);
   },
-  getDefaultHotkeySettings() {
-    return Promise.resolve(defaultHotkeySettings);
-  },
   getDefaultToolbarSetting() {
     return Promise.resolve(defaultToolbarButtonSetting);
   },

src/backend/electron/main.ts

@@ -40,7 +40,6 @@ import { AssetTextFileNames } from "@/type/staticResources";
 import {
   EngineInfo,
   SystemError,
-  defaultHotkeySettings,
   defaultToolbarButtonSetting,
   EngineId,
   TextAsset,
@@ -695,10 +694,6 @@ registerIpcMainHandle<IpcMainHandle>({
     }
   },
 
-  GET_DEFAULT_HOTKEY_SETTINGS: () => {
-    return defaultHotkeySettings;
-  },
-
   GET_DEFAULT_TOOLBAR_SETTING: () => {
     return defaultToolbarButtonSetting;
   },

src/backend/electron/preload.ts

@@ -176,10 +176,6 @@ const api: Sandbox = {
     return ipcRendererInvokeProxy.HOTKEY_SETTINGS({ newData });
   },
 
-  getDefaultHotkeySettings: async () => {
-    return await ipcRendererInvokeProxy.GET_DEFAULT_HOTKEY_SETTINGS();
-  },
-
   getDefaultToolbarSetting: async () => {
     return await ipcRendererInvokeProxy.GET_DEFAULT_TOOLBAR_SETTING();
   },

src/components/App.vue

@@ -1,6 +1,6 @@
 <template>
   <ErrorBoundary>
-    <TooltipProvider disableHoverableContent>
+    <TooltipProvider disableHoverableContent :delayDuration="500">
       <MenuBar
         v-if="openedEditor != undefined"
         :fileSubMenuData="subMenuData.fileSubMenuData.value"

src/components/Base/BaseButton.vue

@@ -31,7 +31,7 @@ defineEmits<{
 
 .button {
   display: flex;
-  justify-content: space-between;
+  justify-content: center;
   align-items: center;
   text-wrap: nowrap;
   height: vars.$size-control;

src/components/Base/BaseIconButton.stories.ts

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+
+import { TooltipProvider } from "radix-vue";
+import BaseIconButton from "./BaseIconButton.vue";
+
+const meta: Meta<typeof BaseIconButton> = {
+  component: BaseIconButton,
+  render: (args) => ({
+    components: { BaseIconButton, TooltipProvider },
+    setup() {
+      return { args };
+    },
+    template: `
+    <TooltipProvider>
+      <BaseIconButton v-bind="args" />
+    </TooltipProvider>`,
+  }),
+};
+
+export default meta;
+type Story = StoryObj<typeof BaseIconButton>;
+
+export const Default: Story = {
+  args: {
+    label: "Default",
+    icon: "settings",
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    label: "Disabled",
+    icon: "settings",
+    disabled: true,
+  },
+};

src/components/Base/BaseIconButton.vue

@@ -0,0 +1,62 @@
+<template>
+  <BaseTooltip :label>
+    <button
+      class="button"
+      :disabled
+      @click="(payload) => $emit('click', payload)"
+    >
+      <!-- 暫定でq-iconを使用 -->
+      <QIcon v-if="icon" :name="icon" size="sm" />
+    </button>
+  </BaseTooltip>
+</template>
+
+<script setup lang="ts">
+import BaseTooltip from "./BaseTooltip.vue";
+
+defineProps<{
+  icon: string;
+  label: string;
+  disabled?: boolean;
+}>();
+
+defineEmits<{
+  (e: "click", payload: MouseEvent): void;
+}>();
+</script>
+
+<style scoped lang="scss">
+@use "@/styles/v2/variables" as vars;
+@use "@/styles/v2/mixin" as mixin;
+@use "@/styles/v2/colors" as colors;
+
+.button {
+  border: none;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: vars.$size-control;
+  width: vars.$size-control;
+  border-radius: vars.$radius-1;
+  color: colors.$display;
+  background-color: colors.$clear;
+  cursor: pointer;
+
+  &:focus-visible {
+    @include mixin.on-focus;
+  }
+
+  &:hover:not(:disabled) {
+    background-color: colors.$clear-hovered;
+  }
+
+  &:active:not(:disabled) {
+    background-color: colors.$clear-pressed;
+  }
+
+  &:disabled {
+    // Quasar側のopacity: 0.6 !important;を上書きするためimportantを付与
+    opacity: 0.4 !important;
+  }
+}
+</style>

src/components/Base/BaseScrollArea.vue

@@ -52,6 +52,7 @@ import {
 .ScrollAreaScrollbar {
   user-select: none;
   touch-action: none;
+  z-index: vars.$z-index-scrollbar;
 }
 
 .ScrollAreaScrollbar[data-orientation="vertical"] {

src/components/Dialog/Dialog.ts

@@ -16,7 +16,7 @@ import { withProgress } from "@/store/ui";
 type MediaType = "audio" | "text";
 
 export type TextDialogResult = "OK" | "CANCEL";
-export type AlertDialogOptions = {
+export type MessageDialogOptions = {
   type?: DialogType;
   title: string;
   message: string;
@@ -26,21 +26,23 @@ export type ConfirmDialogOptions = {
   type?: DialogType;
   title: string;
   message: string;
-  actionName: string;
+  actionName: string; // ボタンテキスト
+  isPrimaryColorButton?: boolean; // ボタンをPrimary色にするか
   cancel?: string;
 };
 export type WarningDialogOptions = {
   type?: DialogType;
   title: string;
   message: string;
-  actionName: string;
+  actionName: string; // ボタンテキスト
+  isWarningColorButton?: boolean; // ボタンをWarning色にするか
   cancel?: string;
 };
 export type QuestionDialogOptions = {
   type?: DialogType;
   title: string;
   message: string;
-  buttons: string[];
+  buttons: (string | { text: string; color: string })[];
   cancel: number;
   default?: number;
 };
@@ -55,7 +57,9 @@ export type NotifyAndNotShowAgainButtonOption = {
 export type LoadingScreenOption = { message: string };
 
 // 汎用ダイアログを表示
-export const showAlertDialog = async (options: AlertDialogOptions) => {
+
+/** メッセージを知らせるダイアログ */
+export const showMessageDialog = async (options: MessageDialogOptions) => {
   options.ok ??= "閉じる";
 
   const { promise, resolve } = Promise.withResolvers<void>();
@@ -74,6 +78,17 @@ export const showAlertDialog = async (options: AlertDialogOptions) => {
   return "OK" as const;
 };
 
+/** エラーが起こったことを知らせるダイアログ */
+export const showAlertDialog = async (
+  options: Omit<MessageDialogOptions, "type">,
+) => {
+  return await showMessageDialog({
+    ...options,
+    type: "error",
+  });
+};
+
+/** 続行することが望まれそうな場合の質問ダイアログ */
 export const showConfirmDialog = async (options: ConfirmDialogOptions) => {
   options.cancel ??= "キャンセル";
 
@@ -84,7 +99,12 @@ export const showConfirmDialog = async (options: ConfirmDialogOptions) => {
       type: options.type ?? "question",
       title: options.title,
       message: options.message,
-      buttons: [options.cancel, options.actionName],
+      buttons: [
+        options.cancel,
+        options.isPrimaryColorButton
+          ? { text: options.actionName, color: "primary" }
+          : options.actionName,
+      ],
       default: 1,
     },
   }).onOk(({ index }: { index: number }) => resolve(index));
@@ -94,6 +114,7 @@ export const showConfirmDialog = async (options: ConfirmDialogOptions) => {
   return index === 1 ? "OK" : "CANCEL";
 };
 
+/** キャンセルすることが望まれそうな場合の質問ダイアログ */
 export const showWarningDialog = async (options: WarningDialogOptions) => {
   options.cancel ??= "キャンセル";
 
@@ -104,7 +125,12 @@ export const showWarningDialog = async (options: WarningDialogOptions) => {
       type: options.type ?? "warning",
       title: options.title,
       message: options.message,
-      buttons: [options.cancel, options.actionName],
+      buttons: [
+        options.cancel,
+        options.isWarningColorButton
+          ? { text: options.actionName, color: "warning" }
+          : options.actionName,
+      ],
       default: 0,
     },
   }).onOk(({ index }: { index: number }) => resolve(index));
@@ -114,6 +140,7 @@ export const showWarningDialog = async (options: WarningDialogOptions) => {
   return index === 1 ? "OK" : "CANCEL";
 };
 
+/** キャンセル以外に複数の選択肢がある質問ダイアログ */
 export const showQuestionDialog = async (options: QuestionDialogOptions) => {
   const { promise, resolve } = Promise.withResolvers<number>();
   Dialog.create({