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

working preview + starting to preview focused

Browse Source
This commit is contained in:
klemek
2019-12-06 22:38:54 +01:00
parent c9a287ccf6
commit 3cf0ea1b93
3 changed files with 123 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+46 -28
View File
@@ -21,66 +21,84 @@
--> -->
</head> </head>
<body> <body>
<main id="app" style="display:none"> <main id="app" style="display:none">
<h1>Sheet Divider</h1> <h1>Sheet Divider</h1>
<br> <br>
<div id="table-container">
<table id="inputs"> <table id="inputs">
<tr> <tr></tr>
<tr v-bind:class="{focused: focused=='sw'||focused=='sh'||focused=='sheet'}">
<td>Sheet Size:</td> <td>Sheet Size:</td>
<td><input v-model="sw" v-bind:disabled="sheet>0" type="number" min="1"></td> <td><input @focus="setFocus('sw')" v-model="sw" v-bind:disabled="sheet>0" type="number" min="1" step="0.1"></td>
<td>×</td> <td>×</td>
<td><input v-model="sh" v-bind:disabled="sheet>0" type="number" min="1"></td> <td><input @focus="setFocus('sh')" 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"> <select v-model="sheet" @focus="setFocus('sheet')">
<option v-bind:value="i" v-for="s,i in sheets">{{s.title}}</option> <option v-bind:value="i" v-for="s,i in sheets">{{s.title}}</option>
</select> </select>
</td> </td>
</tr> </tr>
<tr> <tr v-bind:class="{focused: focused=='m'||focused=='n'}">
<td>Boxes:</td> <td>Boxes:</td>
<td><input v-model="m" type="number" min="1"></td> <td><input @focus="setFocus('m')" v-model="m" type="number" min="1"></td>
<td>×</td> <td>×</td>
<td><input v-model="n" type="number" min="1"></td> <td><input @focus="setFocus('n')" v-model="n" type="number" min="1"></td>
<td></td>
<td></td>
</tr> </tr>
<tr 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 id="bw" v-model="bw" v-bind:disabled="(finishedH && !bw) || fbw" type="number" min="0.1"></td> <td><input @focus="setFocus('bw')" id="bw" v-model="bw" v-bind:disabled="(finishedH && !bw) || fbw"
type="number" min="0.1"></td>
<td>×</td> <td>×</td>
<td><input id="bh" v-model="bh" v-bind:disabled="(finishedV && !bh) || fbh" type="number" min="0.1"></td> <td><input @focus="setFocus('bh')" id="bh" v-model="bh" v-bind:disabled="(finishedV && !bh) || fbh"
type="number" min="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-if="ratio && !incomplete"> <tr v-bind:class="{focused: focused=='rw'||focused=='rh'}" v-if="ratio && !incomplete">
<td>Box ratio:</td> <td>Box ratio:</td>
<td><input v-model="rw" type="number" min="0.1" step="0.1"></td> <td><input @focus="setFocus('rw')" v-model="rw" type="number" min="0.1" step="0.1"></td>
<td>/</td> <td>/</td>
<td><input v-model="rh" type="number" min="0.1" step="0.1"></td> <td><input @focus="setFocus('rh')" v-model="rh" type="number" min="0.1" step="0.1"></td>
<td></td>
<td></td>
</tr> </tr>
<tr 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 id="mh" v-model="mh" v-bind:disabled="finishedH && !mh" type="number" min="0.1" step="0.1"></td> <td><input @focus="setFocus('mh')" 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><small>cm</small></td>
<td><input id="mv" v-model="mv" v-bind:disabled="finishedV && !mv" type="number" min="0.1" step="0.1"></td> <td><input @focus="setFocus('mv')" 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><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-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 id="ph" v-model="ph" v-bind:disabled="finishedH && !ph" type="number" min="0.1"></td> <td><input @focus="setFocus('ph')" id="ph" v-model="ph" v-bind:disabled="finishedH && !ph" type="number"
min="0.1"></td>
<td><small>cm</small></td> <td><small>cm</small></td>
<td><input id="pv" v-model="pv" v-bind:disabled="finishedV && !pv" type="number" min="0.1"></td> <td><input @focus="setFocus('pv')" id="pv" v-model="pv" v-bind:disabled="finishedV && !pv" type="number"
min="0.1"></td>
<td><small>cm</small></td> <td><small>cm</small></td>
<td></td>
<td></td>
</tr> </tr>
<tr> <tr>
<td colspan="5" style="text-align: center"><small>(All sizes in centimeters)</small></td> <td colspan="5" style="text-align: center"><small>(All sizes in centimeters)</small></td>
<td><button v-on:click="reset">Reset</button></td> <td>
<button v-on:click="reset">Reset</button>
</td>
</tr> </tr>
</table> </table>
<br> </div>
<canvas id="preview"></canvas> <br>
<br> <canvas id="preview"></canvas>
<small><a href="https://twitter.com/_klemek" target="_blank">@Klemek</a> - <a href="" target="_blank">Github Repository</a> - 2019</small> <br>
</main> <small><a href="https://twitter.com/_klemek" target="_blank">@Klemek</a> - <a href="" target="_blank">Github
Repository</a> - 2019</small>
</main>
</body> </body>
</html> </html>
main.js
+59 -17
View File
@@ -65,9 +65,10 @@ const data = {
let app = { let app = {
el: '#app', el: '#app',
data: { data: {
focused: undefined,
//inputs //inputs
sw: 21, sh: 29.7, //sheet size sw: 21, sh: 29.7, //sheet size
m: undefined, n: undefined, //boxes m: 1, n: 1, //boxes //TODO undefined
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
@@ -112,6 +113,10 @@ let app = {
pv: 'refreshValues', pv: 'refreshValues',
}, },
methods: { methods: {
setFocus: function (name) {
this.focused = name;
this.redraw();
},
refreshValues: function () { refreshValues: function () {
const self = this; const self = this;
this.finishedH = false; this.finishedH = false;
@@ -119,6 +124,11 @@ let app = {
this.incomplete = false; this.incomplete = false;
this.fbw = false; this.fbw = false;
this.fbh = false; this.fbh = false;
['sw', 'sh', 'm', 'n', 'bw', 'bh', 'rw', 'rh', 'mh', 'mv', 'ph', 'pv'].forEach(name => {
if (self[name]) {
Vue.set(self, name, parseFloat(self[name]));
}
});
if (!this.sw || !this.sh || !this.m || !this.n) { if (!this.sw || !this.sh || !this.m || !this.n) {
this.incomplete = true; this.incomplete = true;
} else { } else {
@@ -137,26 +147,26 @@ let app = {
if (uh <= 1) { if (uh <= 1) {
this.finishedH = true; this.finishedH = true;
if (!this.bw) setTimeout(() => { if (!this.bw) setTimeout(() => {
self.finalValue('bw', (this.sw - this.ph * 2 - this.mh * (this.m - 1)) / this.m); self.setFinalValue('bw', (this.sw - this.ph * 2 - this.mh * (this.m - 1)) / this.m);
}); });
else if (!this.mh) setTimeout(() => { else if (!this.mh) setTimeout(() => {
self.finalValue('mh', (this.sw - this.ph * 2 - this.bw * this.m) / (this.m - 1)); self.setFinalValue('mh', (this.sw - this.ph * 2 - this.bw * this.m) / (this.m - 1));
}); });
else if (!this.ph) setTimeout(() => { else if (!this.ph) setTimeout(() => {
self.finalValue('ph', (this.sw - this.mh * (this.m - 1) - this.bw * this.m) / 2); self.setFinalValue('ph', (this.sw - this.mh * (this.m - 1) - this.bw * this.m) / 2);
}); });
} }
const uv = !this.bh + !this.mv + !this.pv; const uv = !this.bh + !this.mv + !this.pv;
if (uv <= 1) { if (uv <= 1) {
this.finishedV = true; this.finishedV = true;
if (!this.bh) setTimeout(() => { if (!this.bh) setTimeout(() => {
self.finalValue('bh', (this.sh - this.pv * 2 - this.mv * (this.n - 1)) / this.n); self.setFinalValue('bh', (this.sh - this.pv * 2 - this.mv * (this.n - 1)) / this.n);
}); });
else if (!this.mv) setTimeout(() => { else if (!this.mv) setTimeout(() => {
self.finalValue('mv', (this.sw - this.pv * 2 - this.bh * this.n) / (this.n - 1)); self.setFinalValue('mv', (this.sh - this.pv * 2 - this.bh * this.n) / (this.n - 1));
}); });
else if (!this.pv) setTimeout(() => { else if (!this.pv) setTimeout(() => {
self.finalValue('pv', (this.sw - this.mv * (this.m - 1) - this.bh * this.n) / 2); self.setFinalValue('pv', (this.sh - this.mv * (this.m - 1) - this.bh * this.n) / 2);
}); });
} }
} else { } else {
@@ -164,31 +174,33 @@ let app = {
if (uh <= 1) { if (uh <= 1) {
this.finishedH = true; this.finishedH = true;
if (!this.bw) setTimeout(() => { if (!this.bw) setTimeout(() => {
self.finalValue('bw', (this.sw - this.mh * (this.m + 1)) / this.m); self.setFinalValue('bw', (this.sw - this.mh * (this.m + 1)) / this.m);
}); });
else if (!this.mh) setTimeout(() => { else if (!this.mh) setTimeout(() => {
self.finalValue('mh', (this.sw - this.bw * this.m) / (this.m + 1)); self.setFinalValue('mh', (this.sw - this.bw * this.m) / (this.m + 1));
}); });
} }
const uv = !this.bh + !this.mv; const uv = !this.bh + !this.mv;
if (uv <= 1) { if (uv <= 1) {
this.finishedV = true; this.finishedV = true;
if (!this.bh) setTimeout(() => { if (!this.bh) setTimeout(() => {
self.finalValue('bh', (this.sh - this.mv * (this.n + 1)) / this.n); self.setFinalValue('bh', (this.sh - this.mv * (this.n + 1)) / this.n);
}); });
else if (!this.mv) setTimeout(() => { else if (!this.mv) setTimeout(() => {
self.finalValue('mv', (this.sw - this.bh * this.n) / (this.n + 1)); self.setFinalValue('mv', (this.sh - this.bh * this.n) / (this.n + 1));
}); });
} }
} }
} }
this.redraw(); setTimeout(this.redraw);
}, },
finalValue: function (n, v) { setFinalValue: function (n, v) {
v = utils.round(v, 2); v = utils.round(v, 2);
console.log(n, v);
document.getElementById(n).value = v; document.getElementById(n).value = v;
}, },
getFinalValue: function (n) {
return parseFloat(document.getElementById(n).value);
},
'reset': function () { 'reset': function () {
const self = this; const self = this;
['bw', 'bh', 'rw', 'rh', 'mh', 'mv', 'ph', 'pv'].forEach(name => { ['bw', 'bh', 'rw', 'rh', 'mh', 'mv', 'ph', 'pv'].forEach(name => {
@@ -210,11 +222,42 @@ let app = {
this.preview.style.height = `${height}px`; this.preview.style.height = `${height}px`;
const ctx = this.preview.getContext('2d'); const ctx = this.preview.getContext('2d');
ctx.clearRect(0,0, width, height); ctx.clearRect(0, 0, width, height);
ctx.lineWidth = 4; ctx.lineWidth = 4;
ctx.strokeStyle = (this.focused === 'sw' || this.focused === 'sheet') ? '#c62828' : '#424242';
ctx.beginPath();
ctx.moveTo(1, 1);
ctx.lineTo(width - 2, 1);
ctx.moveTo(1, height - 2);
ctx.lineTo(width - 2, height - 2);
ctx.stroke();
ctx.strokeStyle = (this.focused === 'sh' || this.focused === 'sheet') ? '#c62828' : '#424242';
ctx.beginPath();
ctx.moveTo(1, 1);
ctx.lineTo(1, height - 2);
ctx.moveTo(width - 2, 1);
ctx.lineTo(width - 2, height - 2);
ctx.stroke();
ctx.lineWidth = 2;
ctx.strokeStyle = '#424242'; ctx.strokeStyle = '#424242';
ctx.strokeRect(0, 0, width, height);
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 { } else {
this.preview.width = 1; this.preview.width = 1;
this.preview.height = 1; this.preview.height = 1;
@@ -236,7 +279,6 @@ let app = {
w: s.h, h: s.w w: s.h, h: s.w
}); });
}); });
console.log('app mounted');
setTimeout(() => { setTimeout(() => {
self.$el.setAttribute('style', ''); self.$el.setAttribute('style', '');
self.previewMaxHeight = this.preview.getBoundingClientRect().height; self.previewMaxHeight = this.preview.getBoundingClientRect().height;
style.css
+18 -9
View File
@@ -26,12 +26,17 @@ h1 {
margin-bottom: .5em; margin-bottom: .5em;
} }
#table-container {
margin: auto;
padding: 1em;
background-color: #F5F5F5;
width: fit-content;
}
table { table {
border-collapse: collapse; border-collapse: collapse;
margin: auto; margin: 0;
font-size: .9em; font-size: .9em;
background-color: #F5F5F5;
border: 1em solid transparent;
} }
td { td {
@@ -39,6 +44,10 @@ td {
padding: 0.1rem 0.25rem; padding: 0.1rem 0.25rem;
} }
tr.focused {
background-color: #E0E0E0;
}
td > * { td > * {
width: 100%; width: 100%;
} }
@@ -56,20 +65,20 @@ td:nth-child(3), td:nth-child(5) {
width: 1.8rem; width: 1.8rem;
} }
td:nth-child(6), td[colspan="5"]+td { td:nth-child(6), td[colspan="5"] + td {
padding-left: 1rem; padding-left: 1rem;
text-align: left; text-align: left;
width: 11rem; width: 11rem;
} }
td[colspan="5"]{ td[colspan="5"] {
text-align: center; text-align: center;
} }
canvas{ canvas {
display:block; display: block;
margin:auto; margin: auto;
height:20rem; height: 20rem;
} }
@media only screen and (min-width: 768px) { @media only screen and (min-width: 768px) {