Refactor: useSequencerGridに切り出し

sevenc-nanashi · Nov 21, 2024 · 6441c05 · 6441c05
1 parent c62e263
commit 6441c05
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 74 deletions.
diff --git a/src/components/Sing/SequencerGrid/Presentation.vue b/src/components/Sing/SequencerGrid/Presentation.vue
@@ -38,8 +38,8 @@
         :id="`sequencer-grid-pattern-${patternIndex}`"
         :key="`pattern-${patternIndex}`"
         patternUnits="userSpaceOnUse"
-        :x="gridPatterns[patternIndex].x"
-        :width="gridPatterns[patternIndex].patternWidth"
+        :x="pattern.x"
+        :width="pattern.patternWidth"
         :height="gridCellHeight * 12"
       >
         <!-- E/Fの中間線 -->
@@ -54,7 +54,7 @@
         />
         <!-- 拍線 -->
         <line
-          v-for="n in pattern.beatLineIndices"
+          v-for="n in pattern.timeSignature.beats"
           :key="`beatline-${n}`"
           :x1="pattern.beatWidth * n"
           :x2="pattern.beatWidth * n"
@@ -106,10 +106,11 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed, toRef } from "vue";
 import { keyInfos, getKeyBaseHeight, tickToBaseX } from "@/sing/viewHelper";
 import { getMeasureDuration, getNoteDuration } from "@/sing/domain";
 import { TimeSignature } from "@/store/type";
