Automatically infer good lattice configuration

src/components/GridLattice.vue

@@ -92,7 +92,18 @@ watch(svgElement, (element) => {
   observer.observe(element)
 })
 
-watch(() => store.modulus, computeExtent)
+watch(
+  () => [
+    store.viewScale,
+    store.minX,
+    store.maxX,
+    store.minY,
+    store.maxY,
+    store.viewCenterX,
+    store.viewCenterY
+  ],
+  computeExtent
+)
 </script>
 
 <template>

src/stores/grid.ts

@@ -4,6 +4,7 @@ import { shortestEdge, type GridOptions } from 'ji-lattice'
 import { LOG_PRIMES, mmod } from 'xen-dev-utils'
 import { Val, evaluateExpression, parseChord } from 'sonic-weave'
 import { computedAndError } from '@/utils'
+import { FIFTH, THIRD } from '@/constants'
 
 const TWELVE = evaluateExpression('12@', false) as Val
 
@@ -142,6 +143,33 @@ export const useGridStore = defineStore('grid', () => {
     edgesString.value = '3/2 5/4'
   }
 
+  /**
+   * Create a square lattice configuration based on the val and edges.
+   */
+  function autoSquare() {
+    resetBounds()
+
+    size.value = 0.15
+    viewScale.value = 3.1
+    viewCenterX.value = 0
+    viewCenterY.value = -0.1
+
+    const edge1 = edges.value[0] ?? FIFTH
+    delta1.value = val.value.dot(edge1).valueOf()
+    delta1X.value = 1
+    delta1Y.value = 0
+
+    const edge2 = edges.value[1] ?? THIRD
+    delta2.value = val.value.dot(edge2).valueOf()
+    delta2X.value = 0
+    delta2Y.value = -1
+
+    gridlines1.value = true
+    gridlines2.value = true
+    diagonals1.value = false
+    diagonals2.value = false
+  }
+
   function squareBP(divisions: number) {
     resetBounds()
 
@@ -186,6 +214,33 @@ export const useGridStore = defineStore('grid', () => {
     edgesString.value = '3/2 5/4 6/5'
   }
 
+  /**
+   * Create a triangular lattice configuration based on the val and edges.
+   */
+  function autoTonnetz() {
+    resetBounds()
+
+    size.value = 1
+    viewScale.value = 30.1
+    viewCenterX.value = 0
+    viewCenterY.value = 0
+
+    const edge1 = edges.value[0] ?? FIFTH
+    delta1.value = val.value.dot(edge1).valueOf()
+    delta1X.value = 6
+    delta1Y.value = 0
+
+    const edge2 = edges.value[1] ?? THIRD
+    delta2.value = val.value.dot(edge2).valueOf()
+    delta2X.value = 3
+    delta2Y.value = -5
+
+    gridlines1.value = true
+    gridlines2.value = true
+    diagonals1.value = true
+    diagonals2.value = false
+  }
+
   function preset311() {
     resetBounds()
 
@@ -239,10 +294,13 @@ export const useGridStore = defineStore('grid', () => {
     val,
     modulus,
     gridOptions,
-    // Methods
+    // Methods (presets)
     square,
     squareBP,
     tonnetz,
-    preset311
+    preset311,
+    // Methods (auto-params)
+    autoSquare,
+    autoTonnetz
   }
 })

src/stores/state.ts

@@ -8,7 +8,7 @@ export const useStateStore = defineStore('state', () => {
   const heldNotes = reactive(new Map<number, number>())
   const typingActive = ref(true)
 
-  const latticeType = ref<'ji' | 'et'>('et')
+  const latticeType = ref<'ji' | 'et' | 'auto'>('auto')
 
   // These user preferences are fetched from local storage.
   const storage = window.localStorage

src/views/LatticeView.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue'
-import { mmod } from 'xen-dev-utils'
-// import ScaleLattice from '@/components/ScaleLattice.vue'
+import { computed, onMounted, ref, watch } from 'vue'
+import { Fraction, isPrime, mmod, nthPrime, primeLimit } from 'xen-dev-utils'
 import GridLattice from '@/components/GridLattice.vue'
 import JustIntonationLattice from '@/components/JustIntonationLattice.vue'
 import Modal from '@/components/ModalDialog.vue'
@@ -17,8 +16,8 @@ const jiLattice = useJiLatticeStore()
 const grid = useGridStore()
 
 const showConfig = ref(false)
-const jiPreset = ref<'nothing' | 'grady' | 'grady3' | 'dakota' | 'pr72' | 'pe72'>('grady')
-const etPreset = ref<'nothing' | '12' | '53' | '311' | 'b13'>('12')
+const jiPreset = ref<'nothing' | 'grady' | 'grady3' | 'dakota' | 'pr72' | 'pe72'>('nothing')
+const etPreset = ref<'nothing' | '12' | '53' | '311' | 'b13'>('nothing')
 
 const extraEdgesElement = ref<HTMLInputElement | null>(null)
 watch(extraEdgesElement, (newElement) => setAndReportValidity(newElement, jiLattice.edgesError), {
@@ -88,6 +87,107 @@ watch(etPreset, (newValue) => {
       return
   }
 })
+
+function inferConfig() {
+  // Default to 12-TET even if it looks bad
+  state.latticeType = 'et'
+
+  // Infer initial configuration
+  const monzos = scale.latticeIntervals.map((i) => i.value)
+  if (!monzos.length) {
+    return
+  }
+
+  let isFractional = true
+  let isEqualTemperament = true
+  for (const monzo of monzos) {
+    if (!monzo.isFractional()) {
+      isFractional = false
+    }
+    if (!monzo.isEqualTemperament()) {
+      isEqualTemperament = false
+    }
+  }
+
+  if (isFractional) {
+    let limit = 0
+    for (const monzo of monzos) {
+      try {
+        const { n, d } = monzo.toFraction()
+        limit = Math.max(primeLimit(n, true), primeLimit(d, true), limit)
+      } catch {
+        return
+      }
+    }
+
+    let equaveIndex = 0
+    const equave = monzos.pop()!
+    const { n, d } = equave.toFraction()
+    if (d === 1 && isPrime(n)) {
+      equaveIndex = primeLimit(n, true) - 1
+    }
+    if (limit <= 9) {
+      jiLattice.kraigGrady(equaveIndex)
+    } else if (limit <= 24) {
+      jiLattice.scott24(equaveIndex)
+    } else if (equaveIndex < 72) {
+      jiLattice.pe72(equaveIndex)
+    } else {
+      return
+    }
+    state.latticeType = 'ji'
+    return
+  }
+
+  if (isEqualTemperament) {
+    const equave = monzos.pop()!
+    if (!equave.isFractional()) {
+      return
+    }
+    try {
+      const { n, d } = equave.toFraction()
+      let wartPrefix = ''
+      let edges = '3/2 5/4'
+      if (d === 1 && isPrime(n)) {
+        const index = primeLimit(n, true) - 1
+        if (index > 14) {
+          return
+        }
+        if (index) {
+          wartPrefix = String.fromCharCode(97 + index)
+          const e1 = new Fraction(nthPrime(index + 1)).geoMod(n)
+          const e2 = new Fraction(nthPrime(index + 2)).geoMod(n)
+          edges = `${e1.toFraction()} ${e2.toFraction()}`
+        }
+      } else {
+        return
+      }
+
+      let divisions = 1
+      for (const monzo of monzos) {
+        const log = monzo.log(equave)
+        if (typeof log === 'number') {
+          return
+        }
+        divisions = Math.max(log.d, divisions)
+      }
+      grid.valString = `${wartPrefix}${divisions}p`
+      grid.edgesString = edges
+      grid.autoSquare()
+      state.latticeType = 'et'
+    } catch {
+      return
+    }
+  }
+}
+
+onMounted(() => {
+  // Non-auto lattice presumably pre-loaded from the database
+  if (state.latticeType !== 'auto') {
+    return
+  }
+  inferConfig()
+})
 </script>
 
 <template>
@@ -101,12 +201,15 @@ watch(etPreset, (newValue) => {
       :heldNotes="heldNotes"
     />
     <GridLattice
-      v-else
+      v-else-if="state.latticeType === 'et'"
       :labels="scale.latticeLabels"
       :colors="scale.latticeColors"
       :relativeIntervals="scale.latticeIntervals"
       :heldNotes="heldNotes"
     />
+    <template v-else>
+      <h1>Selecting lattice...</h1>
+    </template>
     <button @click="showConfig = true">Configure</button>
     <Modal
       :show="showConfig"
@@ -196,7 +299,7 @@ watch(etPreset, (newValue) => {
               <input id="verticals" type="text" v-model="jiLattice.verticals" />
             </div>
           </template>
-          <template v-else>
+          <template v-else-if="state.latticeType === 'et'">
             <div class="control">
               <label for="Preset">Preset</label>
               <select v-model="etPreset">
@@ -207,6 +310,10 @@ watch(etPreset, (newValue) => {
                 <option value="b13">Square-b13p</option>
               </select>
             </div>
+            <div class="btn-group">
+              <button @click="grid.autoSquare">Auto-square</button>
+              <button @click="grid.autoTonnetz">Auto-tonnetz</button>
+            </div>
             <div class="control">
               <label for="val">Val</label>
               <input type="text" id="val" placeholder="17[^5]" v-model="grid.valString" />
@@ -290,11 +397,15 @@ watch(etPreset, (newValue) => {
               <input id="view-y" type="number" step="0.1" v-model="grid.viewCenterY" />
             </div>
           </template>
+          <template v-else>
+            <h2>Selecting lattice...</h2>
+          </template>
         </div>
       </template>
       <template #footer>
         <div class="btn-group">
           <button @click="showConfig = false">Done</button>
+          <button @click="inferConfig">Auto-config</button>
         </div>
       </template>
     </Modal>