Dialog周りと初期化周りを移動

src/components/App.vue

@@ -6,10 +6,11 @@
         <component
           :is="Component"
           :is-engines-ready="isEnginesReady"
-          :project-file-path="projectFilePath"
+          :is-project-file-loaded="isProjectFileLoaded"
         />
       </keep-alive>
     </router-view>
+    <all-dialog :is-engines-ready="isEnginesReady" />
   </error-boundary>
 </template>
 
@@ -21,6 +22,7 @@ import { EngineId } from "@/type/preload";
 import ErrorBoundary from "@/components/ErrorBoundary.vue";
 import { useStore } from "@/store";
 import { useHotkeyManager } from "@/plugins/hotkeyPlugin";
+import AllDialog from "@/components/Dialog/AllDialog.vue";
 
 const store = useStore();
 const route = useRoute();
@@ -67,6 +69,7 @@ watch(
 // ソフトウェアを初期化
 const { hotkeyManager } = useHotkeyManager();
 const isEnginesReady = ref(false);
+const isProjectFileLoaded = ref<boolean | "waiting">("waiting");
 onMounted(async () => {
   await store.dispatch("INIT_VUEX");
 
@@ -105,9 +108,26 @@ onMounted(async () => {
   await store.dispatch("SYNC_ALL_USER_DICT");
 
   isEnginesReady.value = true;
-});
 
-// TODO: ダイアログ周りをEditorHomeから移動する
+  // エンジン起動後にダイアログを開く
+  store.dispatch("SET_DIALOG_OPEN", {
+    isAcceptRetrieveTelemetryDialogOpen:
+      store.state.acceptRetrieveTelemetry === "Unconfirmed",
+    isAcceptTermsDialogOpen:
+      import.meta.env.MODE !== "development" &&
+      store.state.acceptTerms !== "Accepted",
+  });
 
-// TODO: エンジン起動状態周りの処理と表示をEditorHomeから移動する
+  // プロジェクトファイルが指定されていればロード
+  if (
+    typeof projectFilePath.value === "string" &&
+    projectFilePath.value !== ""
+  ) {
+    isProjectFileLoaded.value = await store.dispatch("LOAD_PROJECT_FILE", {
+      filePath: projectFilePath.value,
+    });
+  } else {
+    isProjectFileLoaded.value = false;
+  }
+});
 </script>

src/components/Dialog/AllDialog.vue

@@ -0,0 +1,161 @@
+<template>
+  <accept-retrieve-telemetry-dialog
+    v-model="isAcceptRetrieveTelemetryDialogOpenComputed"
+  />
+  <accept-terms-dialog v-model="isAcceptTermsDialogOpenComputed" />
+  <help-dialog v-model="isHelpDialogOpenComputed" />
+  <setting-dialog v-model="isSettingDialogOpenComputed" />
+  <hotkey-setting-dialog v-model="isHotkeySettingDialogOpenComputed" />
+  <tool-bar-custom-dialog v-model="isToolbarSettingDialogOpenComputed" />
+  <character-order-dialog
+    v-if="orderedAllCharacterInfos.length > 0"
+    v-model="isCharacterOrderDialogOpenComputed"
+    :character-infos="orderedAllCharacterInfos"
+  />
+  <default-style-list-dialog
+    v-if="orderedTalkCharacterInfos.length > 0"
+    v-model="isDefaultStyleSelectDialogOpenComputed"
+    :character-infos="orderedTalkCharacterInfos"
+  />
+  <dictionary-manage-dialog v-model="isDictionaryManageDialogOpenComputed" />
+  <engine-manage-dialog v-model="isEngineManageDialogOpenComputed" />
+  <update-notification-dialog-container
+    :can-open-dialog="canOpenNotificationDialog"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import HelpDialog from "@/components/Dialog/HelpDialog/HelpDialog.vue";
+import SettingDialog from "@/components/Dialog/SettingDialog.vue";
+import HotkeySettingDialog from "@/components/Dialog/HotkeySettingDialog.vue";
+import ToolBarCustomDialog from "@/components/Dialog/ToolBarCustomDialog.vue";
+import DefaultStyleListDialog from "@/components/Dialog/DefaultStyleListDialog.vue";
+import CharacterOrderDialog from "@/components/Dialog/CharacterOrderDialog.vue";
+import AcceptRetrieveTelemetryDialog from "@/components/Dialog/AcceptRetrieveTelemetryDialog.vue";
+import AcceptTermsDialog from "@/components/Dialog/AcceptTermsDialog.vue";
+import DictionaryManageDialog from "@/components/Dialog/DictionaryManageDialog.vue";
+import EngineManageDialog from "@/components/Dialog/EngineManageDialog.vue";
+import UpdateNotificationDialogContainer from "@/components/Dialog/UpdateNotificationDialog/Container.vue";
+import { useStore } from "@/store";
+import { filterCharacterInfosByStyleType } from "@/store/utility";
+
+const props =
+  defineProps<{
+    isEnginesReady: boolean;
+  }>();
+const store = useStore();
+
+// ライセンス表示
+const isHelpDialogOpenComputed = computed({
+  get: () => store.state.isHelpDialogOpen,
+  set: (val) => store.dispatch("SET_DIALOG_OPEN", { isHelpDialogOpen: val }),
+});
+
+// 設定
+const isSettingDialogOpenComputed = computed({
+  get: () => store.state.isSettingDialogOpen,
+  set: (val) => store.dispatch("SET_DIALOG_OPEN", { isSettingDialogOpen: val }),
+});
+
+// ショートカットキー設定
+const isHotkeySettingDialogOpenComputed = computed({
+  get: () => store.state.isHotkeySettingDialogOpen,
+  set: (val) =>
+    store.dispatch("SET_DIALOG_OPEN", {
+      isHotkeySettingDialogOpen: val,
+    }),
+});
+
+// ツールバーのカスタム設定
+const isToolbarSettingDialogOpenComputed = computed({
+  get: () => store.state.isToolbarSettingDialogOpen,
+  set: (val) =>
+    store.dispatch("SET_DIALOG_OPEN", {
+      isToolbarSettingDialogOpen: val,
+    }),
+});
+
+// 利用規約表示
+const isAcceptTermsDialogOpenComputed = computed({
+  get: () => store.state.isAcceptTermsDialogOpen,
+  set: (val) =>
+    store.dispatch("SET_DIALOG_OPEN", {
+      isAcceptTermsDialogOpen: val,
+    }),
+});
+
+// キャラクター並び替え
+const orderedAllCharacterInfos = computed(
+  () => store.getters.GET_ORDERED_ALL_CHARACTER_INFOS
+);
+const isCharacterOrderDialogOpenComputed = computed({
+  get: () =>
+    !store.state.isAcceptTermsDialogOpen &&
+    store.state.isCharacterOrderDialogOpen,
+  set: (val) =>
+    store.dispatch("SET_DIALOG_OPEN", {
+      isCharacterOrderDialogOpen: val,
+    }),
+});
+
+// TODO: デフォルトスタイル選択(ソング)の実装
+// デフォルトスタイル選択(トーク)
+const orderedTalkCharacterInfos = computed(() => {
+  return filterCharacterInfosByStyleType(
+    store.getters.GET_ORDERED_ALL_CHARACTER_INFOS,
+    "talk"
+  );
+});
+const isDefaultStyleSelectDialogOpenComputed = computed({
+  get: () =>
+    !store.state.isAcceptTermsDialogOpen &&
+    !store.state.isCharacterOrderDialogOpen &&
+    store.state.isDefaultStyleSelectDialogOpen,
+  set: (val) =>
+    store.dispatch("SET_DIALOG_OPEN", {
+      isDefaultStyleSelectDialogOpen: val,
+    }),
+});
+
+// エンジン管理
+const isEngineManageDialogOpenComputed = computed({
+  get: () => store.state.isEngineManageDialogOpen,
+  set: (val) =>
+    store.dispatch("SET_DIALOG_OPEN", {
+      isEngineManageDialogOpen: val,
+    }),
+});
+
+// 読み方＆アクセント辞書
+const isDictionaryManageDialogOpenComputed = computed({
+  get: () => store.state.isDictionaryManageDialogOpen,
+  set: (val) =>
+    store.dispatch("SET_DIALOG_OPEN", {
+      isDictionaryManageDialogOpen: val,
+    }),
+});
+
+const isAcceptRetrieveTelemetryDialogOpenComputed = computed({
+  get: () =>
+    !store.state.isAcceptTermsDialogOpen &&
+    !store.state.isCharacterOrderDialogOpen &&
+    !store.state.isDefaultStyleSelectDialogOpen &&
+    store.state.isAcceptRetrieveTelemetryDialogOpen,
+  set: (val) =>
+    store.dispatch("SET_DIALOG_OPEN", {
+      isAcceptRetrieveTelemetryDialogOpen: val,
+    }),
+});
+
+// エディタのアップデート確認ダイアログ
+const canOpenNotificationDialog = computed(() => {
+  return (
+    !store.state.isAcceptTermsDialogOpen &&
+    !store.state.isCharacterOrderDialogOpen &&
+    !store.state.isDefaultStyleSelectDialogOpen &&
+    !store.state.isAcceptRetrieveTelemetryDialogOpen &&
+    props.isEnginesReady
+  );
+});
+</script>

src/components/Sing/SingEditor.vue

@@ -2,7 +2,9 @@
   <menu-bar />
   <tool-bar />
   <div class="sing-main">
-    <engine-startup-overlay :is-completed-initial-startup="isEnginesReady" />
+    <engine-startup-overlay
+      :is-completed-initial-startup="isCompletedInitialStartup"
+    />
     <div v-if="nowAudioExporting" class="exporting-dialog">
       <div>
         <q-spinner color="primary" size="2.5rem" />
@@ -25,29 +27,25 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, watch } from "vue";
+import { computed, ref } from "vue";
 import MenuBar from "./MenuBar.vue";
 import ToolBar from "./ToolBar.vue";
 import ScoreSequencer from "./ScoreSequencer.vue";
