Store modal state in Pinia

ref #529
xenharmonic-devs · Jan 17, 2024 · f6b6c35 · f6b6c35
1 parent 0dc5acc
commit f6b6c35
Show file tree

Hide file tree

Showing 31 changed files with 2,193 additions and 1,851 deletions.
diff --git a/src/components/ScaleBuilder.vue b/src/components/ScaleBuilder.vue
@@ -12,6 +12,8 @@ import { importFile, type ImporterKey } from '@/importers'
 import { mtof } from 'xen-dev-utils'
 import type { Scale } from 'scale-workshop-core'
 import { useStateStore } from '@/stores/state'
+import { useModalStore } from '@/stores/modal'
+import { useApproximateByRatiosStore } from '@/stores/approximate-by-ratios'
 
 // Export
 const KorgExportModal = defineAsyncComponent(
@@ -95,6 +97,8 @@ const TemperModal = defineAsyncComponent(
 )
 
 const state = useStateStore()
+const modal = useModalStore()
+const approx = useApproximateByRatiosStore()
 
 const joinedLines = computed({
   get() {
@@ -261,11 +265,21 @@ function clickInvert() {
   scaleDataArea.value!.focus()
 }
 
+function clickRotate() {
+  modal.initialize(state.scale.size)
+  showRotateModal.value = true
+}
+
 function clickSubset() {
-  subsetModal.value.initialize()
+  modal.initialize(state.scale.size)
   showSubsetModal.value = true
 }
 
+function clickApproximateByRatios() {
+  approx.initialize()
+  showApproximateByRatiosModal.value = true
+}
+
 function clickShareUrl() {
   showShareUrlModal.value = true
   shareUrlModal.value.initialize()
@@ -345,13 +359,11 @@ function confirmPreset() {
             <a href="#" @click="sortAscending"><li>Sort ascending</li></a>
             <a href="#" @click="clickReduce"><li>Reduce</li></a>
             <a href="#" @click="clickInvert"><li>Invert</li></a>
-            <a href="#" @click="showRotateModal = true"><li>Rotate</li></a>
+            <a href="#" @click="clickRotate"><li>Rotate</li></a>
             <a href="#" @click="clickSubset"><li>Subset</li></a>
             <a href="#" @click="showStretchModal = true"><li>Stretch/compress</li></a>
             <a href="#" @click="showRandomVarianceModal = true"><li>Random variance</li></a>
-            <a href="#" @click="showApproximateByRatiosModal = true"
-              ><li>Approximate by ratios</li></a
-            >
+            <a href="#" @click="clickApproximateByRatios"><li>Approximate by ratios</li></a>
             <a href="#" @click="showApproximateByHarmonicsModal = true"
               ><li>Approximate by harmonics</li></a
             >

diff --git a/src/components/modals/generation/CombinationProductSet.vue b/src/components/modals/generation/CombinationProductSet.vue
@@ -1,46 +1,38 @@
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue'
+import { ref, watch } from 'vue'
 import Modal from '@/components/ModalDialog.vue'
 import ScaleLineInput from '@/components/ScaleLineInput.vue'
 import { OCTAVE } from '@/constants'
-import { computedAndError, parseChordInput } from '@/utils'
 import { Scale } from 'scale-workshop-core'
+import { useModalStore } from '@/stores/modal'
 
 const emit = defineEmits(['update:scale', 'update:scaleName', 'cancel'])
 
-const factorsString = ref('')
-const numElements = ref(2)
-const addUnity = ref(false)
-const equaveString = ref('2/1')
-const equave = ref(OCTAVE)
+const modal = useModalStore()
 
 const factorsElement = ref<HTMLInputElement | null>(null)
-const [factors, factorsError] = computedAndError(() => {
-  return parseChordInput(factorsString.value)
-}, [])
-watch(factorsError, (newError) => factorsElement.value!.setCustomValidity(newError))
-
-const maxElements = computed(() => Math.max(1, factors.value.length))
+watch(
+  () => modal.factorsError,
+  (newError) => factorsElement.value!.setCustomValidity(newError)
+)
 
 // It's not obvious that combination count depends on a parsed text element.
 // I think it's better that the user can try using invalid values and see red.
-// Anyway, here's the enforcing watcher if you need it.
-// watch(maxElements, (newValue) => numElements.value = Math.min(numElements.value, newValue));
 
 function generate() {
   try {
     const scale = Scale.fromCombinations(
-      factors.value,
-      numElements.value,
-      addUnity.value,
-      equave.value
+      modal.factors,
+      modal.numElements,
+      modal.addUnity,
+      modal.equave
     )
-    let name = `CPS (${numElements.value} of ${factorsString.value}`
-    if (addUnity.value) {
+    let name = `CPS (${modal.numElements} of ${modal.factorsString}`
+    if (modal.addUnity) {
       name += ' with 1/1'
     }
-    if (!equave.value.equals(OCTAVE)) {
-      name += ` over ${equave.value.toString()}`
+    if (!modal.equave.equals(OCTAVE)) {
+      name += ` over ${modal.equave.toString()}`
     }
     name += ')'
     emit('update:scaleName', name)
@@ -70,7 +62,7 @@ function generate() {
             type="text"
             class="control"
             placeholder="1 3 5 7"
-            v-model="factorsString"
+            v-model="modal.factorsString"
           />
         </div>
         <div class="control">
@@ -80,20 +72,20 @@ function generate() {
             type="number"
             class="control"
             min="1"
-            :max="maxElements"
-            v-model="numElements"
+            :max="modal.maxElements"
+            v-model="modal.numElements"
           />
         </div>
         <div class="control checkbox-container">
-          <input type="checkbox" id="add-unity" v-model="addUnity" />
+          <input type="checkbox" id="add-unity" v-model="modal.addUnity" />
           <label for="add-unity">Include 1/1 (origin)</label>
         </div>
         <div class="control">
           <label for="equave">Equave</label>
           <ScaleLineInput
             id="equave"
-            @update:value="equave = $event"
-            v-model="equaveString"
+            @update:value="modal.equave = $event"
+            v-model="modal.equaveString"
             :defaultValue="OCTAVE"
           />
         </div>

diff --git a/src/components/modals/generation/CrossPolytope.vue b/src/components/modals/generation/CrossPolytope.vue
@@ -3,30 +3,28 @@ import { ref, watch } from 'vue'
 import Modal from '@/components/ModalDialog.vue'
 import ScaleLineInput from '@/components/ScaleLineInput.vue'
 import { OCTAVE } from '@/constants'
-import { computedAndError, parseChordInput } from '@/utils'
 import { Scale } from 'scale-workshop-core'
+import { useModalStore } from '@/stores/modal'
 
 const emit = defineEmits(['update:scale', 'update:scaleName', 'cancel'])
 
-const basisString = ref('')
-const addUnity = ref(true)
-const equaveString = ref('2/1')
-const equave = ref(OCTAVE)
+const modal = useModalStore()
+
 const basisElement = ref<HTMLInputElement | null>(null)
-const [basis, basisError] = computedAndError(() => {
-  return parseChordInput(basisString.value)
-}, [])
-watch(basisError, (newError) => basisElement.value!.setCustomValidity(newError))
+watch(
+  () => modal.factorsError,
+  (newError) => basisElement.value!.setCustomValidity(newError)
+)
 
 function generate() {
   try {
-    const scale = Scale.fromCrossPolytope(basis.value, addUnity.value, equave.value)
-    let name = `Cross-polytope (${basisString.value}`
-    if (addUnity.value) {
+    const scale = Scale.fromCrossPolytope(modal.factors, modal.addUnity, modal.equave)
+    let name = `Cross-polytope (${modal.factorsString}`
+    if (modal.addUnity) {
       name += ' with 1/1'
     }
-    if (!equave.value.equals(OCTAVE)) {
-      name += ` over ${equave.value.toString()}`
+    if (!modal.equave.equals(OCTAVE)) {
+      name += ` over ${modal.equave.toString()}`
     }
     name += ')'
     emit('update:scaleName', name)
@@ -56,19 +54,19 @@ function generate() {
             type="text"
             class="control"
             placeholder="3 5 7 11"
-            v-model="basisString"
+            v-model="modal.factorsString"
           />
         </div>
         <div class="control checkbox-container">
-          <input type="checkbox" id="add-unity" v-model="addUnity" />
+          <input type="checkbox" id="add-unity" v-model="modal.addUnity" />
           <label for="add-unity">Include 1/1 (origin)</label>
         </div>
         <div class="control">
           <label for="equave">Equave</label>
           <ScaleLineInput
             id="equave"
-            @update:value="equave = $event"
-            v-model="equaveString"
+            @update:value="modal.equave = $event"
+            v-model="modal.equaveString"
             :defaultValue="OCTAVE"
           />
         </div>

diff --git a/src/components/modals/generation/DwarfScale.vue b/src/components/modals/generation/DwarfScale.vue
@@ -1,18 +1,20 @@
 <script setup lang="ts">
 import { DEFAULT_NUMBER_OF_COMPONENTS } from '@/constants'
-import { ref } from 'vue'
 import Modal from '@/components/ModalDialog.vue'
 import { clamp } from 'xen-dev-utils'
 import { Scale } from 'scale-workshop-core'
+import { useModalStore } from '@/stores/modal'
+
 const emit = defineEmits(['update:scale', 'update:scaleName', 'cancel'])
-const val = ref(12)
-const equave = ref(2)
+
+const modal = useModalStore()
+
 function generate() {
-  const clampedVal = clamp(1, 512, val.value)
-  const scale = Scale.fromDwarf(clampedVal, equave.value, DEFAULT_NUMBER_OF_COMPONENTS)
+  const clampedVal = clamp(1, 512, modal.val)
+  const scale = Scale.fromDwarf(clampedVal, modal.integerEquave, DEFAULT_NUMBER_OF_COMPONENTS)
   let name = `Dwarf scale ${clampedVal}`
-  if (equave.value !== 2) {
-    name += `<${equave.value}>`
+  if (modal.integerEquave !== 2) {
+    name += `<${modal.integerEquave}>`
   }
   emit('update:scaleName', name)
   emit('update:scale', scale)
@@ -28,11 +30,11 @@ function generate() {
       <div class="control-group">
         <div class="control">
           <label for="val">Patent val</label>
-          <input id="val" type="number" min="1" max="512" class="control" v-model="val" />
+          <input id="val" type="number" min="1" max="512" class="control" v-model="modal.val" />
         </div>
         <div class="control">
           <label for="equave">Equave</label>
-          <input id="equave" type="number" min="2" class="control" v-model="equave" />
+          <input id="equave" type="number" min="2" class="control" v-model="modal.integerEquave" />
         </div>
       </div>
     </template>

diff --git a/src/components/modals/generation/EnumerateChord.vue b/src/components/modals/generation/EnumerateChord.vue
@@ -1,20 +1,19 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import Modal from '@/components/ModalDialog.vue'
 import { parseChordInput } from '@/utils'
 import { Scale } from 'scale-workshop-core'
+import { useModalStore } from '@/stores/modal'
 
 const emit = defineEmits(['update:scale', 'update:scaleName', 'cancel'])
 
-const chord = ref('')
-const invertChord = ref(false)
+const modal = useModalStore()
 
 function generate() {
   try {
-    const intervals = parseChordInput(chord.value)
+    const intervals = parseChordInput(modal.chord)
     const scale = Scale.fromChord(intervals)
-    emit('update:scaleName', `Chord ${chord.value}`)
-    if (invertChord.value) {
+    emit('update:scaleName', `Chord ${modal.chord}`)
+    if (modal.invertChord) {
       emit('update:scale', scale.invert())
     } else {
       emit('update:scale', scale)
@@ -38,10 +37,16 @@ function generate() {
       <div class="control-group">
         <div class="control">
           <label for="chord">Chord</label>
-          <input id="chord" type="text" class="control" placeholder="4:5:6:8" v-model="chord" />
+          <input
+            id="chord"
+            type="text"
+            class="control"
+            placeholder="4:5:6:8"
+            v-model="modal.chord"
+          />
         </div>
         <div class="control checkbox-container">
-          <input type="checkbox" id="integrate-period" v-model="invertChord" />
+          <input type="checkbox" id="integrate-period" v-model="modal.invertChord" />
           <label for="integrate-period">Invert chord</label>
         </div>
       </div>