Merge pull request #443 from xenharmonic-devs/stretch-into

Add support for stretching to a specific interval
xenharmonic-devs · Nov 26, 2023 · 3fe1534 · 3fe1534
2 parents 7fb794a + 4d73e8a
commit 3fe1534
Showing 1 changed file with 52 additions and 1 deletion.
diff --git a/src/components/modals/modification/StretchScale.vue b/src/components/modals/modification/StretchScale.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import { ref } from "vue";
 import Modal from "@/components/ModalDialog.vue";
-import type { Scale } from "scale-workshop-core";
+import ScaleLineInput from "@/components/ScaleLineInput.vue";
+import { ExtendedMonzo, Interval, type Scale } from "scale-workshop-core";
+import { DEFAULT_NUMBER_OF_COMPONENTS } from "@/constants";
 const props = defineProps<{
   scale: Scale;
   centsFractionDigits: number;
@@ -10,6 +12,25 @@ const props = defineProps<{
 const emit = defineEmits(["update:scale", "cancel"]);
 const amount = ref(1.005);
 
+// Dummy variable to get the types right
+const pureFifth = new Interval(
+  ExtendedMonzo.fromFraction("3/2", DEFAULT_NUMBER_OF_COMPONENTS),
+  "ratio"
+);
+
+const referenceString = ref("");
+const reference = ref(pureFifth);
+
+const targetString = ref("");
+const target = ref(pureFifth);
+
+function calculateAmount() {
+  const calculated = target.value.totalCents() / reference.value.totalCents();
+  if (calculated >= 0.001 && calculated <= 999.999) {
+    amount.value = calculated;
+  }
+}
+
 function modify() {
   emit(
     "update:scale",
@@ -36,6 +57,7 @@ function modify() {
         <div class="control">
           <label for="amount">Stretch ratio</label>
           <input
+            class="real-valued"
             type="number"
             id="amount"
             min="0.001"
@@ -44,7 +66,36 @@ function modify() {
             v-model="amount"
           />
         </div>
+        <hr />
+        <div class="control">
+          <label for="reference">Reference interval</label>
+          <ScaleLineInput
+            id="reference"
+            placeholder="7\12"
+            @update:value="reference = $event"
+            v-model="referenceString"
+          />
+        </div>
+        <div class="control">
+          <label for="reference">Target interval</label>
+          <ScaleLineInput
+            id="reference"
+            placeholder="3/2"
+            @update:value="target = $event"
+            v-model="targetString"
+          />
+        </div>
+        <div class="control">
+          <label for="stretch-into">Stretch reference into target</label>
+          <button @click="calculateAmount">Calculate</button>
+        </div>
       </div>
     </template>
   </Modal>
 </template>
+
+<style scoped>
+.real-valued:invalid {
+  background-color: var(--color-background);
+}
+</style>