From 0eeda2fb7ca1c9fd26a6e69e189ffbca360ce493 Mon Sep 17 00:00:00 2001
From: Lumi Pakkanen <lumi.pakkanen@gmail.com>
Date: Sat, 18 Nov 2023 11:41:21 +0200
Subject: [PATCH] Make the default value a required prop for ScaleLineInput

ref #480
---
 src/components/ScaleLineInput.vue             | 27 ++++++++++++++-----
 .../generation/CombinationProductSet.vue      | 14 ++++------
 .../modals/generation/CrossPolytope.vue       | 14 +++++-----
 .../modals/generation/EqualTemperament.vue    | 12 +++------
 src/components/modals/generation/MosScale.vue | 16 +++++------
 src/components/modals/generation/RankTwo.vue  | 11 +++++---
 .../modals/generation/SpanLattice.vue         | 12 +++------
 .../modals/generation/SummonOctaplex.vue      | 14 +++++-----
 .../modals/modification/MergeOffset.vue       | 10 +++++--
 src/constants.ts                              | 11 ++++++++
 10 files changed, 77 insertions(+), 64 deletions(-)

diff --git a/src/components/ScaleLineInput.vue b/src/components/ScaleLineInput.vue
index 92b4ee02..ed969c39 100644
--- a/src/components/ScaleLineInput.vue
+++ b/src/components/ScaleLineInput.vue
@@ -6,23 +6,36 @@ import { ref, watch } from "vue";
 
 const props = defineProps<{
   modelValue: string;
+  defaultValue: Interval;
   placeholder?: string;
-  defaultValue?: Interval;
 }>();
 
 const emit = defineEmits(["update:value", "update:modelValue"]);
 
 const element = ref<HTMLInputElement | null>(null);
-const defaultValue =
-  props.defaultValue === undefined
-    ? parseLine(props.modelValue || "1/1", DEFAULT_NUMBER_OF_COMPONENTS)
-    : props.defaultValue;
 const [value, error] = computedAndError(
   () => parseLine(props.modelValue, DEFAULT_NUMBER_OF_COMPONENTS),
-  defaultValue
+  props.defaultValue
 );
 watch(value, (newValue) => emit("update:value", newValue), { immediate: true });
-watch(error, (newError) => element.value!.setCustomValidity(newError));
+watch(
+  element,
+  (newElement) => {
+    if (newElement) {
+      newElement.setCustomValidity(error.value);
+    }
+  },
+  { immediate: true }
+);
+watch(
+  error,
+  (newError) => {
+    if (element.value) {
+      element.value.setCustomValidity(newError);
+    }
+  },
+  { immediate: true }
+);
 </script>
 
 <template>
diff --git a/src/components/modals/generation/CombinationProductSet.vue b/src/components/modals/generation/CombinationProductSet.vue
index a6ff4032..6b589b5f 100644
--- a/src/components/modals/generation/CombinationProductSet.vue
+++ b/src/components/modals/generation/CombinationProductSet.vue
@@ -2,9 +2,9 @@
 import { computed, ref, watch } from "vue";
 import Modal from "@/components/ModalDialog.vue";
 import ScaleLineInput from "@/components/ScaleLineInput.vue";
-import { DEFAULT_NUMBER_OF_COMPONENTS } from "@/constants";
+import { OCTAVE } from "@/constants";
 import { computedAndError, parseChordInput } from "@/utils";