+import EngineStartupOverlay from "@/components/EngineStartupOverlay.vue";
+import { useStore } from "@/store";
+import onetimeWatch from "@/helpers/onetimeWatch";
 import {
   DEFAULT_BEATS,
   DEFAULT_BEAT_TYPE,
   DEFAULT_BPM,
   DEFAULT_TPQN,
 } from "@/sing/storeHelper";
-import EngineStartupOverlay from "@/components/EngineStartupOverlay.vue";
-import { useStore } from "@/store";
 
-const props = withDefaults(
+const props =
   defineProps<{
-    projectFilePath?: string;
     isEnginesReady: boolean;
-  }>(),
-  {
-    projectFilePath: undefined,
-    isEnginesReady: false,
-  }
-);
+    isProjectFileLoaded: boolean | "waiting";
+  }>();
 
 const store = useStore();
 //const $q = useQuasar();
@@ -63,49 +61,49 @@ const cancelExport = () => {
   store.dispatch("CANCEL_AUDIO_EXPORT");
 };
 
-// 歌声合成エディターの初期化
-onMounted(async () => {
-  await store.dispatch("SET_SCORE", {
-    score: {
-      tpqn: DEFAULT_TPQN,
-      tempos: [
-        {
-          position: 0,
-          bpm: DEFAULT_BPM,
-        },
-      ],
-      timeSignatures: [
-        {
-          measureNumber: 1,
-          beats: DEFAULT_BEATS,
-          beatType: DEFAULT_BEAT_TYPE,
-        },
-      ],
-      notes: [],
-    },
-  });
+const isCompletedInitialStartup = ref(false);
+// TODO: Vueっぽくないので解体する
+onetimeWatch(
+  () => props.isProjectFileLoaded,
+  async (isProjectFileLoaded) => {
+    if (isProjectFileLoaded == "waiting" || !props.isEnginesReady)
+      return "continue";
 
-  await store.dispatch("SET_VOLUME", { volume: 0.6 });
-  await store.dispatch("SET_PLAYHEAD_POSITION", { position: 0 });
-  await store.dispatch("SET_LEFT_LOCATOR_POSITION", {
-    position: 0,
-  });
-  await store.dispatch("SET_RIGHT_LOCATOR_POSITION", {
-    position: 480 * 4 * 16,
-  });
-  return {};
-});
+    if (!isProjectFileLoaded) {
+      await store.dispatch("SET_SCORE", {
+        score: {
+          tpqn: DEFAULT_TPQN,
+          tempos: [
+            {
+              position: 0,
+              bpm: DEFAULT_BPM,
+            },
+          ],
+          timeSignatures: [
+            {
+              measureNumber: 1,
+              beats: DEFAULT_BEATS,
+              beatType: DEFAULT_BEAT_TYPE,
+            },
+          ],
+          notes: [],
+        },
+      });
 
-// エンジン初期化後の処理
-const unwatchIsEnginesReady = watch(
-  // TODO: 最初に１度だけ実行している。Vueっぽくないので解体する
-  () => props.isEnginesReady,
-  async (isEnginesReady) => {
-    if (!isEnginesReady) return;
+      await store.dispatch("SET_VOLUME", { volume: 0.6 });
+      await store.dispatch("SET_PLAYHEAD_POSITION", { position: 0 });
+      await store.dispatch("SET_LEFT_LOCATOR_POSITION", {
+        position: 0,
+      });
+      await store.dispatch("SET_RIGHT_LOCATOR_POSITION", {
+        position: 480 * 4 * 16,
+      });
+    }
+    isCompletedInitialStartup.value = true;
 
     await store.dispatch("SET_SINGER", {});
 
-    unwatchIsEnginesReady();
+    return "unwatch";
   },
   {
     immediate: true,