feat: ボリューム編集の編集UI側の実装

src/components/Menu/ContextMenu/Container.vue

@@ -22,6 +22,9 @@ defineProps<{
   menudata: ContextMenuItemData[];
 }>();
 defineExpose({
+  show: (event?: MouseEvent) => {
+    contextMenu.value?.show(event);
+  },
   hide: () => {
     contextMenu.value?.hide();
   },

src/components/Sing/ScoreSequencer.vue

@@ -216,18 +216,20 @@
       </div>
     </template>
     <template #after>
-      <SequencerParameterPanel v-if="isParameterPanelOpen" />
+      <SequencerParameterPanel v-if="isParameterPanelOpen" :offsetX="scrollX" />
     </template>
   </QSplitter>
 </template>
 
 <script lang="ts">
-import { ComputedRef } from "vue";
+import { ComputedRef, Ref } from "vue";
 import type { InjectionKey } from "vue";
 
 export const numMeasuresInjectionKey: InjectionKey<{
   numMeasures: ComputedRef<number>;
 }> = Symbol("sequencerNumMeasures");
+export const sequencerBodyInjectionKey: InjectionKey<Ref<HTMLElement | null>> =
+  Symbol("sequencerBody");
 </script>
 
 <script setup lang="ts">
@@ -271,7 +273,7 @@ import {
   PREVIEW_SOUND_DURATION,
   SEQUENCER_MIN_NUM_MEASURES,
 } from "@/sing/viewHelper";
-import { getLast } from "@/sing/utility";
+import { clamp, getLast } from "@/sing/utility";
 import SequencerGrid from "@/components/Sing/SequencerGrid/Container.vue";
 import SequencerRuler from "@/components/Sing/SequencerRuler/Container.vue";
 import SequencerKeys from "@/components/Sing/SequencerKeys.vue";
@@ -443,19 +445,46 @@ const phraseInfosInOtherTracks = computed(() => {
   );
 });
 
-const parameterPanelHeight = ref(300);
+const DEFAULT_PARAMETER_PANEL_HEIGHT = 200;
+const MIN_PARAMETER_PANEL_HEIGHT = 100;
+const MAX_PARAMETER_PANEL_HEIGHT = 500;
+
+const splitterPosition = computed(() => store.state.splitterPosition);
+const parameterPanelHeight = ref(DEFAULT_PARAMETER_PANEL_HEIGHT);
 const isParameterPanelOpen = computed(
   () => store.state.experimentalSetting.showParameterPanel,
 );
 
-const setParameterPanelHeight = (height: number) => {
-  if (isParameterPanelOpen.value) {
-    parameterPanelHeight.value = height;
-  }
+watch(
+  isParameterPanelOpen,
+  (isOpen) => {
+    if (isOpen) {
+      const saved = splitterPosition.value.parameterPanelHeight;
+      parameterPanelHeight.value = clamp(
+        saved ?? DEFAULT_PARAMETER_PANEL_HEIGHT,
+        MIN_PARAMETER_PANEL_HEIGHT,
+        MAX_PARAMETER_PANEL_HEIGHT,
+      );
+    }
+  },
+  { immediate: true },
+);
+
+const setParameterPanelHeight = async (height: number) => {
+  if (!isParameterPanelOpen.value) return;
+  parameterPanelHeight.value = height;
+  await store.actions.SET_ROOT_MISC_SETTING({
+    key: "splitterPosition",
+    value: {
+      ...splitterPosition.value,
+      parameterPanelHeight: height,
+    },
+  });
 };
 
 const scrollBarWidth = ref(12);
 const sequencerBody = ref<HTMLElement | null>(null);
+provide(sequencerBodyInjectionKey, sequencerBody);
 
 // ステートマシン
 const {

src/components/Sing/SequencerParameterPanel.vue

@@ -1,21 +1,15 @@
 <template>
   <div class="sequencer-parameter-panel">
-    <SequencerVolumeEditor :playheadTicks :tempos :tpqn :zoomX :zoomY />
+    <SequencerVolumeEditor :offsetX="props.offsetX" />
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue";
 import SequencerVolumeEditor from "@/components/Sing/SequencerVolumeEditor.vue";
-import { useStore } from "@/store";
 
-const store = useStore();
-
-const playheadTicks = computed(() => store.getters.PLAYHEAD_POSITION);
-const tempos = computed(() => store.state.tempos);
-const tpqn = computed(() => store.state.tpqn);
-const zoomX = computed(() => store.state.sequencerZoomX);
-const zoomY = computed(() => store.state.sequencerZoomY);
+const props = defineProps<{
+  offsetX: number;
+}>();
 </script>
 
 <style scoped lang="scss">