From 4bb13ca204b65f6fde81a81e51b5f77a1442b2a5 Mon Sep 17 00:00:00 2001
From: Hiroshiba <hihokaruta@gmail.com>
Date: Sat, 12 Oct 2024 22:34:33 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20=E3=83=86=E3=83=BC=E3=83=9E?=
 =?UTF-8?q?=E5=91=A8=E3=82=8A=E3=81=AE=E3=82=B3=E3=83=BC=E3=83=89=E3=82=92?=
 =?UTF-8?q?=E6=95=B4=E7=90=86=E3=81=97=E3=80=81=E8=A8=AD=E5=AE=9A=E3=82=92?=
 =?UTF-8?q?=E5=8F=96=E5=BE=97=E3=81=99=E3=82=8B=E6=B1=8E=E7=94=A8=E9=96=A2?=
 =?UTF-8?q?=E6=95=B0=E3=81=AB=E5=90=88=E6=B5=81=E3=81=95=E3=81=9B=E3=81=9F?=
 =?UTF-8?q?=E3=82=8A=E3=80=81=E3=83=86=E3=83=BC=E3=83=9E=E5=A4=89=E6=9B=B4?=
 =?UTF-8?q?=E9=96=A2=E6=95=B0=E3=82=92=E5=88=87=E3=82=8A=E5=87=BA=E3=81=97?=
 =?UTF-8?q?=E3=81=9F=E3=82=8A=E3=81=97=E3=81=9F=20(#2284)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* テーマ周りのコードをリファクタリング

* いらないメモを削除

* いらない型

* ピッチ線にも反映

* presetKey?: PresetKey;を戻す

* 関数名の変更
---
 README.md                                     |  6 +-
 src/backend/browser/sandbox.ts                | 23 +-----
 src/backend/electron/main.ts                  | 15 +---
 src/backend/electron/preload.ts               |  4 +-
 src/components/App.vue                        | 29 +++++--
 .../Dialog/SettingDialog/SettingDialog.vue    |  6 +-
 src/components/Sing/SequencerPitch.vue        |  2 +-
 src/domain/dom.ts                             | 42 +++++++++++
 src/store/setting.ts                          | 75 ++++---------------
 src/store/type.ts                             | 12 ++-
 src/store/ui.ts                               |  6 ++
 src/type/ipc.ts                               |  8 +-
 src/type/preload.ts                           |  7 +-
 13 files changed, 114 insertions(+), 121 deletions(-)
 create mode 100644 src/domain/dom.ts

diff --git a/README.md b/README.md
index 127bc521c1..5c4056e4d2 100644
--- a/README.md
+++ b/README.md
@@ -88,6 +88,9 @@ Storybook を使ってコンポーネントを開発することができます
 npm run storybook
 ```
 
+main ブランチの Storybook は Chromatic から確認できます。  
+<https://main--667d9c007418420dbb5b0f75.chromatic.com/>
+
 ### ブラウザ版の実行（開発中）
 
 別途音声合成エンジンを起動し、以下を実行して表示された localhost へアクセスします。
@@ -96,7 +99,8 @@ npm run storybook
 npm run browser:serve
 ```
 
-また、main ブランチのビルド結果がこちらにデプロイされています <https://voicevox-browser-dev.netlify.app/>  
+また、main ブランチのビルド結果がこちらにデプロイされています。  
+<https://voicevox-browser-dev.netlify.app/>  
 今はローカル PC 上で音声合成エンジンを起動する必要があります。
 
 ## ビルド
diff --git a/src/backend/browser/sandbox.ts b/src/backend/browser/sandbox.ts
index d7ec97d6e7..ba8e8b2eaa 100644
--- a/src/backend/browser/sandbox.ts
+++ b/src/backend/browser/sandbox.ts
@@ -295,32 +295,15 @@ export const api: Sandbox = {
     // TODO: Impl
     return;
   },
-  async theme(newData?: string) {
-    if (newData != undefined) {
-      await this.setSetting("currentTheme", newData);
-      return;
-    }
+  async getAvailableThemes() {
     // NOTE: Electron版では起動時にテーマ情報が必要なので、
     //       この実装とは違って起動時に読み込んだキャッシュを返すだけになっている。
     return Promise.all(
       // FIXME: themeファイルのいい感じのパスの設定
       ["/themes/default.json", "/themes/dark.json"].map((url) =>
-        fetch(url).then((res) => res.json()),
+        fetch(url).then((res) => res.json() as Promise<ThemeConf>),
       ),
-    )
-      .then((v) => ({
-        currentTheme: "Default",
-        availableThemes: v,
-      }))
-      .then((v) =>
-        this.getSetting("currentTheme").then(
-          (currentTheme) =>
-            ({
-              ...v,
-              currentTheme,
-            }) as { currentTheme: string; availableThemes: ThemeConf[] },
-        ),
-      );
+    );
   },
   vuexReady() {
     // NOTE: 何もしなくて良さそう
diff --git a/src/backend/electron/main.ts b/src/backend/electron/main.ts
index 6fa17cb80a..fc5109f55c 100644
--- a/src/backend/electron/main.ts
+++ b/src/backend/electron/main.ts
@@ -760,6 +760,10 @@ registerIpcMainHandle<IpcMainHandle>({
     }
   },
 
+  GET_AVAILABLE_THEMES: () => {
+    return themes;
+  },
+
   OPEN_LOG_DIRECTORY: () => {
     void shell.openPath(app.getPath("logs"));
   },
@@ -791,17 +795,6 @@ registerIpcMainHandle<IpcMainHandle>({
     return configManager.get("hotkeySettings");
   },
 
-  THEME: (_, { newData }) => {
-    if (newData != undefined) {
-      configManager.set("currentTheme", newData);
-      return;
-    }
-    return {
-      currentTheme: configManager.get("currentTheme"),
-      availableThemes: themes,
-    };
-  },
-
   ON_VUEX_READY: () => {
     win.show();
   },
diff --git a/src/backend/electron/preload.ts b/src/backend/electron/preload.ts
index c94d3d1ea5..2fdd5af720 100644
--- a/src/backend/electron/preload.ts
+++ b/src/backend/electron/preload.ts
@@ -217,8 +217,8 @@ const api: Sandbox = {
     void ipcRendererInvokeProxy.SET_NATIVE_THEME(source);
   },
 
-  theme: (newData) => {
-    return ipcRendererInvokeProxy.THEME({ newData });
+  getAvailableThemes: () => {
+    return ipcRendererInvokeProxy.GET_AVAILABLE_THEMES();
   },
 
   vuexReady: () => {
diff --git a/src/components/App.vue b/src/components/App.vue
index db73ce923c..b4798dead7 100644
--- a/src/components/App.vue
+++ b/src/components/App.vue
@@ -23,7 +23,7 @@
 </template>
 
 <script setup lang="ts">
-import { watch, onMounted, ref, computed, toRaw } from "vue";
+import { watch, onMounted, ref, computed, toRaw, watchEffect } from "vue";
 import { useGtm } from "@gtm-support/vue-gtm";
 import { TooltipProvider } from "radix-vue";
 import TalkEditor from "@/components/Talk/TalkEditor.vue";
@@ -36,6 +36,7 @@ import AllDialog from "@/components/Dialog/AllDialog.vue";
 import MenuBar from "@/components/Menu/MenuBar/MenuBar.vue";
 import { useMenuBarData as useTalkMenuBarData } from "@/components/Talk/menuBarData";
 import { useMenuBarData as useSingMenuBarData } from "@/components/Sing/menuBarData";
+import { setFontToCss, setThemeToCss } from "@/domain/dom";
 import { ExhaustiveError } from "@/type/utility";
 
 const store = useStore();
@@ -66,13 +67,9 @@ watch(
 );
 
 // フォントの制御用パラメータを変更する
-watch(
-  () => store.state.editorFont,
-  (editorFont) => {
-    document.body.setAttribute("data-editor-font", editorFont);
-  },
-  { immediate: true },
-);
+watchEffect(() => {
+  setFontToCss(store.state.editorFont);
+});
 
 // エディタの切り替えを監視してショートカットキーの設定を変更する
 watch(
@@ -84,6 +81,22 @@ watch(
   },
 );
 
+// テーマの変更を監視してCSS変数を変更する
+watchEffect(() => {
+  const theme = store.state.availableThemes.find((value) => {
+    return value.name == store.state.currentTheme;
+  });
+  if (theme == undefined) {
+    // NOTE: Vuexが初期化されていない場合はまだテーマが読み込まれていないので無視
+    if (store.state.isVuexReady) {
+      throw Error(`Theme not found: ${store.state.currentTheme}`);
+    } else {
+      return;
+    }
+  }
+  setThemeToCss(theme);
+});
+
 // ソフトウェアを初期化
 const { hotkeyManager } = useHotkeyManager();
 const isEnginesReady = ref(false);
diff --git a/src/components/Dialog/SettingDialog/SettingDialog.vue b/src/components/Dialog/SettingDialog/SettingDialog.vue
index c111a5610b..054024edd4 100644
--- a/src/components/Dialog/SettingDialog/SettingDialog.vue
+++ b/src/components/Dialog/SettingDialog/SettingDialog.vue
@@ -569,14 +569,14 @@ const undoableTrackOperations = computed({
 
 // 外観
 const currentThemeNameComputed = computed({
-  get: () => store.state.themeSetting.currentTheme,
+  get: () => store.state.currentTheme,
   set: (currentTheme: string) => {
-    void store.dispatch("SET_THEME_SETTING", { currentTheme: currentTheme });
+    void store.dispatch("SET_CURRENT_THEME_SETTING", { currentTheme });
   },
 });
 
 const availableThemeNameComputed = computed(() => {
-  return [...store.state.themeSetting.availableThemes]
+  return [...store.state.availableThemes]
     .sort((a, b) => a.order - b.order)
     .map((theme) => {
       return { label: theme.displayName, value: theme.name };
diff --git a/src/components/Sing/SequencerPitch.vue b/src/components/Sing/SequencerPitch.vue
index 5918020987..ed3ae21b78 100644
--- a/src/components/Sing/SequencerPitch.vue
+++ b/src/components/Sing/SequencerPitch.vue
@@ -50,7 +50,7 @@ const props = defineProps<{
 const { warn, error } = createLogger("SequencerPitch");
 const store = useStore();
 const tpqn = computed(() => store.state.tpqn);
-const isDark = computed(() => store.state.themeSetting.currentTheme === "Dark");
+const isDark = computed(() => store.state.currentTheme === "Dark");
 const tempos = computed(() => [store.state.tempos[0]]);
 const pitchEditData = computed(() => {
   return store.getters.SELECTED_TRACK.pitchEditData;
diff --git a/src/domain/dom.ts b/src/domain/dom.ts
new file mode 100644
index 0000000000..8d4e512c6a
--- /dev/null
+++ b/src/domain/dom.ts
@@ -0,0 +1,42 @@
+import { colors, Dark, setCssVar } from "quasar";
+import { EditorFontType, ThemeColorType, ThemeConf } from "@/type/preload";
+
+/** テーマの設定をCSSへ反映する */
+export function setThemeToCss(theme: ThemeConf) {
+  for (const key in theme.colors) {
+    const color = theme.colors[key as ThemeColorType];
+    const { r, g, b } = colors.hexToRgb(color);
+    document.documentElement.style.setProperty(`--color-${key}`, color);
+    document.documentElement.style.setProperty(
+      `--color-${key}-rgb`,
+      `${r}, ${g}, ${b}`,
+    );
+  }
+  const mixColors: ThemeColorType[][] = [
+    ["primary", "background"],
+    ["warning", "background"],
+  ];
+  for (const [color1, color2] of mixColors) {
+    const color1Rgb = colors.hexToRgb(theme.colors[color1]);
+    const color2Rgb = colors.hexToRgb(theme.colors[color2]);
+    const r = Math.trunc((color1Rgb.r + color2Rgb.r) / 2);
+    const g = Math.trunc((color1Rgb.g + color2Rgb.g) / 2);
+    const b = Math.trunc((color1Rgb.b + color2Rgb.b) / 2);
+    const propertyName = `--color-mix-${color1}-${color2}-rgb`;
+    const cssColor = `${r}, ${g}, ${b}`;
+    document.documentElement.style.setProperty(propertyName, cssColor);
+  }
+  Dark.set(theme.isDark);
+  setCssVar("primary", theme.colors["primary"]);
+  setCssVar("warning", theme.colors["warning"]);
+
+  document.documentElement.setAttribute(
+    "is-dark-theme",
+    theme.isDark ? "true" : "false",
+  );
+}
+
+/** フォントを設定する */
+export function setFontToCss(font: EditorFontType) {
+  document.body.setAttribute("data-editor-font", font);
+}
diff --git a/src/store/setting.ts b/src/store/setting.ts
index f2e150192e..a3611e0397 100644
--- a/src/store/setting.ts
+++ b/src/store/setting.ts
@@ -1,4 +1,3 @@
-import { Dark, setCssVar, colors } from "quasar";
 import { SettingStoreState, SettingStoreTypes } from "./type";
 import { createDotNotationUILockAction as createUILockAction } from "./ui";
 import { createDotNotationPartialStore as createPartialStore } from "./vuex";
@@ -6,8 +5,6 @@ import {
   HotkeySettingType,
   SavingSetting,
   ExperimentalSettingType,
-  ThemeColorType,
-  ThemeConf,
   ToolbarSettingType,
   EngineId,
   ConfirmedTips,
@@ -33,10 +30,8 @@ export const settingStoreState: SettingStoreState = {
   engineIds: [],
   engineInfos: {},
   engineManifests: {},
-  themeSetting: {
-    currentTheme: "Default",
-    availableThemes: [],
-  },
+  currentTheme: "Default",
+  availableThemes: [],
   editorFont: "default",
   showTextLineNumber: false,
   showAddAudioItemButton: true,
@@ -83,16 +78,12 @@ export const settingStore = createPartialStore<SettingStoreTypes>({
         });
       });
 
-      const theme = await window.backend.theme();
-      if (theme) {
-        mutations.SET_THEME_SETTING({
-          currentTheme: theme.currentTheme,
-          themes: theme.availableThemes,
-        });
-        void actions.SET_THEME_SETTING({
-          currentTheme: theme.currentTheme,
-        });
-      }
+      mutations.SET_AVAILABLE_THEMES({
+        themes: await window.backend.getAvailableThemes(),
+      });
+      void actions.SET_CURRENT_THEME_SETTING({
+        currentTheme: await window.backend.getSetting("currentTheme"),
+      });
 
       void actions.SET_ACCEPT_RETRIEVE_TELEMETRY({
         acceptRetrieveTelemetry: await window.backend.getSetting(
@@ -230,19 +221,13 @@ export const settingStore = createPartialStore<SettingStoreTypes>({
     },
   },
 
-  SET_THEME_SETTING: {
-    mutation(
-      state,
-      { currentTheme, themes }: { currentTheme: string; themes?: ThemeConf[] },
-    ) {
-      if (themes) {
-        state.themeSetting.availableThemes = themes;
-      }
-      state.themeSetting.currentTheme = currentTheme;
+  SET_CURRENT_THEME_SETTING: {
+    mutation(state, { currentTheme }: { currentTheme: string }) {
+      state.currentTheme = currentTheme;
     },
     action({ state, mutations }, { currentTheme }: { currentTheme: string }) {
-      void window.backend.theme(currentTheme);
-      const theme = state.themeSetting.availableThemes.find((value) => {
+      void window.backend.setSetting("currentTheme", currentTheme);
+      const theme = state.availableThemes.find((value) => {
         return value.name == currentTheme;
       });
 
@@ -250,41 +235,9 @@ export const settingStore = createPartialStore<SettingStoreTypes>({
         throw Error("Theme not found");
       }
 
-      for (const key in theme.colors) {
-        const color = theme.colors[key as ThemeColorType];
-        const { r, g, b } = colors.hexToRgb(color);
-        document.documentElement.style.setProperty(`--color-${key}`, color);
-        document.documentElement.style.setProperty(
-          `--color-${key}-rgb`,
-          `${r}, ${g}, ${b}`,
-        );
-      }
-      const mixColors: ThemeColorType[][] = [
-        ["primary", "background"],
-        ["warning", "background"],
-      ];
-      for (const [color1, color2] of mixColors) {
-        const color1Rgb = colors.hexToRgb(theme.colors[color1]);
-        const color2Rgb = colors.hexToRgb(theme.colors[color2]);
-        const r = Math.trunc((color1Rgb.r + color2Rgb.r) / 2);
-        const g = Math.trunc((color1Rgb.g + color2Rgb.g) / 2);
-        const b = Math.trunc((color1Rgb.b + color2Rgb.b) / 2);
-        const propertyName = `--color-mix-${color1}-${color2}-rgb`;
-        const cssColor = `${r}, ${g}, ${b}`;
-        document.documentElement.style.setProperty(propertyName, cssColor);
-      }
-      Dark.set(theme.isDark);
-      setCssVar("primary", theme.colors["primary"]);
-      setCssVar("warning", theme.colors["warning"]);
-
-      document.documentElement.setAttribute(
-        "is-dark-theme",
-        theme.isDark ? "true" : "false",
-      );
-
       window.backend.setNativeTheme(theme.isDark ? "dark" : "light");
 
-      mutations.SET_THEME_SETTING({
+      mutations.SET_CURRENT_THEME_SETTING({
         currentTheme: currentTheme,
       });
     },
diff --git a/src/store/type.ts b/src/store/type.ts
index 63b275238b..8d13ac4d94 100644
--- a/src/store/type.ts
+++ b/src/store/type.ts
@@ -30,7 +30,6 @@ import {
   MoraDataType,
   SavingSetting,
   ThemeConf,
-  ThemeSetting,
   ExperimentalSettingType,
   ToolbarSettingType,
   UpdateInfo,
@@ -1782,7 +1781,8 @@ export type SettingStoreState = {
   engineIds: EngineId[];
   engineInfos: Record<EngineId, EngineInfo>;
   engineManifests: Record<EngineId, EngineManifest>;
-  themeSetting: ThemeSetting;
+  currentTheme: string;
+  availableThemes: ThemeConf[];
   acceptTerms: AcceptTermsStatus;
   acceptRetrieveTelemetry: AcceptRetrieveTelemetryStatus;
   experimentalSetting: ExperimentalSettingType;
@@ -1823,8 +1823,8 @@ export type SettingStoreTypes = {
     action(payload: KeyValuePayload<RootMiscSettingType>): void;
   };
 
-  SET_THEME_SETTING: {
-    mutation: { currentTheme: string; themes?: ThemeConf[] };
+  SET_CURRENT_THEME_SETTING: {
+    mutation: { currentTheme: string };
     action(payload: { currentTheme: string }): void;
   };
 
@@ -2016,6 +2016,10 @@ export type UiStoreTypes = {
     action(payload: { activePointScrollMode: ActivePointScrollMode }): void;
   };
 
+  SET_AVAILABLE_THEMES: {
+    mutation: { themes: ThemeConf[] };
+  };
+
   DETECT_UNMAXIMIZED: {
     mutation: undefined;
     action(): void;
diff --git a/src/store/ui.ts b/src/store/ui.ts
index e251f5c7f5..b177f0101b 100644
--- a/src/store/ui.ts
+++ b/src/store/ui.ts
@@ -371,6 +371,12 @@ export const uiStore = createPartialStore<UiStoreTypes>({
     },
   },
 
+  SET_AVAILABLE_THEMES: {
+    mutation(state, { themes }) {
+      state.availableThemes = themes;
+    },
+  },
+
   DETECT_UNMAXIMIZED: {
     mutation(state) {
       state.isMaximized = false;
diff --git a/src/type/ipc.ts b/src/type/ipc.ts
index 0311c5efca..63cd0eb514 100644
--- a/src/type/ipc.ts
+++ b/src/type/ipc.ts
@@ -4,7 +4,7 @@ import {
   EngineInfo,
   EngineDirValidationResult,
   HotkeySettingType,
-  ThemeSetting,
+  ThemeConf,
   ToolbarSettingType,
   UpdateInfo,
   NativeThemeType,
@@ -229,9 +229,9 @@ export type IpcIHData = {
     return: ToolbarSettingType;
   };
 
-  THEME: {
-    args: [obj: { newData?: string }];
-    return: ThemeSetting | void;
+  GET_AVAILABLE_THEMES: {
+    args: [];
+    return: ThemeConf[];
   };
 
   ON_VUEX_READY: {
diff --git a/src/type/preload.ts b/src/type/preload.ts
index da847c703f..77e8ab748d 100644
--- a/src/type/preload.ts
+++ b/src/type/preload.ts
@@ -286,7 +286,7 @@ export interface Sandbox {
   getDefaultHotkeySettings(): Promise<HotkeySettingType[]>;
   getDefaultToolbarSetting(): Promise<ToolbarSettingType>;
   setNativeTheme(source: NativeThemeType): void;
-  theme(newData?: string): Promise<ThemeSetting | void>;
+  getAvailableThemes(): Promise<ThemeConf[]>;
   vuexReady(): void;
   getSetting<Key extends keyof ConfigType>(key: Key): Promise<ConfigType[Key]>;
   setSetting<Key extends keyof ConfigType>(
@@ -556,11 +556,6 @@ export type ThemeConf = {
   };
 };
 
-export type ThemeSetting = {
-  currentTheme: string;
-  availableThemes: ThemeConf[];
-};
-
 export const experimentalSettingSchema = z.object({
   enableInterrogativeUpspeak: z.boolean().default(false),
   enableMorphing: z.boolean().default(false),