Use precision preferences in the tuning table

Move precision preferences under stores/scale.

ref #593

src/components/modals/generation/EqualTemperament.vue

@@ -5,15 +5,15 @@ import Modal from '@/components/ModalDialog.vue'
 import ScaleLineInput from '@/components/ScaleLineInput.vue'
 import { useModalStore } from '@/stores/modal'
 import { setAndReportValidity } from '@/utils'
-import { useStateStore } from '@/stores/state'
+import { useScaleStore } from '@/stores/scale'
 
 defineProps<{
   show: boolean
 }>()
 
 const emit = defineEmits(['update:source', 'update:scaleName', 'cancel'])
 
-const state = useStateStore()
+const scale = useScaleStore()
 const modal = useModalStore()
 
 const divisionsElement = ref<HTMLInputElement | null>(null)
@@ -32,7 +32,7 @@ watch(
 function generate(expand = true) {
   if (modal.singleStepOnly) {
     const stepCents = modal.equave.value.totalCents() / modal.divisions
-    const line = stepCents.toFixed(state.centsFractionDigits)
+    const line = stepCents.toFixed(scale.centsFractionDigits)
     emit('update:scaleName', `${line} cET`)
     emit('update:source', line)
   } else {

src/components/modals/generation/HistoricalScale.vue

@@ -7,7 +7,6 @@ import { circleDifference, mmod } from 'xen-dev-utils'
 import { mosSizes } from 'moment-of-symmetry'
 import { spineLabel as spineLabel_, parseInterval, expandCode } from '@/utils'
 import { useHistoricalStore } from '@/stores/historical'
-import { useStateStore } from '@/stores/state'
 import { Interval, TimeMonzo } from 'sonic-weave'
 import { useScaleStore } from '@/stores/scale'
 
@@ -23,7 +22,6 @@ const emit = defineEmits([
   'cancel'
 ])
 
-const state = useStateStore()
 const scale = useScaleStore()
 const historical = useHistoricalStore()
 
@@ -98,13 +96,13 @@ const temperedGenerator = computed(() => {
   }
   const cents =
     historical.pureGenerator.totalCents() + historical.tempering * historical.temperingStrength
-  return parseInterval(cents.toFixed(state.centsFractionDigits))
+  return parseInterval(cents.toFixed(scale.centsFractionDigits))
 })
 
 const enharmonicCents = computed(() => {
   const ws = historical.wellIntervals
   return circleDifference(ws[ws.length - 1].totalCents(), ws[0].totalCents()).toFixed(
-    state.centsFractionDigits
+    scale.centsFractionDigits
   )
 })
 
@@ -131,7 +129,7 @@ function generate(expand = true) {
 
     let genString = temperedGenerator.value.toString()
     if (historical.format === 'cents') {
-      genString = temperedGenerator.value.totalCents().toFixed(state.centsFractionDigits)
+      genString = temperedGenerator.value.totalCents().toFixed(scale.centsFractionDigits)
     }
     emit('update:scaleName', `Rank 2 temperament (${genString}, ${historical.periodString})`)
   } else {
@@ -147,7 +145,7 @@ function generate(expand = true) {
     }
   }
   if (historical.format === 'cents') {
-    source += `\ni => cents(i, ${state.centsFractionDigits})`
+    source += `\ni => cents(i, ${scale.centsFractionDigits})`
   }
   // Check if the scale can be centered around C
   if (
@@ -308,7 +306,7 @@ function generate(expand = true) {
                 :value="candidate.exponent"
               >
                 {{ candidate.exponent }} /
-                {{ candidate.tempering.toFixed(state.centsFractionDigits) }} ¢
+                {{ candidate.tempering.toFixed(scale.centsFractionDigits) }} ¢
               </option>
             </select>
           </div>

src/components/modals/generation/RankTwo.vue

@@ -6,12 +6,10 @@ import PeriodCircle from '@/components/PeriodCircle.vue'
 import { expandCode, gapKeyColors, parseCents } from '@/utils'
 import ScaleLineInput from '@/components/ScaleLineInput.vue'
 import { useRank2Store } from '@/stores/tempering'
-import { useStateStore } from '@/stores/state'
 import { Interval, intervalValueAs } from 'sonic-weave'
 import { useScaleStore } from '@/stores/scale'
 import { mmod } from 'xen-dev-utils'
 
-const state = useStateStore()
 const scale = useScaleStore()
 const rank2 = useRank2Store()
 
@@ -29,10 +27,10 @@ const subgroupInput = ref<HTMLInputElement | null>(null)
 
 // Consolidate circle method's fine tuning to hard values when changing "tabs"
 function consolidateCircle() {
-  rank2.period = parseCents(rank2.circlePeriodCents, state.centsFractionDigits)
+  rank2.period = parseCents(rank2.circlePeriodCents, scale.centsFractionDigits)
   rank2.periodString = rank2.period.toString()
 
-  rank2.generator = parseCents(rank2.circleGeneratorCents, state.centsFractionDigits)
+  rank2.generator = parseCents(rank2.circleGeneratorCents, scale.centsFractionDigits)
   rank2.generatorString = rank2.generator.toString()
 
   rank2.periodStretch = '0'
@@ -66,16 +64,16 @@ function selectMosSize(mosSize: number) {
     rank2.numPeriods = rank2.temperament.numberOfPeriods
     rank2.method = 'generator'
 
-    rank2.period = parseCents(period, state.centsFractionDigits)
+    rank2.period = parseCents(period, scale.centsFractionDigits)
     rank2.periodString = rank2.period.toString()
 
-    rank2.generator = parseCents(generator, state.centsFractionDigits)
+    rank2.generator = parseCents(generator, scale.centsFractionDigits)
     rank2.generatorString = rank2.generator.toString()
   }
 }
 
 function updateCircleGenerator(value: number) {
-  rank2.generator = parseCents(value, state.centsFractionDigits)
+  rank2.generator = parseCents(value, scale.centsFractionDigits)
   rank2.generatorString = rank2.generator.toString()
   rank2.generatorFineCents = '0'
 }

src/components/modals/generation/SpanLattice.vue

@@ -5,10 +5,10 @@ import ScaleLineInput from '@/components/ScaleLineInput.vue'
 import { OCTAVE } from '@/constants'
 import { useLatticeStore } from '@/stores/tempering'
 import { centString, setAndReportValidity } from '@/utils'
-import { useStateStore } from '@/stores/state'
 import { arrayToString, expandCode, parseInterval } from '@/utils'
 import { Interval, intervalValueAs } from 'sonic-weave'
 import { mmod } from 'xen-dev-utils'
+import { useScaleStore } from '@/stores/scale'
 
 defineProps<{
   show: boolean
@@ -17,7 +17,7 @@ defineProps<{
 const emit = defineEmits(['update:source', 'update:scaleName', 'cancel'])
 
 const lattice = useLatticeStore()
-const state = useStateStore()
+const scale = useScaleStore()
 
 const basisElement = ref<HTMLInputElement | null>(null)
 const valsInput = ref<HTMLInputElement | null>(null)
@@ -46,10 +46,10 @@ function calculateGenerators() {
     generators[i] = mmod(generators[i], period)
   }
 
-  lattice.equaveString = centString(period, state.centsFractionDigits)
+  lattice.equaveString = centString(period, scale.centsFractionDigits)
   lattice.equave = parseInterval(lattice.equaveString)
 
-  lattice.basisString = generators.map((g) => centString(g, state.centsFractionDigits)).join(' ')
+  lattice.basisString = generators.map((g) => centString(g, scale.centsFractionDigits)).join(' ')
   lattice.method = 'generators'
 }
 

src/components/modals/modification/ConvertType.vue

@@ -2,7 +2,6 @@
 import { onMounted, ref } from 'vue'
 import Modal from '@/components/ModalDialog.vue'
 import { useModalStore } from '@/stores/modal'
-import { useStateStore } from '@/stores/state'
 import { useScaleStore } from '@/stores/scale'
 import { centString } from '@/utils'
 
@@ -14,14 +13,13 @@ const emit = defineEmits(['done', 'cancel'])
 
 const modal = useModalStore()
 const scale = useScaleStore()
-const state = useStateStore()
 
 const myCentsFractionDigits = ref(3)
 const myDecimalFractionDigits = ref(5)
 
 onMounted(() => {
-  myCentsFractionDigits.value = state.centsFractionDigits
-  myDecimalFractionDigits.value = state.decimalFractionDigits
+  myCentsFractionDigits.value = scale.centsFractionDigits
+  myDecimalFractionDigits.value = scale.decimalFractionDigits
 })
 
 function modify(expand = false) {

src/components/modals/modification/RandomVariance.vue

@@ -4,7 +4,6 @@ import Modal from '@/components/ModalDialog.vue'
 import { useModalStore } from '@/stores/modal'
 import { useScaleStore } from '@/stores/scale'
 import { centString } from '@/utils'
-import { useStateStore } from '@/stores/state'
 
 defineProps<{
   show: boolean
@@ -16,7 +15,6 @@ const emit = defineEmits(['done', 'cancel'])
 
 const modal = useModalStore()
 const scale = useScaleStore()
-const state = useStateStore()
 
 const equave = computed(() => {
   // Biased compared to cents, but who cares.
@@ -27,7 +25,7 @@ const equave = computed(() => {
 })
 
 function modify(expand = true) {
-  scale.sourceText += `\nrandomVariance(${centString(modal.varianceAmount)}, ${modal.varyEquave})\ninterval => cents(interval, ${state.centsFractionDigits})`
+  scale.sourceText += `\nrandomVariance(${centString(modal.varianceAmount)}, ${modal.varyEquave})\ninterval => cents(interval, ${scale.centsFractionDigits})`
   if (expand) {
     const { visitor, defaults } = scale.getUserScopeVisitor()
     scale.sourceText = visitor.expand(defaults)

src/components/modals/modification/StretchScale.vue

@@ -4,7 +4,6 @@ import ScaleLineInput from '@/components/ScaleLineInput.vue'
 import { FIFTH, FIFTH_12TET } from '@/constants'
 import { useModalStore } from '@/stores/modal'
 import { useScaleStore } from '@/stores/scale'
-import { useStateStore } from '@/stores/state'
 import { decimalString } from '@/utils'
 
 defineProps<{
@@ -15,10 +14,9 @@ const emit = defineEmits(['done', 'cancel'])
 
 const modal = useModalStore()
 const scale = useScaleStore()
-const state = useStateStore()
 
 function modify(expand = true) {
-  scale.sourceText += `\nstretch(${decimalString(modal.stretchAmount)})\ninterval => cents(interval, ${state.centsFractionDigits})`
+  scale.sourceText += `\nstretch(${decimalString(modal.stretchAmount)})\ninterval => cents(interval, ${scale.centsFractionDigits})`
   if (expand) {
     const { visitor, defaults } = scale.getUserScopeVisitor()
     scale.sourceText = visitor.expand(defaults)

src/components/modals/modification/TemperScale.vue

@@ -3,7 +3,6 @@ import { ref, watch } from 'vue'
 import Modal from '@/components/ModalDialog.vue'
 import { useTemperStore } from '@/stores/tempering'
 import { useScaleStore } from '@/stores/scale'
-import { useStateStore } from '@/stores/state'
 import { setAndReportValidity } from '@/utils'
 
 defineProps<{
@@ -14,7 +13,6 @@ const emit = defineEmits(['done', 'cancel'])
 
 const temper = useTemperStore()
 const scale = useScaleStore()
-const state = useStateStore()
 
 const valsInput = ref<HTMLInputElement | null>(null)
 const commasInput = ref<HTMLInputElement | null>(null)
@@ -52,7 +50,7 @@ function modify(expand = true) {
   if (temper.method === 'mapping') {
     scale.sourceText += `\nPrimeMapping(${temper.mappingString})`
   } else if (!temper.convertToEdoSteps) {
-    scale.sourceText += `\ncents(£, ${state.centsFractionDigits})`
+    scale.sourceText += `\ncents(£, ${scale.centsFractionDigits})`
   }
   if (expand) {
     const { visitor, defaults } = scale.getUserScopeVisitor()

src/stores/scale.ts

@@ -5,7 +5,9 @@ import {
   syncValues,
   isBlackMidiNote,
   midiNoteNumberToName,
-  randomId
+  randomId,
+  centString,
+  decimalString
 } from '@/utils'
 import { defineStore } from 'pinia'
 import { computed, ref, watch } from 'vue'
@@ -23,7 +25,8 @@ import {
   ExpressionVisitor,
   builtinNode,
   repr,
-  getGlobalVisitor
+  getGlobalVisitor,
+  TimeReal
 } from 'sonic-weave'
 import {
   APP_TITLE,
@@ -55,6 +58,11 @@ function defaultLabels(base: number, accidentalStyle: AccidentalStyle) {
 }
 
 export const useScaleStore = defineStore('scale', () => {
+  // The scale store should remain unit-test friendly so this state needs to be here as well
+  const centsFractionDigits = ref(parseInt(localStorage.getItem('centsFractionDigits') ?? '3', 10))
+  const decimalFractionDigits = ref(
+    parseInt(localStorage.getItem('decimalFractionDigits') ?? '5', 10)
+  )
   // Note that most of these values are debounce-computed due to being expensive.
   // The second party is responsible for debouncing `computeScale`.
   const accidentalPreference = ref<AccidentalStyle>(
@@ -292,7 +300,13 @@ export const useScaleStore = defineStore('scale', () => {
   })
 
   // Local storage watchers
-  syncValues({ accidentalPreference, hasLeftOfZ, gas })
+  syncValues({
+    centsFractionDigits,
+    decimalFractionDigits,
+    accidentalPreference,
+    hasLeftOfZ,
+    gas
+  })
 
   // Extra builtins
   function latticeView(this: ExpressionVisitor, equave?: Interval) {
@@ -399,6 +413,47 @@ export const useScaleStore = defineStore('scale', () => {
       }
       if (ratios.length) {
         const evStr = str.bind(ev)
+        // eslint-disable-next-line no-inner-declarations
+        function autoLabel(interval: Interval) {
+          if (interval.label.length) {
+            return interval.label
+          }
+          const node = interval.node
+          if (node) {
+            if (
+              node.type === 'DecimalLiteral' &&
+              node.fractional.length > decimalFractionDigits.value
+            ) {
+              return decimalString(
+                interval.valueOf(),
+                decimalFractionDigits.value,
+                interval.value instanceof TimeReal
+              )
+            } else if (
+              node.type === 'CentsLiteral' &&
+              node.fractional.length > centsFractionDigits.value
+            ) {
+              return centString(
+                interval.totalCents(),
+                centsFractionDigits.value,
+                interval.value instanceof TimeReal
+              )
+            }
+            return evStr(interval)
+          }
+          if (interval.domain === 'linear') {
+            return decimalString(
+              interval.valueOf(),
+              decimalFractionDigits.value,
+              interval.value instanceof TimeReal
+            )
+          }
+          return centString(
+            interval.totalCents(),
+            centsFractionDigits.value,
+            interval.value instanceof TimeReal
+          )
+        }
         scale.value = new Scale(
           ratios,
           visitorBaseFrequency,
@@ -419,7 +474,7 @@ export const useScaleStore = defineStore('scale', () => {
             (interval) => interval.color?.value ?? factorColor.bind(ev)(interval).value
           )
         }
-        labels.value = intervals.map((interval) => interval.label || evStr(interval))
+        labels.value = intervals.map(autoLabel)
       } else {
         relativeIntervals.value = INTERVALS_12TET
         latticeIntervals.value = INTERVALS_12TET
@@ -606,6 +661,8 @@ export const useScaleStore = defineStore('scale', () => {
     id,
     uploadedId,
     // Presistent state
+    centsFractionDigits,
+    decimalFractionDigits,
     accidentalPreference,
     hasLeftOfZ,
     gas,