ソング: ループ範囲を設定できるようにする

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;
 }
 

src/components/Sing/SequencerGrid/Container.vue

@@ -6,13 +6,17 @@
     :sequencerZoomY
     :sequencerSnapType
     :numMeasures
+    :isLoopEnabled
+    :loopStartTick
+    :loopEndTick
   />
 </template>
 
 <script setup lang="ts">
 import { computed } from "vue";
 import Presentation from "./Presentation.vue";
 import { useStore } from "@/store";
+import { useLoopControl } from "@/composables/useLoopControl";
 
 defineOptions({
   name: "SequencerGrid",
@@ -26,4 +30,5 @@ const sequencerZoomX = computed(() => store.state.sequencerZoomX);
 const sequencerZoomY = computed(() => store.state.sequencerZoomY);
 const sequencerSnapType = computed(() => store.state.sequencerSnapType);
 const numMeasures = computed(() => store.getters.SEQUENCER_NUM_MEASURES);
+const { isLoopEnabled, loopStartTick, loopEndTick } = useLoopControl();
 </script>

src/components/Sing/SequencerGrid/Presentation.vue

@@ -83,6 +83,27 @@
       :y2="gridHeight"
       class="sequencer-grid-measure-line"
     />
+    <!-- ループエリア外を暗くする -->
+    <g v-if="isLoopEnabled && loopStartTick !== loopEndTick">
+      <!-- 左側 -->
+      <rect
+        x="0"
+        y="0"
+        :width="loopStartX"
+        :height="gridHeight"
+        class="sequencer-grid-loop-mask"
+        pointer-events="none"
+      />
+      <!-- 右側 -->
+      <rect
+        :x="loopEndX"
+        y="0"
+        :width="gridWidth - loopEndX"
+        :height="gridHeight"
+        class="sequencer-grid-loop-mask"
+        pointer-events="none"
+      />
+    </g>
   </svg>
 </template>
 
@@ -99,6 +120,9 @@ const props = defineProps<{
   sequencerZoomY: number;
   sequencerSnapType: number;
   numMeasures: number;
+  isLoopEnabled: boolean;
+  loopStartTick: number;
+  loopEndTick: number;
 }>();
 
 const gridCellTicks = computed(() => {
@@ -169,6 +193,13 @@ const snapLinePositions = computed(() => {
     return (currentTick / measureTicks) * measureWidth.value;
   });
 });
+// ループのX座標を計算
+const loopStartX = computed(() => {
+  return tickToBaseX(props.loopStartTick, props.tpqn) * props.sequencerZoomX;
+});
+const loopEndX = computed(() => {
+  return tickToBaseX(props.loopEndTick, props.tpqn) * props.sequencerZoomX;
+});
 </script>
 
 <style scoped lang="scss">
@@ -222,6 +253,20 @@ const snapLinePositions = computed(() => {
   stroke-width: 1px;
 }
 
+.sequencer-grid-loop-mask {
+  position: relative;
+  fill: var(--scheme-color-scrim);
+  pointer-events: none;
+}
+
+:root[is-dark-theme="false"] .sequencer-grid-loop-mask {
+  opacity: 0.05;
+}
+
+:root[is-dark-theme="true"] .sequencer-grid-loop-mask {
+  opacity: 0.24;
+}
+
 .edit-pitch {
   .sequencer-grid-vertical-line {
     stroke: transparent;