Add: シーケンサにおいてツール選択可能にする (#2367)

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

src/components/Sing/SequencerNote.vue

@@ -185,6 +185,7 @@ const classes = computed(() => {
       props.isPreview && props.previewMode === "RESIZE_NOTE_RIGHT", // 右リサイズ中
     "resizing-left":
       props.isPreview && props.previewMode === "RESIZE_NOTE_LEFT", // 左リサイズ中
+    idle: props.previewMode === "IDLE", // プレビュー中でない
   };
 });
 
@@ -518,15 +519,26 @@ const onLeftEdgeMouseDown = (event: MouseEvent) => {
 // カーソルの状態
 .note {
   &.cursor-default,
+  &.cursor-draw,
   &.cursor-ew-resize,
   &.cursor-crosshair,
   &.cursor-move,
-  &.cursor-draw,
   &.cursor-erase {
     .note-bar,
     .note-edge {
       cursor: inherit;
     }
   }
+
+  // ノートの編集の場合でプレビュー中ではない場合はノートバーをドラッグできる
+  &.idle.edit-note {
+    .note-bar {
+      cursor: move;
+    }
+
+    .note-edge {
+      cursor: ew-resize;
+    }
+  }
 }
 </style>

src/components/Sing/SequencerToolPalette.vue

@@ -0,0 +1,128 @@
+<template>
+  <div v-if="editTarget === 'NOTE'" class="tool-palette">
+    <QBtn
+      flat
+      round
+      :color="sequencerNoteTool === 'SELECT_FIRST' ? 'primary' : ''"
+      @click="$emit('update:sequencerNoteTool', 'SELECT_FIRST')"
+    >
+      <i class="material-symbols-outlined">arrow_selector_tool</i>
+      <QTooltip
+        anchor="center right"
+        self="center left"
+        :offset="[8, 0]"
+        :delay="500"
+        transitionShow=""
+        transitionHide=""
+      >
+        選択優先
+      </QTooltip>
+    </QBtn>
+    <QBtn
+      flat
+      round
+      :color="sequencerNoteTool === 'EDIT_FIRST' ? 'primary' : ''"
+      @click="$emit('update:sequencerNoteTool', 'EDIT_FIRST')"
+    >
+      <i class="material-symbols-outlined">stylus</i>
+      <QTooltip
+        anchor="center right"
+        self="center left"
+        :offset="[8, 0]"
+        :delay="500"
+        transitionShow=""
+        transitionHide=""
+      >
+        編集優先
+      </QTooltip>
+    </QBtn>
+  </div>
+  <div v-else-if="editTarget === 'PITCH'" class="tool-palette">
+    <QBtn
+      flat
+      round
+      :color="sequencerPitchTool === 'DRAW' ? 'primary' : ''"
+      @click="$emit('update:sequencerPitchTool', 'DRAW')"
+    >
+      <i class="material-symbols-outlined">stylus</i>
+      <QTooltip
+        anchor="center right"
+        self="center left"
+        :offset="[8, 0]"
+        :delay="500"
+        transitionShow=""
+        transitionHide=""
+      >
+        ピッチ編集
+      </QTooltip>
+    </QBtn>
+    <QBtn
+      flat
+      round
+      :color="sequencerPitchTool === 'ERASE' ? 'primary' : ''"
+      @click="$emit('update:sequencerPitchTool', 'ERASE')"
+    >
+      <i class="material-symbols-outlined">ink_eraser</i>
+      <QTooltip
+        anchor="center right"
+        self="center left"
+        :offset="[8, 0]"
+        :delay="500"
+        transitionShow=""
+        transitionHide=""
+      >
+        ピッチ削除
+      </QTooltip>
+    </QBtn>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { SequencerEditTarget, NoteEditTool, PitchEditTool } from "@/store/type";
+
+defineProps<{
+  editTarget: SequencerEditTarget;
+  sequencerNoteTool: NoteEditTool;
+  sequencerPitchTool: PitchEditTool;
+}>();
+defineEmits<{
+  (event: "update:sequencerNoteTool", value: NoteEditTool): void;
+  (event: "update:sequencerPitchTool", value: PitchEditTool): void;
+}>();
+</script>
+
+<style scoped lang="scss">
+.tool-palette {
+  display: flex;
+  flex-direction: column;
+  background: var(--scheme-color-surface);
+  outline: 1px solid var(--scheme-color-outline-variant);
+  position: fixed;
+  top: 144px;
+  left: 72px;
+  z-index: 10;
+  padding: 2px;
+  border-radius: 24px;
+  gap: 0;
+  box-shadow:
+    0px 8px 16px -4px rgba(0, 0, 0, 0.1),
+    0px 4px 8px -4px rgba(0, 0, 0, 0.06);
+
+  .material-symbols-outlined {
+    font-size: 20px;
+  }
+
+  .q-btn {
+    min-height: 40px;
+    min-width: 40px;
+    padding: 8px;
+
+    &.text-primary {
+      background-color: var(--scheme-color-secondary-container);
+      .material-symbols-outlined {
+        color: var(--scheme-color-on-primary-container);
+      }
+    }
+  }
+}
+</style>

src/components/Sing/ToolBar/EditTargetSwicher.vue

@@ -32,7 +32,7 @@
         :delay="500"
         anchor="bottom middle"
         transitionShow=""
-        transitionSide=""
+        transitionHide=""
       >
         ピッチ編集<br />{{ !isMac ? "Ctrl" : "Cmd" }}+クリックで消去
       </QTooltip>

src/sing/viewHelper.ts

@@ -144,6 +144,23 @@ export type PreviewMode =
   | "DRAW_PITCH"
   | "ERASE_PITCH";
 
+// マウスダウン時の振る舞い
+export const mouseDownBehaviorSchema = z.enum([
+  "IGNORE",
+  "DESELECT_ALL",
+  "ADD_NOTE",
+  "START_RECT_SELECT",
+  "DRAW_PITCH",
+  "ERASE_PITCH",
+]);
+export type MouseDownBehavior = z.infer<typeof mouseDownBehaviorSchema>;
+
+// ダブルクリック時の振る舞い
+export const mouseDoubleClickBehaviorSchema = z.enum(["IGNORE", "ADD_NOTE"]);
+export type MouseDoubleClickBehavior = z.infer<
+  typeof mouseDoubleClickBehaviorSchema
+>;
+
 export function getButton(event: MouseEvent): MouseButton {
   // macOSの場合、Ctrl+クリックは右クリック
   if (isMac && event.button === 0 && event.ctrlKey) {
@@ -157,3 +174,14 @@ export function getButton(event: MouseEvent): MouseButton {
     return "OTHER_BUTTON";
   }
 }
+
+// カーソルの状態
+export const cursorStateSchema = z.enum([
+  "UNSET",
+  "DRAW",
+  "MOVE",
+  "EW_RESIZE",
+  "CROSSHAIR",
+  "ERASE",
+]);
+export type CursorState = z.infer<typeof cursorStateSchema>;

src/store/singing.ts

@@ -777,6 +777,8 @@ export const singingStoreState: SingingStoreState = {
   sequencerZoomY: 0.75,
   sequencerSnapType: 16,
   sequencerEditTarget: "NOTE",
+  sequencerNoteTool: "EDIT_FIRST",
+  sequencerPitchTool: "DRAW",
   _selectedNoteIds: new Set(),
   nowPlaying: false,
   volume: 0,
@@ -1135,6 +1137,17 @@ export const singingStore = createPartialStore<SingingStoreTypes>({
     },
   },
 
+  DESELECT_NOTES: {
+    mutation(state, { noteIds }: { noteIds: NoteId[] }) {
+      for (const noteId of noteIds) {
+        state._selectedNoteIds.delete(noteId);
+      }
+    },
+    async action({ mutations }, { noteIds }: { noteIds: NoteId[] }) {
+      mutations.DESELECT_NOTES({ noteIds });
+    },
+  },
+
   DESELECT_ALL_NOTES: {
     mutation(state) {
       state.editingLyricNoteId = undefined;
@@ -1439,6 +1452,24 @@ export const singingStore = createPartialStore<SingingStoreTypes>({
     },
   },
 
+  SET_SEQUENCER_NOTE_TOOL: {
+    mutation(state, { sequencerNoteTool }) {
+      state.sequencerNoteTool = sequencerNoteTool;
+    },
+    async action({ mutations }, { sequencerNoteTool }) {
+      mutations.SET_SEQUENCER_NOTE_TOOL({ sequencerNoteTool });
+    },
+  },
+
+  SET_SEQUENCER_PITCH_TOOL: {
+    mutation(state, { sequencerPitchTool }) {
+      state.sequencerPitchTool = sequencerPitchTool;
+    },
+    async action({ mutations }, { sequencerPitchTool }) {
+      mutations.SET_SEQUENCER_PITCH_TOOL({ sequencerPitchTool });
+    },
+  },
+
   TICK_TO_SECOND: {
     getter: (state) => (position) => {
       return tickToSecond(position, state.tempos, state.tpqn);

src/store/type.ts

@@ -838,8 +838,15 @@ const phraseKeySchema = z.string().brand<"PhraseKey">();
 export type PhraseKey = z.infer<typeof phraseKeySchema>;
 export const PhraseKey = (id: string): PhraseKey => phraseKeySchema.parse(id);
 
+// 編集対象 ノート or ピッチ
+// ボリュームを足すのであれば"VOLUME"を追加する
 export type SequencerEditTarget = "NOTE" | "PITCH";
 
+// ノート編集ツール
+export type NoteEditTool = "SELECT_FIRST" | "EDIT_FIRST";
+// ピッチ編集ツール
+export type PitchEditTool = "DRAW" | "ERASE";
+
 export type TrackParameters = {
   gain: boolean;
   pan: boolean;
@@ -869,6 +876,8 @@ export type SingingStoreState = {
   sequencerZoomY: number;
   sequencerSnapType: number;
   sequencerEditTarget: SequencerEditTarget;
+  sequencerNoteTool: NoteEditTool;
+  sequencerPitchTool: PitchEditTool;
   _selectedNoteIds: Set<NoteId>;
   editingLyricNoteId?: NoteId;
   nowPlaying: boolean;
@@ -978,6 +987,11 @@ export type SingingStoreTypes = {
     action({ trackId }: { trackId: TrackId }): void;
   };
 
+  DESELECT_NOTES: {
+    mutation: { noteIds: NoteId[] };
+    action(payload: { noteIds: NoteId[] }): void;
+  };
+
   DESELECT_ALL_NOTES: {
     mutation: undefined;
     action(): void;
@@ -1113,6 +1127,16 @@ export type SingingStoreTypes = {
     action(payload: { editTarget: SequencerEditTarget }): void;
   };
 
+  SET_SEQUENCER_NOTE_TOOL: {
+    mutation: { sequencerNoteTool: NoteEditTool };
+    action(payload: { sequencerNoteTool: NoteEditTool }): void;
+  };
+
+  SET_SEQUENCER_PITCH_TOOL: {
+    mutation: { sequencerPitchTool: PitchEditTool };
+    action(payload: { sequencerPitchTool: PitchEditTool }): void;
+  };
+
   SET_IS_DRAG: {
     mutation: { isDrag: boolean };
     action(payload: { isDrag: boolean }): void;

src/styles/_index.scss

@@ -273,3 +273,17 @@ img {
   width: 700px;
   max-width: 80vw;
 }
+
+.material-symbols-outlined {
+  font-family: "Material Symbols Outlined";
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;  /* Preferred icon size */
+  display: inline-block;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+}

src/styles/fonts.scss

@@ -11,3 +11,11 @@
 
   font-weight: bold;
 }
+
+@font-face {
+  font-display: swap;
+  font-family: "Material Symbols Outlined";
+  font-style: normal;
+  font-weight: 400;
+  src: url('../fonts/material-symbols-outlined-regular.woff2') format('woff2');
+}