From 3f7adf0f558c7d198e989e6a36666ea076e45643 Mon Sep 17 00:00:00 2001
From: klemek <klemek@outlook.fr>
Date: Sat, 7 Dec 2019 00:22:55 +0100
Subject: [PATCH] finished preview

---
 index.html | 22 +++++++-------
 main.js    | 85 ++++++++++++++++++++++++++++++++++++++++--------------
 2 files changed, 74 insertions(+), 33 deletions(-)

diff --git a/index.html b/index.html
index 5a67a1b..31840cd 100644
--- a/index.html
+++ b/index.html
@@ -29,30 +29,30 @@
             <tr></tr>
             <tr v-bind:class="{focused: focused=='sw'||focused=='sh'||focused=='sheet'}">
                 <td>Sheet Size:</td>
-                <td><input @focus="setFocus('sw')" v-model="sw" v-bind:disabled="sheet>0" type="number" min="1" step="0.1"></td>
+                <td><input @focus="setFocus('sw')" @blur="resetFocus()" v-model="sw" v-bind:disabled="sheet>0" type="number" min="1" step="0.1"></td>
                 <td>×</td>
-                <td><input @focus="setFocus('sh')" v-model="sh" v-bind:disabled="sheet>0" type="number" min="1" step="0.1"></td>
+                <td><input @focus="setFocus('sh')" @blur="resetFocus()" v-model="sh" v-bind:disabled="sheet>0" type="number" min="1" step="0.1"></td>
                 <td><small>cm</small></td>
                 <td>
-                    <select v-model="sheet" @focus="setFocus('sheet')">
+                    <select v-model="sheet" @focus="setFocus('sheet')" @blur="resetFocus()">
                         <option v-bind:value="i" v-for="s,i in sheets">{{s.title}}</option>
                     </select>
                 </td>
             </tr>
             <tr v-bind:class="{focused: focused=='m'||focused=='n'}">
                 <td>Boxes:</td>
-                <td><input @focus="setFocus('m')" v-model="m" type="number" min="1"></td>
+                <td><input @focus="setFocus('m')" @blur="resetFocus()" v-model="m" type="number" min="1"></td>
                 <td>×</td>
-                <td><input @focus="setFocus('n')" v-model="n" type="number" min="1"></td>
+                <td><input @focus="setFocus('n')" @blur="resetFocus()" v-model="n" type="number" min="1"></td>
                 <td></td>
                 <td></td>
             </tr>
             <tr v-bind:class="{focused: focused=='bw'||focused=='bh'}" v-if="!incomplete">
                 <td>Box size:</td>
-                <td><input @focus="setFocus('bw')" id="bw" v-model="bw" v-bind:disabled="(finishedH && !bw) || fbw"
+                <td><input @focus="setFocus('bw')" @blur="resetFocus()" id="bw" v-model="bw" v-bind:disabled="(finishedH && !bw) || fbw"
                            type="number" min="0.1"></td>
                 <td>×</td>
-                <td><input @focus="setFocus('bh')" id="bh" v-model="bh" v-bind:disabled="(finishedV && !bh) || fbh"
+                <td><input @focus="setFocus('bh')" @blur="resetFocus()" id="bh" v-model="bh" v-bind:disabled="(finishedV && !bh) || fbh"
                            type="number" min="0.1"></td>
                 <td><small>cm</small></td>
                 <td><span><input v-model="ratio" type="checkbox">Use ratio</span></td>
@@ -67,20 +67,20 @@
             </tr>
             <tr v-bind:class="{focused: focused=='mh'||focused=='mv'}" v-if="!incomplete">
                 <td>Box margin:</td>
-                <td><input @focus="setFocus('mh')" id="mh" v-model="mh" v-bind:disabled="finishedH && !mh" type="number"
+                <td><input @focus="setFocus('mh')" @blur="resetFocus()" id="mh" v-model="mh" v-bind:disabled="finishedH && !mh" type="number"
                            min="0.1" step="0.1"></td>
                 <td><small>cm</small></td>
