stash

src/components/App.vue

@@ -32,6 +32,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 { setFont, themeToCss } from "@/domain/dom";
 
 const store = useStore();
 
@@ -64,7 +65,7 @@ watch(
 watch(
  () => store.state.editorFont,
  (editorFont) => {
- document.body.setAttribute("data-editor-font", editorFont);
+ setFont(editorFont);
  },
  { immediate: true },
 );
@@ -79,6 +80,33 @@ watch(
  },
 );
 
+// テーマの変更を監視してCSS変数を変更する
+watch(
+ () =>
+ [
+ store.state.currentTheme,
+ store.state.availableThemes,
+ store.state.isVuexReady,
+ ] as const,
+ ([currentTheme, availableThemes, isVuexReady]) => {
+ const theme = availableThemes.find((value) => {
+ return value.name == currentTheme;
+ });
+
+ if (theme == undefined) {
+ // NOTE: Vuexが初期化されていない場合はまだテーマが読み込まれていないので無視
+ if (isVuexReady) {
+ throw Error(`Theme not found: ${currentTheme}`);
+ } else {
+ return;
+ }
+ }
+
+ themeToCss(theme);
+ },
+ { immediate: true },
+);
+
 // ソフトウェアを初期化
 const { hotkeyManager } = useHotkeyManager();
 const isEnginesReady = ref(false);

src/components/Talk/TalkEditor.stories.ts

@@ -1,23 +1,34 @@
-import { userEvent, within, expect, fn } from "@storybook/test";
+import { userEvent, within, expect, fn, waitFor } from "@storybook/test";
+import hotkeys from "hotkeys-js";
 
 import { Meta, StoryObj } from "@storybook/vue3";
 import { provide, toRaw } from "vue";
 import TalkEditor from "./TalkEditor.vue";
 import { createStoreWrapper, storeKey } from "@/store";
 import { HotkeyManager, hotkeyManagerKey } from "@/plugins/hotkeyPlugin";
-import { StoreType } from "@/store/type";
 import {
  assetsPath,
  createOpenAPIEngineMock,
  mockHost,
-} from "@/storybook/engineMock";
+} from "@/mock/engineMock";
 import { proxyStoreCreator } from "@/store/proxy";
