ratio quick select

index.html

@@ -52,13 +52,17 @@
                 <td><small>cm</small></td>
                 <td><span><input v-model="ratio" type="checkbox">Use ratio</span></td>
             </tr>
-            <tr v-bind:class="{focused: focused=='rw'||focused=='rh'}" v-if="ratio && !incomplete">
+            <tr v-bind:class="{focused: focused=='rw'||focused=='rh'||focused==='ratio'}" v-if="ratio && !incomplete">
                 <td>Box ratio:</td>
-                <td><input @focus="setFocus('rw')" v-model="rw" type="number" min="0.1" step="0.1"></td>
-                <td>/</td>
-                <td><input @focus="setFocus('rh')" v-model="rh" type="number" min="0.1" step="0.1"></td>
-                <td></td>
+                <td><input @focus="setFocus('rw')" v-model="rw" v-bind:disabled="ratioId>0" type="number" min="0.1" step="0.1"></td>
+                <td>:</td>
+                <td><input @focus="setFocus('rh')" v-model="rh" v-bind:disabled="ratioId>0" type="number" min="0.1" step="0.1"></td>
                 <td></td>
+                <td>
+                    <select v-model="ratioId" @focus="setFocus('ratio')" @blur="resetFocus()">
+                        <option v-bind:value="i" v-for="r,i in ratios">{{r.title}}</option>
+                    </select>
+                </td>
             </tr>
             <tr v-bind:class="{focused: focused=='mh'||focused=='mv'}" v-if="!incomplete">
                 <td>Box margin:</td>

main.js

@@ -58,6 +58,21 @@ const data = {
     {title: 'Double-Raisin', w: 65, h: 100},
     {title: 'Raisin', w: 50, h: 65},
     {title: 'Demi-Raisin', w: 32.5, h: 50},
+  ],
+  ratios: [
+    {rw:1, rh:1},
+    {rw:2, rh:1},
+    {rw:1, rh:2},
+    {rw:3, rh:2},
+    {rw:2, rh:3},
+    {rw:4, rh:3},
+    {rw:3, rh:4},
+    {rw:4, rh:5},
+    {rw:5, rh:7},
+    {rw:16, rh:9},
+    {rw:9, rh:16},
+    {rw:21, rh:9},
+    {rw:9, rh:21},
   ]
 };
 
@@ -74,14 +89,19 @@ let app = {
     mh: undefined, mv: undefined, //margin
     ph: undefined, pv: undefined, //padding
     sheet: 5,
+    sheets: [
+      {title: 'Custom'}
+    ],
     ratio: false,
+    ratioId: 0,
+    ratios: [
+      {title: 'Custom'}
+    ],
     padding: false,
     incomplete: false,
     finishedH: false, finishedV: false, //finished h
     fbw: false, fbh: false, //forced width or height
-    sheets: [
-      {title: 'Custom'}
-    ]
+
   },
   watch: {
     sheet: function (v) {
@@ -91,6 +111,13 @@ let app = {
       }
       this.refreshValues();
     },
+    ratioId: function (v) {
+      if (v > 0) {
+        this.rw = this.ratios[v].rw;
+        this.rh = this.ratios[v].rh;
+      }
+      this.refreshValues();
+    },
     padding: function (v) {
       if (!v && this.bw && this.mh)
         this.mh = undefined;
@@ -254,7 +281,7 @@ let app = {
         for (let x = 0; x < m + 1; x++) {
           for (let y = 0; y < n + 1; y++) {
             ctx.strokeStyle = '#c62828';
-            if (this.focused === 'rw' || this.focused === 'rh') {
+            if (this.focused === 'rw' || this.focused === 'rh' || this.focused === 'ratio') {
               ctx.beginPath();
               ctx.moveTo(ph + (bw + mh) * x, pv + (bh + mv) * y);
               ctx.lineTo(ph + (bw + mh) * x + bw, pv + (bh + mv) * y + bh);
@@ -330,6 +357,13 @@ let app = {
         w: s.h, h: s.w
       });
     });
+    data.ratios.forEach(r => {
+      self.ratios.push({
+        title: `${r.rw}:${r.rh}`,
+        rw: r.rw,
+        rh: r.rh
+      });
+    });
     setTimeout(() => {
       self.$el.setAttribute('style', '');
       self.previewMaxHeight = this.preview.getBoundingClientRect().height;