-                <td><input @focus="setFocus('mv')" id="mv" v-model="mv" v-bind:disabled="finishedV && !mv" type="number"
+                <td><input @focus="setFocus('mv')" @blur="resetFocus()" id="mv" v-model="mv" v-bind:disabled="finishedV && !mv" type="number"
                            min="0.1" step="0.1"></td>
                 <td><small>cm</small></td>
                 <td><span><input v-model="padding" type="checkbox">Sheet padding</span></td>
             </tr>
             <tr v-bind:class="{focused: focused=='ph'||focused=='pv'}" v-if="padding && !incomplete">
                 <td>Sheet padding:</td>
-                <td><input @focus="setFocus('ph')" id="ph" v-model="ph" v-bind:disabled="finishedH && !ph" type="number"
+                <td><input @focus="setFocus('ph')" @blur="resetFocus()" id="ph" v-model="ph" v-bind:disabled="finishedH && !ph" type="number"
                            min="0.1"></td>
                 <td><small>cm</small></td>
-                <td><input @focus="setFocus('pv')" id="pv" v-model="pv" v-bind:disabled="finishedV && !pv" type="number"
+                <td><input @focus="setFocus('pv')" @blur="resetFocus()" id="pv" v-model="pv" v-bind:disabled="finishedV && !pv" type="number"
                            min="0.1"></td>
                 <td><small>cm</small></td>
                 <td></td>
