From 428413c829d7f32bb491d60595cb2dd7c27d3d6d Mon Sep 17 00:00:00 2001
From: "Nanashi." <sevenc7c@sevenc7c.com>
Date: Wed, 23 Oct 2024 03:29:20 +0900
Subject: [PATCH] =?UTF-8?q?Refactor:=20SequencerGrid=E3=82=92Presentation/?=
 =?UTF-8?q?Container=E3=81=AB=E5=88=86=E9=9B=A2=20(#2311)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Hiroshiba <hihokaruta@gmail.com>
---
 src/components/Sing/ScoreSequencer.vue        |   2 +-
 .../Sing/SequencerGrid/Container.vue          |  29 +++++++++++++
 .../Presentation.vue}                         |  40 ++++++++++--------
 .../Sing/SequencerGrid/index.stories.ts       |  34 +++++++++++++++
 ...equencergrid--default-storybook-win32.png" | Bin 0 -> 5057 bytes
 5 files changed, 86 insertions(+), 19 deletions(-)
 create mode 100644 src/components/Sing/SequencerGrid/Container.vue
 rename src/components/Sing/{SequencerGrid.vue => SequencerGrid/Presentation.vue} (86%)
 create mode 100644 src/components/Sing/SequencerGrid/index.stories.ts
 create mode 100644 "tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-sing-sequencergrid--default-storybook-win32.png"

diff --git a/src/components/Sing/ScoreSequencer.vue b/src/components/Sing/ScoreSequencer.vue
index 46306a9ea3..8b707c23cd 100644
--- a/src/components/Sing/ScoreSequencer.vue
+++ b/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";
diff --git a/src/components/Sing/SequencerGrid/Container.vue b/src/components/Sing/SequencerGrid/Container.vue
new file mode 100644
index 0000000000..0d433420d6
--- /dev/null
+++ b/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>
diff --git a/src/components/Sing/SequencerGrid.vue b/src/components/Sing/SequencerGrid/Presentation.vue
similarity index 86%
rename from src/components/Sing/SequencerGrid.vue
rename to src/components/Sing/SequencerGrid/Presentation.vue
index 41f2e16697..8b6f9fb5c5 100644
--- a/src/components/Sing/SequencerGrid.vue
+++ b/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) => {
diff --git a/src/components/Sing/SequencerGrid/index.stories.ts b/src/components/Sing/SequencerGrid/index.stories.ts
new file mode 100644
index 0000000000..24133c0ab2
--- /dev/null
+++ b/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 = {};
diff --git "a/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-sing-sequencergrid--default-storybook-win32.png" "b/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-sing-sequencergrid--default-storybook-win32.png"
new file mode 100644
index 0000000000000000000000000000000000000000..e6e670421f65a4348493f2e3117b777eb7787345
GIT binary patch
literal 5057
zcmeAS@N?(olHy`uVBq!ia0y~yU=?6sV7kD;1Qbc%c={!fVk{1FcVbv~P6o&kuJ&|s
z45^s&_SV6y=x`B-i@P#XT%4@Fw42o5yJWxO^1_Al7tCCGg2O+@T$bfh$SwYy#{4f&
zwtjd~R3ebRZKA&1Jh^(1(f{5*m;cKOWIPbzOaoFJO_D&eDS?fFp+R8=BLjm12f4zh
z4qtxU{Vy-y{{QEvr|-qv`R(=Ry?^IV?&t0M@7MiLF1ugZH~a3*x#u%CTkrmCnOl}#
zZnymGyEo^aZ~3|Q?oItOKz9hR7z0U`gFHae(SVtO!9jpN!YxMy=ihw$ZvM}V8ygZ2
zxA97w<v<wcOKuF9%f#Gk(su5-Q+;#I_V)hZ_rZtFZs%-1i%is5&Hj6c?tuk~pNEeg
zzWnGazvK6w>ZR*9MXg=8Ze7m5SHCWQJsxkr@7OcTxWjXw@4Gqocuv`K!`XK$&!m;h
zZARig+g|n@80bGgoc_Ic`q`@L9~NKjO!q{s&G~ol&A!hv=DR=7IQz~fZL@X%%{S+g
z&Cs~}w_5+6o&!uJR7}4_XM%2JyUn-n+JC-?npC9cz1$E_Sr#JN2{>{s$Yn8c@Al?g
zyM6fh%I_-^XXkFanTAZ*%{^O}NQKN!j!QRKJTl&W_ph-$B71@J*~6K9zgwwR43X=y
z(@&q?JDs-Iwq{P%d?~b0+jjHW<(qHB$t@YlaT0Q2EY9!Wum9`7*ZK8(Z%uz_UtV7R
z{@&i-7w<p%v-7jWJDWD^{)gw1cOaO1c3Rup*zSAr{@b_D_VN4P{C)cP%I_;5&Yrz*
zR{#6=+wb;i-{(HxadYn7pL5K1Z?>L)Ijy|xdGW0`=ib%$&AxwY?q6@S(P9{0`3&x2
z7*b6}$b6i6_uapl{YX_8C~tl6X&<l(BC+sD`n1!h5v4m?<pty}-#l9HW43k%cY+(O
z_ebk}<jM)$6ghMh*!b`N#|Nx73X1*=RFjmhT?Wj2J5ZgMQJ2uSvp5>wqv1`rk%`g7
fHqeRfAM50fMYB5mZvjWg7#KWV{an^LB{Ts5lmJcU

literal 0
HcmV?d00001