-import { ExtendedMonzo, Interval, Scale } from "scale-workshop-core";
+import { Scale } from "scale-workshop-core";
 
 const props = defineProps<{
   show: boolean;
@@ -12,16 +12,11 @@ const props = defineProps<{
 
 const emit = defineEmits(["update:scale", "update:scaleName", "cancel"]);
 
-const octave = new Interval(
-  ExtendedMonzo.fromFraction(2, DEFAULT_NUMBER_OF_COMPONENTS),
-  "ratio"
-);
-
 const factorsString = ref("");
 const numElements = ref(2);
 const addUnity = ref(false);
 const equaveString = ref("2/1");
-const equave = ref(octave);
+const equave = ref(OCTAVE);
 
 const factorsElement = ref<HTMLInputElement | null>(null);
 const [factors, factorsError] = computedAndError(() => {
@@ -53,7 +48,7 @@ function generate() {
     if (addUnity.value) {
       name += " with 1/1";
     }
-    if (!equave.value.equals(octave)) {
+    if (!equave.value.equals(OCTAVE)) {
       name += ` over ${equave.value.toString()}`;
     }
     name += ")";
@@ -108,6 +103,7 @@ function generate() {
             id="equave"
             @update:value="equave = $event"
             v-model="equaveString"
+            :defaultValue="OCTAVE"
           />
         </div>
       </div>
diff --git a/src/components/modals/generation/CrossPolytope.vue b/src/components/modals/generation/CrossPolytope.vue
index c7555ae7..82e62659 100644
--- a/src/components/modals/generation/CrossPolytope.vue
+++ b/src/components/modals/generation/CrossPolytope.vue
@@ -2,23 +2,20 @@
 import { ref, watch } from "vue";
 import Modal from "@/components/ModalDialog.vue";
 import ScaleLineInput from "@/components/ScaleLineInput.vue";
-import { DEFAULT_NUMBER_OF_COMPONENTS } from "@/constants";
+import { OCTAVE } from "@/constants";
 import { computedAndError, parseChordInput } from "@/utils";
-import { ExtendedMonzo, Interval, Scale } from "scale-workshop-core";
+import { Scale } from "scale-workshop-core";
 
 const props = defineProps<{
   show: boolean;
 }>();
 
 const emit = defineEmits(["update:scale", "update:scaleName", "cancel"]);
-const octave = new Interval(
-  ExtendedMonzo.fromFraction(2, DEFAULT_NUMBER_OF_COMPONENTS),
-  "ratio"
-);
+
 const basisString = ref("");
 const addUnity = ref(true);
 const equaveString = ref("2/1");
-const equave = ref(octave);
+const equave = ref(OCTAVE);
 const basisElement = ref<HTMLInputElement | null>(null);
 const [basis, basisError] = computedAndError(() => {
   if (!props.show) {
@@ -41,7 +38,7 @@ function generate() {
     if (addUnity.value) {
       name += " with 1/1";
     }
-    if (!equave.value.equals(octave)) {
+    if (!equave.value.equals(OCTAVE)) {
       name += ` over ${equave.value.toString()}`;
     }
     name += ")";
@@ -85,6 +82,7 @@ function generate() {
             id="equave"
             @update:value="equave = $event"
             v-model="equaveString"
+            :defaultValue="OCTAVE"
           />
         </div>
       </div>
diff --git a/src/components/modals/generation/EqualTemperament.vue b/src/components/modals/generation/EqualTemperament.vue
index 907dcf77..f699bef8 100644
--- a/src/components/modals/generation/EqualTemperament.vue
+++ b/src/components/modals/generation/EqualTemperament.vue
@@ -1,22 +1,17 @@
 <script setup lang="ts">
-import { DEFAULT_NUMBER_OF_COMPONENTS } from "@/constants";
+import { OCTAVE } from "@/constants";
 import { computed, ref, watch } from "vue";
 import Modal from "@/components/ModalDialog.vue";
 import ScaleLineInput from "@/components/ScaleLineInput.vue";
 import { splitText } from "@/components/modals/tempering-state";
 import { clamp } from "xen-dev-utils";
-import { ExtendedMonzo, Interval, Scale } from "scale-workshop-core";
+import { Scale } from "scale-workshop-core";
 
 const emit = defineEmits(["update:scale", "update:scaleName", "cancel"]);
 
-const octave = new Interval(
-  ExtendedMonzo.fromFraction(2, DEFAULT_NUMBER_OF_COMPONENTS),
-  "ratio"
-);
-
 const divisions = ref(5);
 const equaveString = ref("2/1");
-const equave = ref(octave);
+const equave = ref(OCTAVE);
 
 const jumpsString = ref("1 1 1 1 1");
 const degreesString = ref("1 2 3 4 5");
@@ -141,6 +136,7 @@ function generate() {
             id="equave"
             @update:value="equave = $event"
             v-model="equaveString"
+            :defaultValue="OCTAVE"
           />
         </div>
       </div>
diff --git a/src/components/modals/generation/MosScale.vue b/src/components/modals/generation/MosScale.vue
index 734f2d76..98c8f88b 100644
--- a/src/components/modals/generation/MosScale.vue
+++ b/src/components/modals/generation/MosScale.vue
@@ -1,6 +1,6 @@
 Interval
 <script setup lang="ts">
-import { DEFAULT_NUMBER_OF_COMPONENTS } from "@/constants";
+import { OCTAVE } from "@/constants";
 import {
   allForEdo,
   anyForEdo,
@@ -19,7 +19,7 @@ import { computed, reactive, ref, watch } from "vue";
 import Modal from "@/components/ModalDialog.vue";
 import ScaleLineInput from "@/components/ScaleLineInput.vue";
 import { clamp, gcd } from "xen-dev-utils";
-import { ExtendedMonzo, Interval, Scale } from "scale-workshop-core";
+import { Scale } from "scale-workshop-core";
 
 const emit = defineEmits([
   "update:scale",
@@ -28,18 +28,13 @@ const emit = defineEmits([
   "cancel",
 ]);
 
-const octave = new Interval(
-  ExtendedMonzo.fromFraction(2, DEFAULT_NUMBER_OF_COMPONENTS),
-  "ratio"
-);
-
 // State required to generate MOS
 const numberOfLargeSteps = ref(5);
 const numberOfSmallSteps = ref(2);
 const sizeOfLargeStep = ref(2);
 const sizeOfSmallStep = ref(1);
 const up = ref(5);
-const equave = ref(octave);
+const equave = ref(OCTAVE);
 
 // State for key colors
 const colorMethod = ref<"none" | "parent" | "daughter">("none");
@@ -121,7 +116,7 @@ const hostEd = computed(
     safeNumSmall.value * safeSizeSmall.value
 );
 const ed = computed(() => {
-  if (equave.value.equals(octave)) {
+  if (equave.value.equals(OCTAVE)) {
     return `${hostEd.value}EDO`;
   }
   return `${hostEd.value}ED${equaveString.value}`;
@@ -211,7 +206,7 @@ function generate() {
     if (daughter.hardness === "equalized") {
       const equaveSteps = steps[steps.length - 1];
       name += `${equaveSteps}ED`;
-      if (equave.value.equals(octave)) {
+      if (equave.value.equals(OCTAVE)) {
         name += "O";
       } else {
         name += equave.value.toString();
@@ -323,6 +318,7 @@ function generate() {
             id="equave"
             @update:value="equave = $event"
             v-model="equaveString"
+            :defaultValue="OCTAVE"
           />
         </div>
         <div class="control radio-group">
diff --git a/src/components/modals/generation/RankTwo.vue b/src/components/modals/generation/RankTwo.vue
index a1dd4dba..7dc9ec69 100644
--- a/src/components/modals/generation/RankTwo.vue
+++ b/src/components/modals/generation/RankTwo.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { DEFAULT_NUMBER_OF_COMPONENTS } from "@/constants";
+import { DEFAULT_NUMBER_OF_COMPONENTS, FIFTH, OCTAVE } from "@/constants";
 import {
   makeRank2FromVals,
   makeRank2FromCommas,
@@ -18,7 +18,7 @@ import PeriodCircle from "@/components/PeriodCircle.vue";
 import { makeState } from "@/components/modals/tempering-state";
 import { computedAndError, gapKeyColors } from "@/utils";
 import ScaleLineInput from "@/components/ScaleLineInput.vue";
-import { ExtendedMonzo, Interval, parseLine, Scale } from "scale-workshop-core";
+import { ExtendedMonzo, Interval, Scale } from "scale-workshop-core";
 
 const props = defineProps<{
   centsFractionDigits: number;
@@ -40,9 +40,9 @@ const method = ref<"generator" | "vals" | "commas" | "circle">("generator");
 const error = ref("");
 const state = makeState(method);
 // method: "generator"
-const generator = ref(parseLine("3/2", DEFAULT_NUMBER_OF_COMPONENTS));
+const generator = ref(FIFTH);
 const generatorString = ref("");
-const period = ref(parseLine("2/1", DEFAULT_NUMBER_OF_COMPONENTS));
+const period = ref(OCTAVE);
 const periodString = ref("2/1");
 // method: "vals"
 const valsString = state.valsString;
@@ -454,6 +454,7 @@ function generate() {
               placeholder="3/2"
               v-model="generatorString"
               @update:value="generator = $event"
+              :defaultValue="FIFTH"
             />
             <button @click="flipGenerator">Flip to {{ opposite }}</button>
           </div>
@@ -462,8 +463,10 @@ function generate() {
             <label for="period">Period</label>
             <ScaleLineInput
               id="period"
+              placeholder="2/1"
               v-model="periodString"
               @update:value="period = $event"
+              :defaultValue="OCTAVE"
             />
           </div>
 
diff --git a/src/components/modals/generation/SpanLattice.vue b/src/components/modals/generation/SpanLattice.vue
index cb45e9b0..15e6e6d5 100644
--- a/src/components/modals/generation/SpanLattice.vue
+++ b/src/components/modals/generation/SpanLattice.vue
@@ -2,7 +2,7 @@
 import { reactive, ref, watch } from "vue";
 import Modal from "@/components/ModalDialog.vue";
 import ScaleLineInput from "@/components/ScaleLineInput.vue";
-import { DEFAULT_NUMBER_OF_COMPONENTS } from "@/constants";
+import { DEFAULT_NUMBER_OF_COMPONENTS, OCTAVE } from "@/constants";
 import { computedAndError, parseChordInput } from "@/utils";
 import { makeState } from "@/components/modals/tempering-state";
 import Temperament from "temperaments";
@@ -20,11 +20,6 @@ const props = defineProps<{
 
 const emit = defineEmits(["update:scale", "update:scaleName", "cancel"]);
 
-const octave = new Interval(
-  ExtendedMonzo.fromFraction(2, DEFAULT_NUMBER_OF_COMPONENTS),
-  "ratio"
-);
-
 const method = ref<"generators" | "vals" | "commas">("generators");
 const state = makeState(method);
 // method: "vals"
@@ -35,7 +30,7 @@ const commasString = state.commasString;
 const basisString = ref("");
 const dimensions = reactive<number[]>([]);
 const equaveString = ref("2/1");
-const equave = ref(octave);
+const equave = ref(OCTAVE);
 // Generic
 const subgroupString = state.subgroupString;
 const subgroupError = state.subgroupError;
@@ -126,7 +121,7 @@ function generate() {
     if (basis.value.length === 0) {
       name = "Lattice (unison";
     }
-    if (!equave.value.equals(octave)) {
+    if (!equave.value.equals(OCTAVE)) {
       name += ` over ${equave.value.toString()}`;
     }
     name += ")";
@@ -215,6 +210,7 @@ function generate() {
               id="equave"
               @update:value="equave = $event"
               v-model="equaveString"
+              :defaultValue="OCTAVE"
             />
           </div>
         </div>
diff --git a/src/components/modals/generation/SummonOctaplex.vue b/src/components/modals/generation/SummonOctaplex.vue
index 3496f9be..b1ce454c 100644
--- a/src/components/modals/generation/SummonOctaplex.vue
+++ b/src/components/modals/generation/SummonOctaplex.vue
@@ -2,23 +2,20 @@
 import { ref, watch } from "vue";
 import Modal from "@/components/ModalDialog.vue";
 import ScaleLineInput from "@/components/ScaleLineInput.vue";
-import { DEFAULT_NUMBER_OF_COMPONENTS } from "@/constants";
+import { OCTAVE } from "@/constants";
 import { computedAndError, parseChordInput } from "@/utils";
-import { ExtendedMonzo, Interval, Scale } from "scale-workshop-core";
+import { Scale } from "scale-workshop-core";
 
 const props = defineProps<{
   show: boolean;
 }>();
 
 const emit = defineEmits(["update:scale", "update:scaleName", "cancel"]);
-const octave = new Interval(
-  ExtendedMonzo.fromFraction(2, DEFAULT_NUMBER_OF_COMPONENTS),
-  "ratio"
-);
+
 const basisString = ref("3 5 7 11");
 const addUnity = ref(false);
 const equaveString = ref("2/1");
-const equave = ref(octave);
+const equave = ref(OCTAVE);
 const basisElement = ref<HTMLInputElement | null>(null);
 const [basis, basisError] = computedAndError(() => {
   if (!props.show) {
@@ -41,7 +38,7 @@ function generate() {
     if (addUnity.value) {
       name += " with 1/1";
     }
-    if (!equave.value.equals(octave)) {
+    if (!equave.value.equals(OCTAVE)) {
       name += ` over ${equave.value.toString()}`;
     }
     name += ")";
@@ -83,6 +80,7 @@ function generate() {
             id="equave"
             @update:value="equave = $event"
             v-model="equaveString"
+            :defaultValue="OCTAVE"
           />
         </div>
       </div>
diff --git a/src/components/modals/modification/MergeOffset.vue b/src/components/modals/modification/MergeOffset.vue
index 42c83de7..012df244 100644
--- a/src/components/modals/modification/MergeOffset.vue
+++ b/src/components/modals/modification/MergeOffset.vue
@@ -2,16 +2,21 @@
 import { ref } from "vue";
 import Modal from "@/components/ModalDialog.vue";
 import ScaleLineInput from "@/components/ScaleLineInput.vue";
-import { parseLine, type Scale } from "scale-workshop-core";
+import { ExtendedMonzo, Interval, type Scale } from "scale-workshop-core";
 import { DEFAULT_NUMBER_OF_COMPONENTS } from "@/constants";
 
 const props = defineProps<{
   scale: Scale;
 }>();
 
+const THIRD = new Interval(
+  ExtendedMonzo.fromFraction("5/4", DEFAULT_NUMBER_OF_COMPONENTS),
+  "ratio"
+);
+
 const emit = defineEmits(["update:scale", "cancel"]);
 
-const offset = ref(parseLine("5/4", DEFAULT_NUMBER_OF_COMPONENTS));
+const offset = ref(THIRD);
 const offsetString = ref("");
 // Overflow = "none" is too similar to "reduce" to be included in the UI.
 const overflowType = ref<"none" | "intuitive" | "filter" | "reduce">("filter");
@@ -56,6 +61,7 @@ function modify() {
             id="offset"
             placeholder="5/4"
             v-model="offsetString"
+            :defaultValue="THIRD"
             @update:value="offset = $event"
           />
         </div>
diff --git a/src/constants.ts b/src/constants.ts
index c6b081b2..4d8feb5b 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -1,3 +1,4 @@
+import { ExtendedMonzo, Interval } from "scale-workshop-core";
 import { version } from "../package.json";
 
 // GLOBALS
@@ -25,3 +26,13 @@ export const KORG = {
 
 // Browser interaction
 export const LEFT_MOUSE_BTN = 0;
+
+// Some often used intervals
+export const OCTAVE = new Interval(
+  ExtendedMonzo.fromFraction(2, DEFAULT_NUMBER_OF_COMPONENTS),
+  "ratio"
+);
+export const FIFTH = new Interval(
+  ExtendedMonzo.fromFraction("3/2", DEFAULT_NUMBER_OF_COMPONENTS),
+  "ratio"
+);