Merge branch 'change-hotkey' of https://github.com/tsym77yoshi/voicevox…

… into change-hotkey

package.json

@@ -43,6 +43,7 @@
     "electron-window-state": "5.0.3",
     "encoding-japanese": "1.0.30",
     "fast-array-diff": "1.1.0",
+    "fast-base64": "0.1.8",
     "glob": "8.0.3",
     "immer": "9.0.21",
     "markdown-it": "13.0.2",

src/@types/fast-base64.d.ts

@@ -0,0 +1,5 @@
+// fast-base64の型定義が壊れているので、ここで型定義を追加する。
+declare module "fast-base64" {
+  export function toBytes(base64: string): Promise<Uint8Array>;
+  export function toBase64(bytes: Uint8Array): Promise<string>;
+}

src/backend/electron/electronConfig.ts

@@ -1,6 +1,7 @@
 import { join } from "path";
 import fs from "fs";
 import { app } from "electron";
+import { moveFile } from "move-file";
 import { BaseConfigManager, Metadata } from "@/backend/common/ConfigManager";
 import { ConfigType } from "@/type/preload";
 
@@ -21,10 +22,16 @@ export class ElectronConfigManager extends BaseConfigManager {
   }
 
   protected async save(config: ConfigType & Metadata) {
+    // ファイル書き込みに失敗したときに設定が消えないように、tempファイル書き込み後上書き移動する
+    const temp_path = `${this.configPath}.tmp`;
     await fs.promises.writeFile(
-      this.configPath,
+      temp_path,
       JSON.stringify(config, undefined, 2),
     );
+
+    await moveFile(temp_path, this.configPath, {
+      overwrite: true,
+    });
   }
 
   private get configPath(): string {

src/components/CharacterButton.vue

@@ -196,11 +196,11 @@
 <script setup lang="ts">
 import { debounce, QBtn } from "quasar";
 import { computed, Ref, ref } from "vue";
-import { base64ImageToUri } from "@/helpers/base64Helper";
 import { useStore } from "@/store";
 import { CharacterInfo, SpeakerId, Voice } from "@/type/preload";
 import { formatCharacterStyleName } from "@/store/utility";
 import { getDefaultStyle } from "@/domain/talk";
+import { useEngineIcons } from "@/composables/useEngineIcons";
 
 const props = withDefaults(
   defineProps<{
@@ -275,14 +275,7 @@ const selectedStyleInfo = computed(() => {
   return style;
 });
 
-const engineIcons = computed(() =>
-  Object.fromEntries(
-    store.state.engineIds.map((engineId) => [
-      engineId,
-      base64ImageToUri(store.state.engineManifests[engineId].icon),
-    ]),
-  ),
-);
+const engineIcons = useEngineIcons(() => store.state.engineManifests);
 
 const getDefaultStyleWrapper = (speakerUuid: SpeakerId) =>
   getDefaultStyle(

src/components/Dialog/EngineManageDialog.vue

@@ -348,9 +348,9 @@
 <script setup lang="ts">
 import { computed, ref, watch } from "vue";
 import { useStore } from "@/store";
-import { base64ImageToUri } from "@/helpers/base64Helper";
 import { EngineDirValidationResult, EngineId } from "@/type/preload";
 import type { SupportedFeatures } from "@/openapi/models/SupportedFeatures";
+import { useEngineIcons } from "@/composables/useEngineIcons";
 
 type EngineLoaderType = "dir" | "vvpp";
 
@@ -398,15 +398,9 @@ const categorizedEngineIds = computed(() => {
 });
 const engineInfos = computed(() => store.state.engineInfos);
 const engineStates = computed(() => store.state.engineStates);
+
+const engineIcons = useEngineIcons(() => store.state.engineManifests);
 const engineManifests = computed(() => store.state.engineManifests);
-const engineIcons = computed(() =>
-  Object.fromEntries(
-    Object.entries(store.state.engineManifests).map(([id, manifest]) => [
-      id,
-      base64ImageToUri(manifest.icon),
-    ]),
-  ),
-);
 const engineVersions = ref<Record<EngineId, string>>({});
 
 watch(

src/components/Menu/MenuBar/MenuBar.vue

@@ -34,8 +34,8 @@ import TitleBarButtons from "./TitleBarButtons.vue";
 import TitleBarEditorSwitcher from "./TitleBarEditorSwitcher.vue";
 import { EditorType } from "@/type/preload";
 import { useStore } from "@/store";
-import { base64ImageToUri } from "@/helpers/base64Helper";
 import { useHotkeyManager } from "@/plugins/hotkeyPlugin";
+import { useEngineIcons } from "@/composables/useEngineIcons";
 
 const props = defineProps<{
   /** 「ファイル」メニューのサブメニュー */
@@ -82,6 +82,7 @@ const isFullscreen = computed(() => store.getters.IS_FULLSCREEN);
 const engineIds = computed(() => store.state.engineIds);
 const engineInfos = computed(() => store.state.engineInfos);
 const engineManifests = computed(() => store.state.engineManifests);
+const engineIcons = useEngineIcons(engineManifests);
 const enableMultiEngine = computed(() => store.state.enableMultiEngine);
 const titleText = computed(
   () =>
@@ -218,7 +219,7 @@ const engineSubMenuData = computed<MenuItemData[]>(() => {
             label: engineInfo.name,
             icon:
               engineManifests.value[engineInfo.uuid] &&
-              base64ImageToUri(engineManifests.value[engineInfo.uuid].icon),
+              engineIcons.value[engineInfo.uuid],
             subMenu: [
               engineInfo.path && {
                 type: "button",

src/components/Sing/CharacterMenuButton/MenuButton.vue

@@ -148,9 +148,9 @@ import { computed, ref } from "vue";
 import { debounce } from "quasar";
 import SelectedCharacter from "./SelectedCharacter.vue";
 import { useStore } from "@/store";
-import { base64ImageToUri } from "@/helpers/base64Helper";
 import { SpeakerId, StyleId } from "@/type/preload";
 import { getStyleDescription } from "@/sing/viewHelper";
+import { useEngineIcons } from "@/composables/useEngineIcons";
 
 const store = useStore();
 const uiLocked = computed(() => store.getters.UI_LOCKED);
@@ -239,14 +239,7 @@ const selectedStyleId = computed(
 // 複数エンジン
 const isMultipleEngine = computed(() => store.state.engineIds.length > 1);
 
-const engineIcons = computed(() =>
-  Object.fromEntries(
-    store.state.engineIds.map((engineId) => [
-      engineId,
-      base64ImageToUri(store.state.engineManifests[engineId].icon),
-    ]),
-  ),
-);
+const engineIcons = useEngineIcons(() => store.state.engineManifests);
 </script>
 
 <style scoped lang="scss">

src/components/Sing/SequencerNote.vue

@@ -307,17 +307,23 @@ const onLyricInput = (event: Event) => {
     }
   }
 
-  &.selected {
-    // 色は仮
-    .note-bar {
-      background-color: lab(95, -22.953, 14.365);
-      border-color: lab(65, -22.953, 14.365);
-      outline: solid 2px lab(70, -22.953, 14.365);
+  &:not(.below-pitch) {
+    .note-left-edge:hover {
+      // FIXME: hoverだとカーソル位置によって適用されないので、プレビュー中に明示的にクラス指定する
+      background-color: lab(80, -22.953, 14.365);
     }
 
-    &.below-pitch {
+    .note-right-edge:hover {
+      // FIXME: hoverだとカーソル位置によって適用されないので、プレビュー中に明示的にクラス指定する
+      background-color: lab(80, -22.953, 14.365);
+    }
+
+    &.selected {
+      // 色は仮
       .note-bar {
-        background-color: rgba(colors.$primary-rgb, 0.18);
+        background-color: lab(95, -22.953, 14.365);
+        border-color: lab(65, -22.953, 14.365);
+        outline: solid 2px lab(70, -22.953, 14.365);
       }
     }
   }
@@ -395,11 +401,6 @@ const onLyricInput = (event: Event) => {
   left: -1px;
   width: 5px;
   height: 100%;
-
-  &:hover {
-    // FIXME: hoverだとカーソル位置によって適用されないので、プレビュー中に明示的にクラス指定する
-    background-color: lab(80, -22.953, 14.365);
-  }
 }
 
 .note-right-edge {
@@ -408,11 +409,6 @@ const onLyricInput = (event: Event) => {
   right: -1px;
   width: 5px;
   height: 100%;
-
-  &:hover {
-    // FIXME: hoverだとカーソル位置によって適用されないので、プレビュー中に明示的にクラス指定する
-    background-color: lab(80, -22.953, 14.365);
-  }
 }
 
 .note-lyric-input {