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 v-bind:class="{focused: focused=='sw'||focused=='sh'||focused=='sheet'}">
<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><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>
<select v-model="sheet" @focus="setFocus('sheet')" @blur="resetFocus()">
@@ -44,19 +46,23 @@
</tr>
<tr v-bind:class="{focused: focused=='bw'||focused=='bh'}" v-if="!incomplete">
<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>
<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>
<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'||focused==='ratio'}" v-if="ratio && !incomplete">
<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><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>
<select v-model="ratioId" @focus="setFocus('ratio')" @blur="resetFocus()">
@@ -66,20 +72,24 @@
</tr>
<tr v-bind:class="{focused: focused=='mh'||focused=='mv'}" v-if="!incomplete">
<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>
<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>
<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')" @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>
<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>
<td><small>cm</small></td>
<td></td>
@@ -96,7 +106,8 @@
<br>
<canvas id="preview"></canvas>
<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>
</main>
</body>
main.js
+34 -32
View File
@@ -60,19 +60,19 @@ const data = {
{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},
{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},
]
};
@@ -82,13 +82,13 @@ let app = {
data: {
focused: undefined,
//inputs
sw: 21, sh: 29.7, //sheet size
sw: undefined, sh: undefined, //sheet size
m: undefined, n: undefined, //boxes
bw: undefined, bh: undefined, //box size
rw: undefined, rh: undefined, //box ratio
mh: undefined, mv: undefined, //margin
ph: undefined, pv: undefined, //padding
sheet: 5,
sheet: 0,
sheets: [
{title: 'Custom'}
],
@@ -118,6 +118,13 @@ let app = {
}
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) {
if (!v && this.bw && this.mh)
this.mh = undefined;
@@ -125,7 +132,6 @@ let app = {
this.mv = undefined;
this.refreshValues();
},
ratio: 'refreshValues',
sw: 'refreshValues',
sh: 'refreshValues',
m: 'refreshValues',
@@ -162,22 +168,18 @@ let app = {
this.incomplete = true;
} else {
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) {
this.fbw = false;
this.bw = undefined;
} else if (this.fbh && !this.bw) {
this.fbh = false;
this.bh = undefined;
}
if (this.fbw && !this.bh) {
this.fbw = false;
this.bw = undefined;
} else if (this.fbh && !this.bw) {
this.fbh = false;
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 {
this.fbw = false;