Make the default value a required prop for ScaleLineInput

ref #480
xenharmonic-devs · Nov 26, 2023 · 4331fc8 · 4331fc8
1 parent 4ebad4b
commit 4331fc8
Show file tree

Hide file tree

Showing 10 changed files with 77 additions and 62 deletions.
diff --git 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
@@ -2,26 +2,21 @@
 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;
 }>();
 
 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
@@ -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
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { DEFAULT_NUMBER_OF_COMPONENTS } from "@/constants";
+import { DEFAULT_NUMBER_OF_COMPONENTS, OCTAVE } from "@/constants";
 import { computed, ref, watch } from "vue";
 import Modal from "@/components/ModalDialog.vue";
 import ScaleLineInput from "@/components/ScaleLineInput.vue";
@@ -14,14 +14,9 @@ const props = defineProps<{
 
 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");
@@ -172,6 +167,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
@@ -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
@@ -2,6 +2,8 @@
 import {
   DEFAULT_NUMBER_OF_COMPONENTS,
   MAX_INTERACTIVE_SUBGROUP_SIZE,
+  FIFTH,
+  OCTAVE,
 } from "@/constants";
 import {
   makeRank2FromVals,
@@ -21,7 +23,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;
@@ -43,9 +45,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;
@@ -457,6 +459,7 @@ function generate() {
               placeholder="3/2"
               v-model="generatorString"
               @update:value="generator = $event"
+              :defaultValue="FIFTH"
             />
             <button @click="flipGenerator">Flip to {{ opposite }}</button>
           </div>
@@ -465,8 +468,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
@@ -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
@@ -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>