-import { CharacterInfo, EngineId, SpeakerId, StyleId } from "@/type/preload";
-import { getEngineManifestMock } from "@/storybook/engineMock/manifestMock";
+import {
+ CharacterInfo,
+ defaultHotkeySettings,
+ DefaultStyleId,
+ EngineId,
+ EngineInfo,
+ SpeakerId,
+ StyleId,
+ ThemeConf,
+} from "@/type/preload";
+import { getEngineManifestMock } from "@/mock/engineMock/manifestMock";
 import {
  getSpeakerInfoMock,
  getSpeakersMock,
-} from "@/storybook/engineMock/speakerResourceMock";
+} from "@/mock/engineMock/speakerResourceMock";
+import { setFont, themeToCss } from "@/domain/dom";
+import defaultTheme from "@/../public/themes/default.json";
 
 const meta: Meta<typeof TalkEditor> = {
  component: TalkEditor,
@@ -27,20 +38,51 @@ const meta: Meta<typeof TalkEditor> = {
  },
  decorators: [
  (story, context) => {
+ // CSS関連
+ themeToCss(defaultTheme as ThemeConf);
+ setFont("default");
+
+ // ショートカットキーの管理
  const hotkeyManager = new HotkeyManager();
  provide(hotkeyManagerKey, hotkeyManager);
+ hotkeyManager.load(defaultHotkeySettings);
+
+ hotkeyManager.onEditorChange("talk");
 
+ // setup store
  const store = createStoreWrapper({
  proxyStoreDI: proxyStoreCreator(createOpenAPIEngineMock()),
  });
- store.dispatch("HYDRATE_SETTING_STORE"); // FIXME: 色設定取得のため。設定も読み込んでしまうため不要にしたい。
+ provide(storeKey, store);
 
- // context.parameters.store = store;
+ // なぜか必要、これがないとdispatch内でcommitしたときにエラーになる
+ store.replaceState({
+ ...structuredClone(toRaw(store.state)),
+ });
 
+ // エンジンの情報
  const engineManifest = getEngineManifestMock();
  const engineId = EngineId(engineManifest.uuid);
+ const engineInfo: EngineInfo = {
+ uuid: engineId,
+ host: mockHost,
+ name: engineManifest.name,
+ path: undefined,
+ executionEnabled: false,
+ executionFilePath: "not_found",
+ executionArgs: [],
+ type: "default",
+ };
+ store.commit("SET_ENGINE_INFOS", {
+ engineIds: [engineId],
+ engineInfos: [engineInfo],
+ });
+ store.commit("SET_ENGINE_MANIFESTS", {
+ engineManifests: { [engineId]: engineManifest },
+ });
+ store.commit("SET_ENGINE_STATE", { engineId, engineState: "READY" });
 
- // setup store
+ // キャラクター情報
  const speakers = getSpeakersMock();
  const characterInfos: CharacterInfo[] = speakers.map((speaker) => {
  const speakerInfo = getSpeakerInfoMock(speaker.speakerUuid, assetsPath);
@@ -66,45 +108,24 @@ const meta: Meta<typeof TalkEditor> = {
  },
  };
  });
-
- store.replaceState({
- ...structuredClone(toRaw(store.state)),
- engineIds: [engineId],
- engineStates: {
- [engineId]: "READY",
- },
- engineInfos: {
- [engineId]: {
- uuid: engineId,
- host: mockHost,
- name: engineManifest.name,
- path: undefined,
- executionEnabled: false,
- executionFilePath: "not_found",
- executionArgs: [],
- type: "default",
- },
- },
- engineManifests: {
- [engineId]: engineManifest,
- },
- characterInfos: { [engineId]: characterInfos },
- defaultStyleIds: speakers.map((speaker) => ({
- engineId: engineId,
- speakerUuid: SpeakerId(speaker.speakerUuid),
- defaultStyleId: StyleId(speaker.styles[0].id),
- })),
+ store.commit("SET_CHARACTER_INFOS", { engineId, characterInfos });
+ store.commit("SET_USER_CHARACTER_ORDER", {
+ userCharacterOrder: store.state.characterInfos[engineId].map(
+ (c) => c.metas.speakerUuid,
+ ),
  });
 
- provide(storeKey, store);
+ // デフォルトスタイルID
+ const defaultStyleIds: DefaultStyleId[] = speakers.map((speaker) => ({
+ engineId: engineId,
+ speakerUuid: SpeakerId(speaker.speakerUuid),
+ defaultStyleId: StyleId(speaker.styles[0].id),
+ }));
+ store.commit("SET_DEFAULT_STYLE_IDS", { defaultStyleIds });
 
  return story();
  },
  ],
- beforeEach: async ({ parameters }) => {
- // const store = parameters.store; // TODO: 型を付けたい
- // await store.dispatch("LOAD_CHARACTER", { engineId: EngineId(mockHost) });
- },
 };
 
 export default meta;
@@ -120,3 +141,18 @@ export const NowLoading: Story = {
  isProjectFileLoaded: "waiting",
  },
 };
+
+export const KeyboardShortcuts: Story = {
+ name: "キーボードショートカットのテスト ",
+ play: async ({ args, canvasElement }) => {
+ await waitFor(() => {
+ expect(args.onCompleteInitialStartup).toHaveBeenCalled();
+ });
+
+ // Shift+Enter でテキスト欄を追加
+ // await userEvent.keyboard("{Shift>}[Enter]{/Shift}");
+ // await userEvent.keyboard("AAAAAA{Escape}");
+ hotkeys.trigger("shift+enter", "talk");
+ たぶんショートカットは使えない！
+ },
+};

src/components/Talk/TalkEditor.vue

@@ -147,6 +147,11 @@ const props = defineProps<{
  isProjectFileLoaded: boolean | "waiting";
 }>();
 