+import { useSequencerGrid } from "@/composables/useSequencerGridPattern";
 
 const props = defineProps<{
   tpqn: number;
@@ -156,37 +157,11 @@ const gridHeight = computed(() => {
   return gridCellHeight.value * keyInfos.length;
 });
 
-const gridPatterns = computed(() => {
-  const gridPatterns: {
-    id: string;
-    x: number;
-    beatWidth: number;
-    beatsPerMeasure: number;
-    beatLineIndices: number[];
-    patternWidth: number;
-    width: number;
-  }[] = [];
-  for (const [i, timeSignature] of props.timeSignatures.entries()) {
-    const nextTimeSignature = props.timeSignatures.at(i + 1);
-    const nextMeasureNumber =
-      nextTimeSignature?.measureNumber ?? props.numMeasures + 1;
-    const patternWidth = measureWidth(timeSignature);
-    gridPatterns.push({
-      id: `sequencer-grid-pattern-${i}`,
-      x:
-        gridPatterns.length === 0
-          ? 0
-          : gridPatterns[gridPatterns.length - 1].x +
-            gridPatterns[gridPatterns.length - 1].width,
-      beatWidth: beatWidth(timeSignature),
-      beatsPerMeasure: timeSignature.beats,
-      beatLineIndices: beatLineIndices(timeSignature),
-      patternWidth,
-      width: patternWidth * (nextMeasureNumber - timeSignature.measureNumber),
-    });
-  }
-
-  return gridPatterns;
+const gridPatterns = useSequencerGrid({
+  timeSignatures: toRef(() => props.timeSignatures),
+  tpqn: toRef(() => props.tpqn),
+  sequencerZoomX: toRef(() => props.sequencerZoomX),
+  numMeasures: toRef(() => props.numMeasures),
 });
 
 // 小節幅
@@ -231,8 +206,6 @@ const measureLines = computed(() => {
 });
 const horizontalLineIndices = computed(() => gridLines.value.horizontalLines);
 const octaveLineIndices = computed(() => gridLines.value.octaveLines);
-const beatLineIndices = (timeSignature: TimeSignature) =>
-  Array.from({ length: timeSignature.beats - 1 }, (_, i) => i + 1);
 </script>
 
 <style scoped lang="scss">

diff --git a/src/components/Sing/SequencerRuler/Presentation.vue b/src/components/Sing/SequencerRuler/Presentation.vue
@@ -184,6 +184,7 @@ import {
   ComponentPublicInstance,
   useTemplateRef,
   Component,
+  toRef,
 } from "vue";
 import { ComponentProps } from "vue-component-type-helpers";
 import { Dialog } from "quasar";
@@ -203,6 +204,7 @@ import TempoChangeDialog from "@/components/Dialog/TempoOrTimeSignatureChangeDia
 import TimeSignatureChangeDialog from "@/components/Dialog/TempoOrTimeSignatureChangeDialog/TimeSignatureChangeDialog.vue";
 import { FontSpecification, predictTextWidth } from "@/helpers/textWidth";
 import { createLogger } from "@/domain/frontend/log";
+import { useSequencerGrid } from "@/composables/useSequencerGridPattern";
 
 const props = defineProps<{
   offset: number;
@@ -237,13 +239,6 @@ defineSlots<{
 const log = createLogger("SequencerRuler");
 
 const height = ref(40);
-const beatsPerMeasure = (timeSignature: TimeSignature) => timeSignature.beats;
-const beatWidth = (timeSignature: TimeSignature) => {
-  const beatType = timeSignature.beatType;
-  const wholeNoteDuration = props.tpqn * 4;
-  const beatTicks = wholeNoteDuration / beatType;
-  return tickToBaseX(beatTicks, props.tpqn) * props.sequencerZoomX;
-};
 const tsPositions = computed(() => {
   return getTimeSignaturePositions(props.timeSignatures, props.tpqn);
 });
@@ -259,36 +254,11 @@ const endTicks = computed(() => {
 const width = computed(() => {
   return tickToBaseX(endTicks.value, props.tpqn) * props.sequencerZoomX;
 });
-const gridPatterns = computed(() => {
-  const gridPatterns: {
-    id: string;
-    x: number;
-    beatsPerMeasure: number;
-    beatWidth: number;
-    patternWidth: number;
-    width: number;
-  }[] = [];
-  for (const [i, timeSignature] of props.timeSignatures.entries()) {
-    const nextTimeSignature = props.timeSignatures.at(i + 1);
-    const nextMeasureNumber =
-      nextTimeSignature?.measureNumber ?? props.numMeasures + 1;
-    const patternWidth =
-      beatWidth(timeSignature) * beatsPerMeasure(timeSignature);
-    gridPatterns.push({
-      id: `sequencer-grid-pattern-${i}`,
-      x:
-        gridPatterns.length === 0
-          ? 0
-          : gridPatterns[gridPatterns.length - 1].x +
-            gridPatterns[gridPatterns.length - 1].width,
-      beatsPerMeasure: beatsPerMeasure(timeSignature),
-      beatWidth: beatWidth(timeSignature),
-      patternWidth,
-      width: patternWidth * (nextMeasureNumber - timeSignature.measureNumber),
-    });
-  }
-
-  return gridPatterns;
+const gridPatterns = useSequencerGrid({
+  timeSignatures: toRef(() => props.timeSignatures),
+  tpqn: toRef(() => props.tpqn),
+  sequencerZoomX: toRef(() => props.sequencerZoomX),
+  numMeasures: toRef(() => props.numMeasures),
 });
 
 const measureInfos = computed(() => {

diff --git a/src/composables/useSequencerGridPattern.ts b/src/composables/useSequencerGridPattern.ts
@@ -0,0 +1,60 @@
+import { computed, Ref } from "vue";
+import { tickToBaseX } from "@/sing/viewHelper";
+import { TimeSignature } from "@/store/type";
+
+export const beatWidth = (
+  timeSignature: TimeSignature,
+  tpqn: number,
+  sequencerZoomX: number,
+) => {
+  const beatType = timeSignature.beatType;
+  const wholeNoteDuration = tpqn * 4;
+  const beatTicks = wholeNoteDuration / beatType;
+  return tickToBaseX(beatTicks, tpqn) * sequencerZoomX;
+};
+
+export const useSequencerGrid = ({
+  timeSignatures,
+  tpqn,
+  sequencerZoomX,
+  numMeasures,
+}: {
+  timeSignatures: Ref<TimeSignature[]>;
+  tpqn: Ref<number>;
+  sequencerZoomX: Ref<number>;
+  numMeasures: Ref<number>;
+}) =>
+  computed(() => {
+    const gridPatterns: {
+      id: string;
+      x: number;
+      timeSignature: TimeSignature;
+      beatWidth: number;
+      beatsPerMeasure: number;
+      patternWidth: number;
+      width: number;
+    }[] = [];
+    for (const [i, timeSignature] of timeSignatures.value.entries()) {
+      const maybeNextTimeSignature = timeSignatures.value.at(i + 1);
+      const nextMeasureNumber =
+        maybeNextTimeSignature?.measureNumber ?? numMeasures.value + 1;
+      const patternWidth =
+        beatWidth(timeSignature, tpqn.value, sequencerZoomX.value) *
+        timeSignature.beats;
+      gridPatterns.push({
+        id: `sequencer-grid-pattern-${i}`,
+        timeSignature,
+        x:
+          gridPatterns.length === 0
+            ? 0
+            : gridPatterns[gridPatterns.length - 1].x +
+              gridPatterns[gridPatterns.length - 1].width,
+        beatWidth: beatWidth(timeSignature, tpqn.value, sequencerZoomX.value),
+        beatsPerMeasure: timeSignature.beats,
+        patternWidth,
+        width: patternWidth * (nextMeasureNumber - timeSignature.measureNumber),
+      });
+    }
+
+    return gridPatterns;
+  });