gridCellWidthとgridCellHeightの依存関係を削除し、ScoreSequencer.vueでの計算を直接行うように変更

src/components/Sing/ScoreSequencer.vue

@@ -227,8 +227,6 @@ import { ComputedRef } from "vue";
 import type { InjectionKey } from "vue";
 
 export const gridInfoInjectionKey: InjectionKey<{
-  gridCellWidth: ComputedRef<number>;
-  gridCellHeight: ComputedRef<number>;
   gridWidth: ComputedRef<number>;
   gridHeight: ComputedRef<number>;
 }> = Symbol();
@@ -403,14 +401,9 @@ const numMeasures = computed(() => {
 });
 
 // グリッド関係の値
-const gridCellWidth = computed(() => {
-  return tickToBaseX(snapTicks.value, tpqn.value) * zoomX.value;
-});
-const gridCellHeight = computed(() => {
-  return getKeyBaseHeight() * zoomY.value;
-});
 const gridWidth = computed(() => {
   const timeSignatures = store.state.timeSignatures;
+  const gridCellWidth = tickToBaseX(snapTicks.value, tpqn.value) * zoomX.value;
 
   let numOfGridColumns = 0;
   for (const [i, timeSignature] of timeSignatures.entries()) {
@@ -424,18 +417,14 @@ const gridWidth = computed(() => {
       Math.round(measureDuration / snapTicks.value) *
       (nextMeasureNumber - timeSignature.measureNumber);
   }
-  return gridCellWidth.value * numOfGridColumns;
+  return gridCellWidth * numOfGridColumns;
 });
 const gridHeight = computed(() => {
-  return gridCellHeight.value * keyInfos.length;
+  const gridCellHeight = getKeyBaseHeight() * zoomY.value;
+  return gridCellHeight * keyInfos.length;
 });
 
-provide(gridInfoInjectionKey, {
-  gridCellWidth,
-  gridCellHeight,
-  gridWidth,
-  gridHeight,
-});
+provide(gridInfoInjectionKey, { gridWidth, gridHeight });
 
 // スクロール位置
 const scrollX = ref(0);

src/components/Sing/SequencerGrid/Container.vue

@@ -6,8 +6,6 @@
     :sequencerZoomY
     :sequencerSnapType
     :numMeasures
-    :gridCellWidth
-    :gridCellHeight
     :gridWidth
     :gridHeight
     :offsetX="props.offsetX"
@@ -36,10 +34,7 @@ if (injectedValue == undefined) {
   throw new Error("injectedValue is undefined.");
 }
 
-const gridCellWidth = injectedValue.gridCellWidth;
-const gridCellHeight = injectedValue.gridCellHeight;
-const gridWidth = injectedValue.gridWidth;
-const gridHeight = injectedValue.gridHeight;
+const { gridWidth, gridHeight } = injectedValue;
 
 const store = useStore();
 

src/components/Sing/SequencerGrid/Presentation.vue

@@ -112,9 +112,10 @@
 
 <script setup lang="ts">
 import { computed, toRef } from "vue";
-import { keyInfos, tickToBaseX } from "@/sing/viewHelper";
+import { getKeyBaseHeight, keyInfos, tickToBaseX } from "@/sing/viewHelper";
 import { TimeSignature } from "@/store/type";
 import { useSequencerGrid } from "@/composables/useSequencerGridPattern";
+import { getNoteDuration } from "@/sing/domain";
 
 const props = defineProps<{
   tpqn: number;
@@ -123,14 +124,21 @@ const props = defineProps<{
   sequencerZoomY: number;
   sequencerSnapType: number;
   numMeasures: number;
-  gridCellWidth: number;
-  gridCellHeight: number;
   gridWidth: number;
   gridHeight: number;
   offsetX: number;
   offsetY: number;
 }>();
 
+const gridCellWidth = computed(() => {
+  const snapTicks = getNoteDuration(props.sequencerSnapType, props.tpqn);
+  return tickToBaseX(snapTicks, props.tpqn) * props.sequencerZoomX;
+});
+
+const gridCellHeight = computed(() => {
+  return getKeyBaseHeight() * props.sequencerZoomY;
+});
+
 const beatWidth = (timeSignature: TimeSignature) => {
   const beatType = timeSignature.beatType;
   const wholeNoteDuration = props.tpqn * 4;

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

@@ -25,8 +25,6 @@ const meta: Meta<typeof Presentation> = {
     tpqn: 480,
     sequencerSnapType: 16,
     numMeasures: 32,
-    gridCellWidth: 7.5,
-    gridCellHeight: 22.5,
     gridWidth: 3840,
     gridHeight: 2880,
     offsetX: 0,