+const emit = defineEmits<{
+ /** トークエディタの準備が完了するときに呼ばれる */
+ completeInitialStartup: [];
+}>();
+
 const store = useStore();
 
 const audioKeys = computed(() => store.state.audioKeys);
@@ -508,7 +513,7 @@ watch(userOrderedCharacterInfos, (userOrderedCharacterInfos) => {
  }
 });
 
-// エンジン初期化後の処理
+/** トークエディタの準備が完了したフラグ */
 const isCompletedInitialStartup = ref(false);
 // TODO: Vueっぽくないので解体する
 onetimeWatch(
@@ -533,6 +538,7 @@ onetimeWatch(
  }
 
  isCompletedInitialStartup.value = true;
+ emit("completeInitialStartup");
 
  return "unwatch";
  },

src/domain/dom.ts

@@ -0,0 +1,42 @@
+import { colors, Dark, setCssVar } from "quasar";
+import { EditorFontType, ThemeColorType, ThemeConf } from "@/type/preload";
+
+/** テーマの設定をCSSへ反映する */
+export function themeToCss(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 setFont(font: EditorFontType) {
+ document.body.setAttribute("data-editor-font", font);
+}

src/mock/geneareNormalizedRandomState.ts

@@ -0,0 +1,28 @@
+import { State } from "@/store/type";
+import { AudioKey } from "@/type/preload";
+
+function generateIncrementalUuid(index: number) {
+ return `00000000-0000-0000-0000-${index.toString().padStart(12, "0")}`;
+}
+
+/** Stateのランダムな部分を正規化する便利関数。テスト用。 */
+export function geneareNormalizedRandomState(state: State) {
+ // これだと入れ替えたときとかにテストできない
+ // ので、やっぱりrandomUuidを使う側をmockにしたい
+ // globalにステートを作って、reset関数を１個まとめてあげる形がまるそう
+ // どうやって１箇所に集めるかは課題
+ // フォルダ名storybookに戻しても良さそう
+
+ // AudioKey
+ const oldAudioKeys = state.audioKeys;
+ const newAudioKeys = oldAudioKeys.map((_, index) =>
+ AudioKey(generateIncrementalUuid(index)),
+ );
+ state.audioItems = Object.fromEntries(
+ oldAudioKeys.map((oldKey, index) => [
+ newAudioKeys[index],
+ state.audioItems[oldKey],
+ ]),
+ );
+ state.audioKeys = newAudioKeys;
+}

src/store/audio.ts

@@ -684,8 +684,8 @@ export const audioStore = createPartialStore<AudioStoreTypes>({
 
  const query = getters.IS_ENGINE_READY(voice.engineId)
  ? await dispatch("FETCH_AUDIO_QUERY", fetchQueryParams).catch(
-  () => undefined,
-  )
+ () => undefined,
+ )
  : undefined;
 
  const newAudioItem: AudioItem = { text, voice };
@@ -2003,16 +2003,16 @@ export const audioCommandStore = transformCommandStore(
  changes: Record<
  AudioKey,
  | {
-  update: "AccentPhrases";
-  accentPhrases: AccentPhrase[];
-  }
+ update: "AccentPhrases";
+ accentPhrases: AccentPhrase[];
+ }
  | {
-  update: "AudioQuery";
-  query: AudioQuery;
-  }
+ update: "AudioQuery";
+ query: AudioQuery;
+ }
  | {
-  update: "OnlyVoice";
-  }
+ update: "OnlyVoice";
+ }
  >;
  },
  ) {
@@ -2067,16 +2067,16 @@ export const audioCommandStore = transformCommandStore(
  const changes: Record<
  AudioKey,
  | {
-  update: "AccentPhrases";
-  accentPhrases: AccentPhrase[];
-  }
+ update: "AccentPhrases";
+ accentPhrases: AccentPhrase[];
+ }
  | {
-  update: "AudioQuery";
-  query: AudioQuery;
-  }
+ update: "AudioQuery";
+ query: AudioQuery;
+ }
  | {
-  update: "OnlyVoice";
-  }
+ update: "OnlyVoice";
+ }
  > = {};
 
  for (const audioKey of audioKeys) {