From c0b9e63dbdbee84ffa007fd860b62c5a3e52ae12 Mon Sep 17 00:00:00 2001
From: Romot <mail@romot.co>
Date: Fri, 25 Oct 2024 22:47:11 +0900
Subject: [PATCH] =?UTF-8?q?=E3=82=B5=E3=82=A4=E3=82=BA=E8=AA=BF=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Sing/ScoreSequencer.vue        |   2 +-
 src/components/Sing/SequencerLoopControl.vue  | 108 ++++++++++++------
 .../Sing/SequencerRuler/Presentation.vue      |  10 +-
 3 files changed, 81 insertions(+), 39 deletions(-)

diff --git a/src/components/Sing/ScoreSequencer.vue b/src/components/Sing/ScoreSequencer.vue
index 13e7bdb82d..ff8c6cbbbc 100644
--- a/src/components/Sing/ScoreSequencer.vue
+++ b/src/components/Sing/ScoreSequencer.vue
@@ -1554,7 +1554,7 @@ const contextMenuData = computed<ContextMenuItemData[]>(() => {
 .score-sequencer {
   backface-visibility: hidden;
   display: grid;
-  grid-template-rows: 40px 1fr;
+  grid-template-rows: 48px 1fr;
   grid-template-columns: 48px 1fr;
 }
 
diff --git a/src/components/Sing/SequencerLoopControl.vue b/src/components/Sing/SequencerLoopControl.vue
index 48b7c1659a..e342c2601d 100644
--- a/src/components/Sing/SequencerLoopControl.vue
+++ b/src/components/Sing/SequencerLoopControl.vue
@@ -31,35 +31,58 @@
       />
       <!-- ループ範囲 -->
       <rect
-        :x="loopStartX - offset + 8"
+        :x="loopStartX - offset + 4"
         y="4"
-        :width="Math.max(loopEndX - loopStartX - 16, 0)"
+        :width="Math.max(loopEndX - loopStartX - 8, 0)"
         height="8"
-        rx="1"
-        ry="1"
+        rx="2"
+        ry="2"
         class="loop-range"
         @click.stop="onLoopRangeClick"
       />
       <!-- ループ開始ハンドル -->
-      <rect
-        :x="loopStartX - offset"
-        y="0"
-        width="6"
-        height="16"
-        class="loop-handle loop-handle-start"
-        :class="{ 'is-empty': isEmpty }"
-        @mousedown.stop="onStartHandleMouseDown"
-      />
+      <g class="loop-handle-group">
+        <rect
+          :x="loopStartX - offset"
+          y="0"
+          width="2"
+          height="16"
+          rx="1"
+          ry="1"
+          class="loop-handle loop-handle-start"
+          :class="{ 'is-empty': isEmpty }"
+          @mousedown.stop="onStartHandleMouseDown"
+        />
+        <rect
+          :x="loopStartX - offset - 2"
+          y="0"
+          width="8"
+          height="16"
+          class="loop-handle-drag-area"
+          @mousedown.stop="onStartHandleMouseDown"
+        />
+      </g>
       <!-- ループ終了ハンドル -->
-      <rect
-        :x="loopEndX - offset - 6"
-        y="0"
-        width="6"
-        height="16"
-        class="loop-handle loop-handle-end"
-        :class="{ 'is-empty': isEmpty }"
-        @mousedown.stop="onEndHandleMouseDown"
-      />
+      <g class="loop-handle-group">
+        <rect
+          :x="loopEndX - offset - 2"
+          y="0"
+          width="2"
+          height="16"
+          rx="1"
+          ry="1"
+          class="loop-handle loop-handle-end"
+          :class="{ 'is-empty': isEmpty }"
+        />
+        <rect
+          :x="loopEndX - offset - 6"
+          y="0"
+          width="8"
+          height="16"
+          class="loop-handle-drag-area"
+          @mousedown.stop="onEndHandleMouseDown"
+        />
+      </g>
     </svg>
     <ContextMenu :menudata="contextMenuData" />
   </div>
@@ -285,7 +308,7 @@ const preview = () => {
 };
 
 // ドラッグ終了処理
-const stopDragging = async () => {
+const stopDragging = () => {
   if (!isDragging.value) return;
   isDragging.value = false;
   dragTarget.value = null;
@@ -301,14 +324,14 @@ const stopDragging = async () => {
 
   try {
     // ループ範囲を設定
-    await setLoopRange(previewLoopStartTick.value, previewLoopEndTick.value);
+    void setLoopRange(previewLoopStartTick.value, previewLoopEndTick.value);
     // 再生ヘッドがループ開始位置にあるか
     // FIXME: usePlayheadPosition実装が完了したら移動
     const isPlayheadToLoopStart =
       previewLoopStartTick.value !== previewLoopEndTick.value;
     if (isPlayheadToLoopStart) {
       try {
-        await store.dispatch("SET_PLAYHEAD_POSITION", {
+        void store.dispatch("SET_PLAYHEAD_POSITION", {
           position: previewLoopStartTick.value,
         });
       } catch (error) {
@@ -387,7 +410,7 @@ onUnmounted(() => {
   width: 100%;
   pointer-events: auto;
   cursor: pointer;
-  z-index: 1;
+  z-index: 100;
 
   &.cursor-ew-resize {
     cursor: ew-resize;
@@ -400,7 +423,11 @@ onUnmounted(() => {
 
   &.is-enabled {
     .loop-range {
-      fill: var(--scheme-color-primary-fixed-dim);
+      fill: color-mix(
+        in oklch,
+        var(--scheme-color-primary-fixed-dim) 40%,
+        var(--scheme-color-sing-loop-area)
+      );
     }
 
     .loop-handle {
@@ -409,20 +436,29 @@ onUnmounted(() => {
     }
   }
 
+  &:not(.is-enabled):not(.is-dragging) {
+    .loop-range {
+      opacity: 0.6;
+    }
+
+    .loop-handle {
+      opacity: 0.6;
+    }
+  }
+
   &.is-dragging {
     .loop-background {
       background: var(--scheme-color-secondary-container);
-      opacity: 0.6;
+      opacity: 0.4;
     }
 
     .loop-range {
-      fill: var(--scheme-color-outline);
-      opacity: 0.38;
+      opacity: 0.6;
     }
 
     .loop-handle {
-      fill: var(--scheme-color-tertiary-fixed);
-      stroke: var(--scheme-color-tertiary-fixed);
+      fill: var(--scheme-color-primary-fixed);
+      stroke: var(--scheme-color-primary-fixed);
     }
   }
 
@@ -481,7 +517,13 @@ onUnmounted(() => {
   }
 }
 
-.loop-drag-area {
+.loop-handle-group:hover {
+  .loop-handle {
+    fill: var(--scheme-color-primary-fixed);
+  }
+}
+
+.loop-handle-drag-area {
   fill: transparent;
   cursor: ew-resize;
 }
diff --git a/src/components/Sing/SequencerRuler/Presentation.vue b/src/components/Sing/SequencerRuler/Presentation.vue
index ddc58a9a32..d3d1b7a683 100644
--- a/src/components/Sing/SequencerRuler/Presentation.vue
+++ b/src/components/Sing/SequencerRuler/Presentation.vue
@@ -25,7 +25,7 @@
             :key="n"
             :x1="beatWidth * n"
             :x2="beatWidth * n"
-            y1="28"
+            y1="36"
             :y2="height"
             class="sequencer-ruler-beat-line"
           />
@@ -38,7 +38,7 @@
         :key="measureInfo.number"
         :x1="measureInfo.x - offset"
         :x2="measureInfo.x - offset"
-        y1="20"
+        y1="28"
         :y2="height"
         class="sequencer-ruler-measure-line"
         :class="{ 'first-measure-line': measureInfo.number === 1 }"
@@ -49,7 +49,7 @@
         :key="measureInfo.number"
         font-size="12"
         :x="measureInfo.x - offset + 4"
-        y="34"
+        y="44"
         class="sequencer-ruler-measure-number"
       >
         {{ measureInfo.number }}
@@ -120,7 +120,7 @@ const emit = defineEmits<{
   deselectAllNotes: [];
 }>();
 
-const height = ref(40);
+const height = ref(56);
 const beatsPerMeasure = computed(() => {
   return props.timeSignatures[0].beats;
 });
@@ -232,7 +232,7 @@ onUnmounted(() => {
 
 .sequencer-ruler {
   background: var(--scheme-color-sing-ruler-surface);
-  height: 40px;
+  height: 56px;
   position: relative;
   overflow: hidden;
 }