diff --git a/main.js b/main.js
index c73d8c5..e868b79 100644
--- a/main.js
+++ b/main.js
@@ -68,7 +68,7 @@ let app = {
     focused: undefined,
     //inputs
     sw: 21, sh: 29.7, //sheet size
-    m: 1, n: 1, //boxes //TODO undefined
+    m: undefined, n: undefined, //boxes
     bw: undefined, bh: undefined, //box size
     rw: undefined, rh: undefined, //box ratio
     mh: undefined, mv: undefined, //margin
@@ -113,9 +113,13 @@ let app = {
     pv: 'refreshValues',
   },
   methods: {
-    setFocus: function (name) {
+    'resetFocus': function () {
+      this.focused = undefined;
+      this.refreshValues();
+    },
+    'setFocus': function (name) {
       this.focused = name;
-      this.redraw();
+      this.refreshValues();
     },
     refreshValues: function () {
       const self = this;
@@ -192,7 +196,7 @@ let app = {
           }
         }
       }
-      setTimeout(this.redraw);
+      setTimeout(this.redraw, 10);
     },
     setFinalValue: function (n, v) {
       v = utils.round(v, 2);
@@ -222,8 +226,63 @@ let app = {
         this.preview.style.height = `${height}px`;
 
         const ctx = this.preview.getContext('2d');
+        ctx.lineCap = 'round';
+        ctx.lineJoin = 'round';
         ctx.clearRect(0, 0, width, height);
 
+        ctx.lineWidth = 2;
+
+        const m = this.m || 1;
+        const n = this.n || 1;
+        const bw = this.finishedH ? width * (this.getFinalValue('bw') / this.sw) : width / m;
+        const bh = this.finishedV ? height * (this.getFinalValue('bh') / this.sh) : height / n;
+        const mh = this.finishedH ? width * (this.getFinalValue('mh') / this.sw) : 0;
+        const mv = this.finishedV ? height * (this.getFinalValue('mv') / this.sh) : 0;
+        const ph = this.finishedH ? (this.padding ? width * (this.getFinalValue('ph') / this.sw) : mh) : 0;
+        const pv = this.finishedV ? (this.padding ? height * (this.getFinalValue('pv') / this.sh) : mv) : 0;
+
+        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') {
+              ctx.beginPath();
+              ctx.moveTo(ph + (bw + mh) * x, pv + (bh + mv) * y);
+              ctx.lineTo(ph + (bw + mh) * x + bw, pv + (bh + mv) * y + bh);
+              ctx.stroke();
+            }
+            if (this.focused === 'ph' && (x === 0 || x === m) || this.focused === 'mh' && (!(x === 0 || x === m) || !this.padding)) {
+              ctx.beginPath();
+              ctx.moveTo(ph + (bw + mh) * (x - 1) + bw, pv + (bh + mv) * y + bh / 2);
+              ctx.lineTo(ph + (bw + mh) * x, pv + (bh + mv) * y + bh / 2);
+              ctx.stroke();
+            }
+            if (this.focused === 'pv' && (y === 0 || y === n) || this.focused === 'mv' && (!(y === 0 || y === n) || !this.padding)) {
+              ctx.beginPath();
+              ctx.moveTo(ph + (bw + mh) * x + bw / 2, pv + (bh + mv) * (y - 1) + bh);
+              ctx.lineTo(ph + (bw + mh) * x + bw / 2, pv + (bh + mv) * y);
+              ctx.stroke();
+            }
+
+            if (x < m && y < n) {
+              ctx.strokeStyle = (this.focused === 'bw' || this.focused === 'm' || this.focused === 'n') ? '#c62828' : '#424242';
+              ctx.beginPath();
+              ctx.moveTo(ph + (bw + mh) * x, pv + (bh + mv) * y);
+              ctx.lineTo(ph + (bw + mh) * x + bw, pv + (bh + mv) * y);
+              ctx.moveTo(ph + (bw + mh) * x, pv + (bh + mv) * y + bh);
+              ctx.lineTo(ph + (bw + mh) * x + bw, pv + (bh + mv) * y + bh);
+              ctx.stroke();
+
+              ctx.strokeStyle = (this.focused === 'bh' || this.focused === 'm' || this.focused === 'n') ? '#c62828' : '#424242';
+              ctx.beginPath();
+              ctx.moveTo(ph + (bw + mh) * x, pv + (bh + mv) * y);
+              ctx.lineTo(ph + (bw + mh) * x, pv + (bh + mv) * y + bh);
+              ctx.moveTo(ph + (bw + mh) * x + bw, pv + (bh + mv) * y);
+              ctx.lineTo(ph + (bw + mh) * x + bw, pv + (bh + mv) * y + bh);
+              ctx.stroke();
+            }
+          }
+        }
+
         ctx.lineWidth = 4;
         ctx.strokeStyle = (this.focused === 'sw' || this.focused === 'sheet') ? '#c62828' : '#424242';
         ctx.beginPath();
@@ -240,24 +299,6 @@ let app = {
         ctx.moveTo(width - 2, 1);
         ctx.lineTo(width - 2, height - 2);
         ctx.stroke();
-
-        ctx.lineWidth = 2;
-        ctx.strokeStyle = '#424242';
-
-        const m = this.m || 1;
-        const n = this.n || 1;
-        const bw = this.finishedH ? width * (this.bw / this.sw) : width / m;
-        const bh = this.finishedV ? height * (this.bh / this.sh) : height / n;
-        const mh = this.finishedH ? width * (this.getFinalValue('mh') / this.sw) : 0;
-        const mv = this.finishedV ? height * (this.getFinalValue('mv') / this.sh) : 0;
-        const ph = this.finishedH ? (this.padding ? width * (this.getFinalValue('ph') / this.sw) : mh) : 0;
-        const pv = this.finishedV ? (this.padding ? height * (this.getFinalValue('pv') / this.sh) : mv) : 0;
-
-        for (let x = 0; x < m; x++) {
-          for (let y = 0; y < n; y++) {
-            ctx.strokeRect(ph + (bw + mh) * x, pv + (bh + mv) * y, bw, bh);
-          }
-        }
       } else {
         this.preview.width = 1;
         this.preview.height = 1;