klemek/sheet-divider
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed ratio math

Browse Source
This commit is contained in:
klemek
2019-12-07 11:04:45 +01:00
parent 2413ae7bf0
commit d0294dd74f
2 changed files with 56 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+22 -11
View File
@@ -24,9 +24,11 @@
<tr></tr> <tr></tr>
<tr v-bind:class="{focused: focused=='sw'||focused=='sh'||focused=='sheet'}"> <tr v-bind:class="{focused: focused=='sw'||focused=='sh'||focused=='sheet'}">
<td>Sheet Size:</td> <td>Sheet Size:</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><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>×</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><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><small>cm</small></td>
<td> <td>
<select v-model="sheet" @focus="setFocus('sheet')" @blur="resetFocus()"> <select v-model="sheet" @focus="setFocus('sheet')" @blur="resetFocus()">
@@ -44,19 +46,23 @@
</tr> </tr>
<tr v-bind:class="{focused: focused=='bw'||focused=='bh'}" v-if="!incomplete"> <tr v-bind:class="{focused: focused=='bw'||focused=='bh'}" v-if="!incomplete">
<td>Box size:</td> <td>Box size:</td>
<td><input @focus="setFocus('bw')" @blur="resetFocus()" 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" step="0.1"></td> type="number" min="0.1" step="0.1"></td>
<td>×</td> <td>×</td>
<td><input @focus="setFocus('bh')" @blur="resetFocus()" 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" step="0.1"></td> type="number" min="0.1" step="0.1"></td>
<td><small>cm</small></td> <td><small>cm</small></td>
<td><span><input v-model="ratio" type="checkbox">Use ratio</span></td> <td><span><input v-model="ratio" type="checkbox">Use ratio</span></td>
</tr> </tr>
<tr v-bind:class="{focused: focused=='rw'||focused=='rh'||focused==='ratio'}" v-if="ratio && !incomplete"> <tr v-bind:class="{focused: focused=='rw'||focused=='rh'||focused==='ratio'}" v-if="ratio && !incomplete">
<td>Box ratio:</td> <td>Box ratio:</td>
<td><input @focus="setFocus('rw')" v-model="rw" v-bind:disabled="ratioId>0" type="number" min="0.1" step="0.1"></td> <td><input @focus="setFocus('rw')" v-model="rw" v-bind:disabled="ratioId>0" type="number" min="1"
step="1"></td>
<td>:</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><input @focus="setFocus('rh')" v-model="rh" v-bind:disabled="ratioId>0" type="number" min="1"
step="1"></td>
<td></td> <td></td>
<td> <td>
<select v-model="ratioId" @focus="setFocus('ratio')" @blur="resetFocus()"> <select v-model="ratioId" @focus="setFocus('ratio')" @blur="resetFocus()">
@@ -66,20 +72,24 @@
</tr> </tr>
<tr v-bind:class="{focused: focused=='mh'||focused=='mv'}" v-if="!incomplete"> <tr v-bind:class="{focused: focused=='mh'||focused=='mv'}" v-if="!incomplete">
<td>Box margin:</td> <td>Box margin:</td>
<td><input @focus="setFocus('mh')" @blur="resetFocus()" 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> min="0.1" step="0.1"></td>
<td><small>cm</small></td> <td><small>cm</small></td>
<td><input @focus="setFocus('mv')" @blur="resetFocus()" 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> min="0.1" step="0.1"></td>
<td><small>cm</small></td> <td><small>cm</small></td>
<td><span><input v-model="padding" type="checkbox">Sheet padding</span></td> <td><span><input v-model="padding" type="checkbox">Sheet padding</span></td>
</tr> </tr>
<tr v-bind:class="{focused: focused=='ph'||focused=='pv'}" v-if="padding && !incomplete"> <tr v-bind:class="{focused: focused=='ph'||focused=='pv'}" v-if="padding && !incomplete">
<td>Sheet padding:</td> <td>Sheet padding:</td>
<td><input @focus="setFocus('ph')" @blur="resetFocus()" 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" step="0.1"></td> min="0.1" step="0.1"></td>
<td><small>cm</small></td> <td><small>cm</small></td>
<td><input @focus="setFocus('pv')" @blur="resetFocus()" 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" step="0.1"></td> min="0.1" step="0.1"></td>
<td><small>cm</small></td> <td><small>cm</small></td>
<td></td> <td></td>
@@ -96,7 +106,8 @@
<br> <br>
<canvas id="preview"></canvas> <canvas id="preview"></canvas>
<br> <br>
<small><a href="https://twitter.com/_klemek" target="_blank">@Klemek</a> - <a href="https://github.com/klemek/sheet-divider" target="_blank">Github <small><a href="https://twitter.com/_klemek" target="_blank">@Klemek</a> - <a
href="https://github.com/klemek/sheet-divider" target="_blank">Github
Repository</a> - 2019</small> Repository</a> - 2019</small>
</main> </main>
</body> </body>
main.js
+28 -26
View File
@@ -60,19 +60,19 @@ const data = {
{title: 'Demi-Raisin', w: 32.5, h: 50}, {title: 'Demi-Raisin', w: 32.5, h: 50},
], ],
ratios: [ ratios: [
{rw:1, rh:1}, {rw: 1, rh: 1},
{rw:2, rh:1}, {rw: 2, rh: 1},
{rw:1, rh:2}, {rw: 1, rh: 2},
{rw:3, rh:2}, {rw: 3, rh: 2},
{rw:2, rh:3}, {rw: 2, rh: 3},
{rw:4, rh:3}, {rw: 4, rh: 3},
{rw:3, rh:4}, {rw: 3, rh: 4},
{rw:4, rh:5}, {rw: 4, rh: 5},
{rw:5, rh:7}, {rw: 5, rh: 7},
{rw:16, rh:9}, {rw: 16, rh: 9},
{rw:9, rh:16}, {rw: 9, rh: 16},
{rw:21, rh:9}, {rw: 21, rh: 9},
{rw:9, rh:21}, {rw: 9, rh: 21},
] ]
}; };
@@ -82,13 +82,13 @@ let app = {
data: { data: {
focused: undefined, focused: undefined,
//inputs //inputs
sw: 21, sh: 29.7, //sheet size sw: undefined, sh: undefined, //sheet size
m: undefined, n: undefined, //boxes m: undefined, n: undefined, //boxes
bw: undefined, bh: undefined, //box size bw: undefined, bh: undefined, //box size
rw: undefined, rh: undefined, //box ratio rw: undefined, rh: undefined, //box ratio
mh: undefined, mv: undefined, //margin mh: undefined, mv: undefined, //margin
ph: undefined, pv: undefined, //padding ph: undefined, pv: undefined, //padding
sheet: 5, sheet: 0,
sheets: [ sheets: [
{title: 'Custom'} {title: 'Custom'}
], ],
@@ -118,6 +118,13 @@ let app = {
} }
this.refreshValues(); this.refreshValues();
}, },
ratio: function (v) {
if (!v && this.fbw)
this.bw = utils.round(this.bw, 1);
if (!v && this.fbh)
this.bh = utils.round(this.bh, 1);
this.refreshValues();
},
padding: function (v) { padding: function (v) {
if (!v && this.bw && this.mh) if (!v && this.bw && this.mh)
this.mh = undefined; this.mh = undefined;
@@ -125,7 +132,6 @@ let app = {
this.mv = undefined; this.mv = undefined;
this.refreshValues(); this.refreshValues();
}, },
ratio: 'refreshValues',
sw: 'refreshValues', sw: 'refreshValues',
sh: 'refreshValues', sh: 'refreshValues',
m: 'refreshValues', m: 'refreshValues',
@@ -162,22 +168,18 @@ let app = {
this.incomplete = true; this.incomplete = true;
} else { } else {
if (this.ratio && this.rw && this.rh) { if (this.ratio && this.rw && this.rh) {
if (!this.fbw && !this.fbh) {
if (this.bh) {
this.fbw = true;
this.bw = utils.round(this.bh * this.rw / this.rh, 2);
} else if (this.bw) {
this.fbh = true;
this.bh = utils.round(this.bw * this.rh / this.rw, 2);
}
} else {
if (this.fbw && !this.bh) { if (this.fbw && !this.bh) {
this.fbw = false; this.fbw = false;
this.bw = undefined; this.bw = undefined;
} else if (this.fbh && !this.bw) { } else if (this.fbh && !this.bw) {
this.fbh = false; this.fbh = false;
this.bh = undefined; this.bh = undefined;
} } else if (!this.fbw && this.bw) {
this.fbh = true;
this.bh = utils.round(this.bw * this.rh / this.rw, 2);
} else if (!this.fbh && this.bh) {
this.fbw = true;
this.bw = utils.round(this.bh * this.rw / this.rh, 2);
} }
} else { } else {
this.fbw = false; this.fbw = false;