ソング：矩形選択を追加

src/components/Sing/ScoreSequencer.vue

@@ -149,14 +149,14 @@
       }"
     >
       <div
-        ref="quadSelectHitbox"
-        class="quad-select-preview"
+        ref="rectSelectHitbox"
+        class="rect-select-preview"
         :style="{
-          display: isQuadSelecting ? 'block' : 'none',
-          left: `${Math.min(quadSelectStartX, cursorX)}px`,
-          top: `${Math.min(quadSelectStartY, cursorY)}px`,
-          width: `${Math.abs(cursorX - quadSelectStartX)}px`,
-          height: `${Math.abs(cursorY - quadSelectStartY)}px`,
+          display: isRectSelecting ? 'block' : 'none',
+          left: `${Math.min(rectSelectStartX, cursorX)}px`,
+          top: `${Math.min(rectSelectStartY, cursorY)}px`,
+          width: `${Math.abs(cursorX - rectSelectStartX)}px`,
+          height: `${Math.abs(cursorY - rectSelectStartY)}px`,
         }"
       />
       <SequencerPhraseIndicator
@@ -287,10 +287,10 @@ const selectedNotes = computed(() => {
 
 // 矩形選択
 const shiftKey = useShiftKey();
-const isQuadSelecting = ref(false);
-const quadSelectStartX = ref(0);
-const quadSelectStartY = ref(0);
-const quadSelectHitbox = ref<HTMLElement | undefined>(undefined);
+const isRectSelecting = ref(false);
+const rectSelectStartX = ref(0);
+const rectSelectStartY = ref(0);
+const rectSelectHitbox = ref<HTMLElement | undefined>(undefined);
 
 // ズーム状態
 const zoomX = computed(() => state.sequencerZoomX);
@@ -744,13 +744,13 @@ const onMouseDown = (event: MouseEvent) => {
   if (!isSelfEventTarget(event)) {
     return;
   }
-  if (event.shiftKey) {
-    isQuadSelecting.value = true;
-    quadSelectStartX.value = cursorX;
-    quadSelectStartY.value = cursorY;
-    return;
-  }
   if (event.button === 0) {
+    if (event.shiftKey) {
+      isRectSelecting.value = true;
+      rectSelectStartX.value = cursorX;
+      rectSelectStartY.value = cursorY;
+      return;
+    }
     startPreview(event, "ADD");
     mouseDownNoteId = undefined;
   } else {
@@ -784,10 +784,6 @@ const onMouseUp = (event: MouseEvent) => {
   if (event.button !== 0) {
     return;
   }
-  if (isQuadSelecting.value) {
-    quadSelect();
-    return;
-  }
   clickedNoteIds[0] = clickedNoteIds[1];
   clickedNoteIds[1] = mouseDownNoteId;
   if (event.detail === 1) {
@@ -797,6 +793,11 @@ const onMouseUp = (event: MouseEvent) => {
     ignoreDoubleClick = true;
   }
 
+  if (isRectSelecting.value) {
+    rectSelect();
+    return;
+  }
+
   if (!nowPreviewing.value) {
     return;
   }
@@ -820,16 +821,16 @@ const onMouseUp = (event: MouseEvent) => {
   nowPreviewing.value = false;
 };
 
-const quadSelect = async () => {
-  const quadSelectHitboxElement = quadSelectHitbox.value;
-  if (!quadSelectHitboxElement) {
-    throw new Error("quadSelectHitboxElement is null.");
+const rectSelect = async () => {
+  const rectSelectHitboxElement = rectSelectHitbox.value;
+  if (!rectSelectHitboxElement) {
+    throw new Error("rectSelectHitboxElement is null.");
   }
-  isQuadSelecting.value = false;
-  const left = Math.min(quadSelectStartX.value, cursorX);
-  const top = Math.min(quadSelectStartY.value, cursorY);
-  const width = Math.abs(cursorX - quadSelectStartX.value);
-  const height = Math.abs(cursorY - quadSelectStartY.value);
+  isRectSelecting.value = false;
+  const left = Math.min(rectSelectStartX.value, cursorX);
+  const top = Math.min(rectSelectStartY.value, cursorY);
+  const width = Math.abs(cursorX - rectSelectStartX.value);
+  const height = Math.abs(cursorY - rectSelectStartY.value);
   const startTicks = baseXToTick(
     (scrollX.value + left) / zoomX.value,
     tpqn.value
@@ -838,10 +839,8 @@ const quadSelect = async () => {
     (scrollX.value + left + width) / zoomX.value,
     tpqn.value
   );
+  const endNoteNumber = baseYToNoteNumber((scrollY.value + top) / zoomY.value);
   const startNoteNumber = baseYToNoteNumber(
-    (scrollY.value + top) / zoomY.value
-  );
-  const endNoteNumber = baseYToNoteNumber(
     (scrollY.value + top + height) / zoomY.value
   );
 
@@ -850,14 +849,14 @@ const quadSelect = async () => {
     if (
       note.position + note.duration >= startTicks &&
       note.position <= endTicks &&
-      endNoteNumber <= note.noteNumber &&
-      note.noteNumber <= startNoteNumber
+      startNoteNumber <= note.noteNumber &&
+      note.noteNumber <= endNoteNumber
     ) {
       noteIdsToSelect.push(note.id);
     }
   }
-  await store.dispatch("DESELECT_ALL_NOTES");
-  await store.dispatch("SELECT_NOTES", { noteIds: noteIdsToSelect });
+  store.dispatch("DESELECT_ALL_NOTES");
+  store.dispatch("SELECT_NOTES", { noteIds: noteIdsToSelect });
 };
 
 const onDoubleClick = () => {
@@ -1269,7 +1268,7 @@ onDeactivated(() => {
   border-right: 1px solid rgba(colors.$background-rgb, 0.83);
 }
 
-.quad-select-preview {
+.rect-select-preview {
   pointer-events: none;
   position: absolute;
   border: 2px solid rgba(colors.$primary-rgb, 0.5);