Persist Reaper export modal state

xenharmonic-devs · Jul 19, 2024 · a83469f · a83469f
1 parent e535ea9
commit a83469f
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 22 deletions.
diff --git a/src/components/modals/export/ReaperExport.vue b/src/components/modals/export/ReaperExport.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import ReaperExporter from '@/exporters/reaper'
 import { sanitizeFilename } from '@/utils'
-import { ref } from 'vue'
 import Modal from '@/components/ModalDialog.vue'
 import type { ExporterParams, LineFormat } from '@/exporters/base'
 import type { Scale } from '@/scale'
 import type { Interval } from 'sonic-weave'
+import { useExportStore } from '@/stores/export'
 
 const props = defineProps<{
   show: boolean
@@ -16,6 +16,8 @@ const props = defineProps<{
   labels: string[]
 }>()
 
+const store = useExportStore()
+
 const emit = defineEmits(['confirm', 'cancel'])
 
 const formats: [LineFormat, string][] = [
@@ -25,12 +27,6 @@ const formats: [LineFormat, string][] = [
   ['decimal', 'Decimal ratios'],
   ['degree', 'Scale degrees']
 ]
-const format = ref<LineFormat>('label')
-const basePeriod = ref(0)
-const baseDegree = ref(0)
-const centsRoot = ref(0)
-const integratePeriod = ref(false)
-const displayPeriod = ref(true)
 
 function doExport() {
   const params: ExporterParams = {
@@ -40,12 +36,12 @@ function doExport() {
     midiOctaveOffset: props.midiOctaveOffset,
     relativeIntervals: props.relativeIntervals,
     labels: props.labels,
-    format: format.value,
-    basePeriod: basePeriod.value,
-    baseDegree: baseDegree.value,
-    centsRoot: centsRoot.value,
-    integratePeriod: integratePeriod.value,
-    displayPeriod: displayPeriod.value
+    format: store.format,
+    basePeriod: store.basePeriod,
+    baseDegree: store.baseDegree,
+    centsRoot: store.centsRoot,
+    integratePeriod: store.integratePeriod,
+    displayPeriod: store.displayPeriod
   }
 
   const exporter = new ReaperExporter(params)
@@ -64,32 +60,32 @@ function doExport() {
       <div class="control-group">
         <div class="control">
           <label for="pitch-format">Pitch format</label>
-          <select id="pitch-format" v-model="format">
+          <select id="pitch-format" v-model="store.format">
             <option v-for="[value, name] of formats" :key="value" :value="value">
               {{ name }}
             </option>
           </select>
         </div>
         <label>Period options</label>
         <div class="control checkbox-container">
-          <input type="checkbox" id="display-period" v-model="displayPeriod" />
+          <input type="checkbox" id="display-period" v-model="store.displayPeriod" />
           <label for="display-period">Show period number</label>
         </div>
         <div class="control checkbox-container">
-          <input type="checkbox" id="integrate-period" v-model="integratePeriod" />
+          <input type="checkbox" id="integrate-period" v-model="store.integratePeriod" />
           <label for="integrate-period">Accumulate period in pitch</label>
         </div>
         <div class="control">
           <label for="base-period">Base period number</label>
-          <input type="number" id="base-period" v-model="basePeriod" />
+          <input type="number" id="base-period" v-model="store.basePeriod" />
         </div>
-        <div class="control" v-show="format === 'cents'">
+        <div class="control" v-show="store.format === 'cents'">
           <label for="cents-root">Base cents value</label>
-          <input type="number" id="cents-root" v-model="centsRoot" />
+          <input type="number" id="cents-root" v-model="store.centsRoot" />
         </div>
-        <div class="control" v-show="format === 'degree'">
+        <div class="control" v-show="store.format === 'degree'">
           <label for="base-degree">Base degree</label>
-          <input type="number" id="base-degree" v-model="baseDegree" />
+          <input type="number" id="base-degree" v-model="store.baseDegree" />
         </div>
       </div>
     </template>

diff --git a/src/stores/export.ts b/src/stores/export.ts
@@ -1,6 +1,7 @@
 import { ref, watch } from 'vue'
 import { defineStore } from 'pinia'
 import { KorgModels } from '@/exporters/korg'
+import type { LineFormat } from '@/exporters/base'
 
 export const useExportStore = defineStore('export', () => {
   // Korg
@@ -23,9 +24,23 @@ export const useExportStore = defineStore('export', () => {
     }
   })
 
+  // Reaper
+  const format = ref<LineFormat>('label')
+  const basePeriod = ref(0)
+  const baseDegree = ref(0)
+  const centsRoot = ref(0)
+  const integratePeriod = ref(false)
+  const displayPeriod = ref(true)
+
   return {
     korgModel,
     useOctaveFormat,
-    presetIndex
+    presetIndex,
+    format,
+    basePeriod,
+    baseDegree,
+    centsRoot,
+    integratePeriod,
+    displayPeriod
   }
 })