Refactor: SequencerGridをPresentation/Containerに分離 (#2311)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Hiroshiba <[email protected]>

src/components/Sing/ScoreSequencer.vue

@@ -203,7 +203,7 @@ import {
   getButton,
   PreviewMode,
 } from "@/sing/viewHelper";
-import SequencerGrid from "@/components/Sing/SequencerGrid.vue";
+import SequencerGrid from "@/components/Sing/SequencerGrid/Container.vue";
 import SequencerRuler from "@/components/Sing/SequencerRuler.vue";
 import SequencerKeys from "@/components/Sing/SequencerKeys.vue";
 import SequencerNote from "@/components/Sing/SequencerNote.vue";

src/components/Sing/SequencerGrid/Container.vue

@@ -0,0 +1,29 @@
+<template>
+  <Presentation
+    :tpqn
+    :timeSignatures
+    :sequencerZoomX
+    :sequencerZoomY
+    :sequencerSnapType
+    :numMeasures
+  />
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import Presentation from "./Presentation.vue";
+import { useStore } from "@/store";
+
+defineOptions({
+  name: "SequencerGrid",
+});
+
+const store = useStore();
+
+const tpqn = computed(() => store.state.tpqn);
+const timeSignatures = computed(() => store.state.timeSignatures);
+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);
+</script>

src/components/Sing/SequencerGrid.vue → src/components/Sing/SequencerGrid/Presentation.vue

@@ -88,40 +88,44 @@
 
 <script setup lang="ts">
 import { computed } from "vue";
-import { useStore } from "@/store";
 import { keyInfos, getKeyBaseHeight, tickToBaseX } from "@/sing/viewHelper";
 import { getMeasureDuration, getNoteDuration } from "@/sing/domain";
+import { TimeSignature } from "@/store/type";
+
+const props = defineProps<{
+  tpqn: number;
+  timeSignatures: TimeSignature[];
+  sequencerZoomX: number;
+  sequencerZoomY: number;
+  sequencerSnapType: number;
+  numMeasures: number;
+}>();
 
-const store = useStore();
-const tpqn = computed(() => store.state.tpqn);
-const timeSignatures = computed(() => store.state.timeSignatures);
-const zoomX = computed(() => store.state.sequencerZoomX);
-const zoomY = computed(() => store.state.sequencerZoomY);
 const gridCellTicks = computed(() => {
-  return getNoteDuration(store.state.sequencerSnapType, tpqn.value);
+  return getNoteDuration(props.sequencerSnapType, props.tpqn);
 });
 const gridCellWidth = computed(() => {
-  return tickToBaseX(gridCellTicks.value, tpqn.value) * zoomX.value;
+  return tickToBaseX(gridCellTicks.value, props.tpqn) * props.sequencerZoomX;
 });
 const gridCellBaseHeight = getKeyBaseHeight();
 const gridCellHeight = computed(() => {
-  return gridCellBaseHeight * zoomY.value;
+  return gridCellBaseHeight * props.sequencerZoomY;
 });
 const beatsPerMeasure = computed(() => {
-  return timeSignatures.value[0].beats;
+  return props.timeSignatures[0].beats;
 });
 const beatWidth = computed(() => {
-  const beatType = timeSignatures.value[0].beatType;
-  const wholeNoteDuration = tpqn.value * 4;
+  const beatType = props.timeSignatures[0].beatType;
+  const wholeNoteDuration = props.tpqn * 4;
   const beatTicks = wholeNoteDuration / beatType;
-  return tickToBaseX(beatTicks, tpqn.value) * zoomX.value;
+  return tickToBaseX(beatTicks, props.tpqn) * props.sequencerZoomX;
 });
 const gridWidth = computed(() => {
   // TODO: 複数拍子に対応する
-  const beats = timeSignatures.value[0].beats;
-  const beatType = timeSignatures.value[0].beatType;
-  const measureDuration = getMeasureDuration(beats, beatType, tpqn.value);
-  const numMeasures = store.getters.SEQUENCER_NUM_MEASURES;
+  const beats = props.timeSignatures[0].beats;
+  const beatType = props.timeSignatures[0].beatType;
+  const measureDuration = getMeasureDuration(beats, beatType, props.tpqn);
+  const numMeasures = props.numMeasures;
   const numOfGridColumns =
     Math.round(measureDuration / gridCellTicks.value) * numMeasures;
   return gridCellWidth.value * numOfGridColumns;
@@ -157,7 +161,7 @@ const beatLineIndices = computed(() =>
 const snapLinePositions = computed(() => {
   const snapTicks = gridCellTicks.value;
   const measureTicks =
-    (tpqn.value * 4 * beatsPerMeasure.value) / timeSignatures.value[0].beatType;
+    (props.tpqn * 4 * beatsPerMeasure.value) / props.timeSignatures[0].beatType;
   const snapCount = Math.floor(measureTicks / snapTicks);
 
   return Array.from({ length: snapCount }, (_, index) => {

src/components/Sing/SequencerGrid/index.stories.ts

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+
+import Presentation from "./Presentation.vue";
+
+const meta: Meta<typeof Presentation> = {
+  component: Presentation,
+  args: {
+    timeSignatures: [
+      {
+        beats: 4,
+        beatType: 4,
+        measureNumber: 1,
+      },
+    ],
+    sequencerZoomX: 0.25,
+    sequencerZoomY: 0.75,
+    tpqn: 480,
+    sequencerSnapType: 16,
+    numMeasures: 32,
+  },
+
+  render: (args) => ({
+    components: { Presentation },
+    setup() {
+      return { args };
+    },
+    template: `<div style="width: 100vw; height: 400px; overflow: hidden;"><Presentation v-bind="args" /></div>`,
+  }),
+};
+
+export default meta;
+type Story = StoryObj<typeof Presentation>;
+
+export const Default: Story = {};