fix(Aspect Ratio Calculator): better UI and ratio preset handling

Fix #51

Author: sharevb

src/tools/aspect-ratio-calculator/aspect-ratio-calculator.vue

@@ -17,9 +17,19 @@ const result = ref<string | null>(null);
 function calculateResult() {
   if (mode.value === 'ratio' && width.value && height.value) {
     const ratio = calculateAspectRatio(width.value, height.value);
-    r1.value = ratio.r1;
-    r2.value = ratio.r2;
-    result.value = `Aspect Ratio: ${ratio.r1}:${ratio.r2}`;
+    if (r2.value) {
+      r1.value = ratio.r1 / ratio.r2;
+    } else if (r1.value) {
+      r2.value = ratio.r2 / ratio.r1;
+    } else {
+      r1.value = ratio.r1;
+      r2.value = ratio.r2;
+    }
+    if (ratio.r1 !== r1.value) {
+      result.value = `Aspect Ratio: ${r1.value}:${r2.value} or ${ratio.r1}:${ratio.r2}`;
+    } else {
+      result.value = `Aspect Ratio: ${ratio.r1}:${ratio.r2}`;
+    }
   }
   else if (mode.value === 'dimensions' && r1.value && r2.value) {
     if (width.value) {
@@ -48,6 +58,11 @@ function clearAll() {
   r2.value = null;
   result.value = null;
 }
+function clearRatio() {
+  r1.value = null;
+  r2.value = null;
+  result.value = null;
+}
 </script>
 
 <template>
@@ -90,6 +105,9 @@ function clearAll() {
       <NButton type="primary" @click="calculateResult">
         Calculate
       </NButton>
+      <NButton @click="clearRatio" v-if="mode === 'ratio'">
+        Clear Ratio
+      </NButton>
       <NButton @click="clearAll">
         Clear All
       </NButton>