project-s: UIスケルトンの用意 (#977)

* #15 要素のみの状態

* #15 project-s:storeの利用(仕掛かり)

* project-s: 各コンポーネントの調整 (#15)

* project-s: spec追加 (#15)

* project-s: Component name Note should always be multi-word の修正 (#15)

* project-s: 未使用定数などの削除(今後利用時追加) #15

Co-authored-by: Romot <[email protected]>

package.json

@@ -30,6 +30,7 @@
   "dependencies": {
     "@gtm-support/vue-gtm": "1.2.3",
     "@quasar/extras": "1.10.10",
+    "@tonejs/midi": "2.0.28",
     "ajv": "8.6.2",
     "core-js": "3.12.1",
     "dayjs": "1.10.7",

src/components/Sing/MenuBar.vue

@@ -0,0 +1,254 @@
+<template>
+  <q-bar class="bg-background q-pa-none relative-position">
+    <menu-button
+      v-for="(root, index) of menudata"
+      :key="index"
+      :menudata="root"
+      v-model:selected="subMenuOpenFlags[index]"
+      :disable="menubarLocked"
+      @mouseover="reassignSubMenuOpen(index)"
+      @mouseleave="
+        root.type === 'button' ? (subMenuOpenFlags[index] = false) : undefined
+      "
+    />
+  </q-bar>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, computed, ComputedRef } from "vue";
+import { useStore } from "@/store";
+import MenuButton from "@/components/MenuButton.vue";
+import { HotkeyAction, HotkeyReturnType } from "@/type/preload";
+import { setHotkeyFunctions } from "@/store/setting";
+
+type SingMenuItemBase<T extends string> = {
+  type: T;
+  label?: string;
+};
+
+export type MenuItemSeparator = SingMenuItemBase<"separator">;
+
+export type MenuItemRoot = SingMenuItemBase<"root"> & {
+  onClick: () => void;
+  subMenu: MenuItemData[];
+  icon?: string;
+};
+
+export type MenuItemButton = SingMenuItemBase<"button"> & {
+  onClick: () => void;
+  icon?: string;
+};
+
+export type MenuItemCheckbox = SingMenuItemBase<"checkbox"> & {
+  checked: ComputedRef<boolean>;
+  onClick: () => void;
+};
+
+export type MenuItemData =
+  | MenuItemSeparator
+  | MenuItemRoot
+  | MenuItemButton
+  | MenuItemCheckbox;
+
+export type MenuItemType = MenuItemData["type"];
+
+export default defineComponent({
+  name: "SingMenuBar",
+
+  components: {
+    MenuButton,
+  },
+
+  setup() {
+    const store = useStore();
+    const currentVersion = ref("");
+    window.electron.getAppInfos().then((obj) => {
+      currentVersion.value = obj.version;
+    });
+    const isFullscreen = computed(() => store.getters.IS_FULLSCREEN);
+    const menubarLocked = false; // computed(() => store.getters.IS_SING_MENUBAR_LOCKED);
+
+    const createNewSingProject = async () => {
+      return null;
+      // await store.dispatch("CREATE_NEW_SING_PROJECT", {});
+    };
+
+    const openSingProject = async () => {
+      return null;
+      // await store.dispatch("OPEN_SING_PROJECT", {});
+    };
+
+    const saveSingProject = async () => {
+      return null;
+      // await store.dispatch("SAVE_SING_PROJECT", {});
+    };
+
+    const saveAsSingProject = async () => {
+      return null;
+      // await store.dispatch("SAVE_AS_SING_PROJECT", {});
+    };
+
+    const importMidiFile = async () => {
+      return null;
+      // await store.dispatch("IMPORT_MIDI_FILE", {});
+    };
+
+    const importMusicXMLFile = async () => {
+      return null;
+      // await store.dispatch("IMPORT_MUSICXML_FILE", {});
+    };
+
+    const exportSingDataAsWaveFile = async () => {
+      return null;
+      // await store.dispatch("EXPORT_SING_DATA_AS_WAVE_FILE", {});
+    };
+
+    const openHelpDialog = () => {
+      store.dispatch("IS_HELP_DIALOG_OPEN", {
+        isHelpDialogOpen: true,
+      });
+    };
+
+    const closeAllDialog = () => {
+      return null;
+    };
+
+    const menudata = ref<MenuItemData[]>([
+      {
+        type: "root",
+        label: "ファイル",
+        onClick: () => {
+          closeAllDialog();
+        },
+        subMenu: [
+          {
+            type: "button",
+            label: "新規",
+            onClick: () => {
+              createNewSingProject();
+            },
+          },
+          {
+            type: "button",
+            label: "開く",
+            onClick: () => {
+              openSingProject();
+            },
+          },
+          {
+            type: "button",
+            label: "保存",
+            onClick: () => {
+              saveSingProject();
+            },
+          },
+          {
+            type: "button",
+            label: "別名で保存",
+            onClick: () => {
+              saveAsSingProject();
+            },
+          },
+          { type: "separator" },
+          {
+            type: "button",
+            label: "MIDI読み込み",
+            onClick: () => {
+              importMidiFile();
+            },
+          },
+          {
+            type: "button",
+            label: "MusicXML読み込み",
+            onClick: () => {
+              importMusicXMLFile();
+            },
+          },
+          { type: "separator" },
+          {
+            type: "button",
+            label: "音声を出力",
+            onClick: () => {
+              exportSingDataAsWaveFile();
+            },
+          },
+        ],
+      },
+      {
+        type: "button",
+        label: "ヘルプ",
+        onClick: () => {
+          if (store.state.isHelpDialogOpen) closeAllDialog();
+          else {
+            closeAllDialog();
+            openHelpDialog();
+          }
+        },
+      },
+    ]);
+
+    const subMenuOpenFlags = ref(
+      [...Array(menudata.value.length)].map(() => false)
+    );
+
+    const reassignSubMenuOpen = (idx: number) => {
+      if (subMenuOpenFlags.value[idx]) return;
+      if (subMenuOpenFlags.value.find((x) => x)) {
+        const arr = [...Array(menudata.value.length)].map(() => false);
+        arr[idx] = true;
+        subMenuOpenFlags.value = arr;
+      }
+    };
+
+    const hotkeyMap = new Map<HotkeyAction, () => HotkeyReturnType>([
+      // NOTE: 初期設定なし
+      // ["新規", createNewSingProject],
+    ]);
+
+    setHotkeyFunctions(hotkeyMap);
+
+    return {
+      currentVersion,
+      isFullscreen,
+      menubarLocked,
+      subMenuOpenFlags,
+      reassignSubMenuOpen,
+      menudata,
+    };
+  },
+});
+</script>
+
+<style lang="scss">
+@use '@/styles/colors' as colors;
+
+.active-menu {
+  background-color: rgba(colors.$primary-rgb, 0.3) !important;
+}
+</style>
+
+<style scoped lang="scss">
+@use '@/styles/variables' as vars;
+@use '@/styles/colors' as colors;
+
+.q-bar {
+  align-items: center;
+  min-height: vars.$menubar-height;
+  -webkit-app-region: drag;
+  > .q-btn {
+    margin-left: 0;
+    -webkit-app-region: no-drag;
+  }
+}
+
+.window-logo {
+  height: vars.$menubar-height;
+}
+
+.window-title {
+  height: vars.$menubar-height;
+  margin-right: 10%;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+</style>

src/components/Sing/ScorePosition.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="sing-score-position">シーケンサ上ツールバー</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  name: "SingScorePosition",
+
+  setup() {
+    return null;
+  },
+});
+</script>
+
+<style scoped lang="scss">
+@use '@/styles/variables' as vars;
+@use '@/styles/colors' as colors;
+
+.sing-score-position {
+  background: colors.$background;
+  border-bottom: 1px solid #ccc;
+  height: 32px;
+  width: 100%;
+}
+</style>

src/components/Sing/ScoreSequencer.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="score-sequencer">
+    <div class="score-sequencer-keys" />
+    シーケンサ
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  name: "SingScoreSequencer",
+
+  setup() {
+    return null;
+  },
+});
+</script>
+
+<style scoped lang="scss">
+@use '@/styles/variables' as vars;
+@use '@/styles/colors' as colors;
+</style>