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

minimum page preview

Browse Source
This commit is contained in:
klemek
2019-12-06 21:28:51 +01:00
parent 06b7ea17b4
commit c9a287ccf6
3 changed files with 123 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+6 -4
View File
@@ -43,7 +43,7 @@
<td>×</td>
<td><input v-model="n" type="number" min="1"></td>
</tr>
<tr>
<tr v-if="!incomplete">
<td>Box size:</td>
<td><input id="bw" v-model="bw" v-bind:disabled="(finishedH && !bw) || fbw" type="number" min="0.1"></td>
<td>×</td>
@@ -51,13 +51,13 @@
<td><small>cm</small></td>
<td><span><input v-model="ratio" type="checkbox">Use ratio</span></td>
</tr>
<tr v-if="ratio">
<tr v-if="ratio && !incomplete">
<td>Box ratio:</td>
<td><input v-model="rw" type="number" min="0.1" step="0.1"></td>
<td>/</td>
<td><input v-model="rh" type="number" min="0.1" step="0.1"></td>
</tr>
<tr>
<tr v-if="!incomplete">
<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><small>cm</small></td>
@@ -65,7 +65,7 @@
<td><small>cm</small></td>
<td><span><input v-model="padding" type="checkbox">Sheet padding</span></td>
</tr>
<tr v-if="padding">
<tr v-if="padding && !incomplete">
<td>Sheet padding:</td>
<td><input id="ph" v-model="ph" v-bind:disabled="finishedH && !ph" type="number" min="0.1"></td>
<td><small>cm</small></td>
@@ -78,6 +78,8 @@
</tr>
</table>
<br>
<canvas id="preview"></canvas>
<br>
<small><a href="https://twitter.com/_klemek" target="_blank">@Klemek</a> - <a href="" target="_blank">Github Repository</a> - 2019</small>
</main>
</body>
main.js
+110 -76
View File
@@ -67,7 +67,7 @@ let app = {
data: {
//inputs
sw: 21, sh: 29.7, //sheet size
m: 2, n: 3, //boxes
m: undefined, n: undefined, //boxes
bw: undefined, bh: undefined, //box size
rw: undefined, rh: undefined, //box ratio
mh: undefined, mv: undefined, //margin
@@ -75,6 +75,7 @@ let app = {
sheet: 5,
ratio: false,
padding: false,
incomplete: false,
finishedH: false, finishedV: false, //finished h
fbw: false, fbh: false, //forced width or height
sheets: [
@@ -87,94 +88,101 @@ let app = {
this.sw = this.sheets[v].w;
this.sh = this.sheets[v].h;
}
this.refreshValues();
},
padding: function (v) {
if (!v && this.bw && this.mh)
this.mh = undefined;
if (!v && this.bh && this.mv)
this.mv = undefined;
this.checkFinished();
this.refreshValues();
},
ratio: 'checkFinished',
bw: 'checkFinished',
bh: 'checkFinished',
rw: 'checkFinished',
rh: 'checkFinished',
mh: 'checkFinished',
mv: 'checkFinished',
ph: 'checkFinished',
pv: 'checkFinished',
ratio: 'refreshValues',
sw: 'refreshValues',
sh: 'refreshValues',
m: 'refreshValues',
n: 'refreshValues',
bw: 'refreshValues',
bh: 'refreshValues',
rw: 'refreshValues',
rh: 'refreshValues',
mh: 'refreshValues',
mv: 'refreshValues',
ph: 'refreshValues',
pv: 'refreshValues',
},
methods: {
checkFinished: function () {
refreshValues: function () {
const self = this;
this.finishedH = false;
this.finishedV = false;
this.incomplete = false;
this.fbw = false;
this.fbh = false;
if (!this.sw || !this.sh || !this.m || !this.n) return;
if (this.ratio && this.rw && this.rh) {
if (this.bh && !this.fbw) {
this.fbw = true;
this.bw = utils.round(this.bh * this.rw / this.rh, 2);
}
if (this.bw && !this.fbh) {
this.fbh = true;
this.bh = utils.round(this.bw * this.rh / this.rw, 2);
}
}
if (this.padding) {
const uh = !this.bw + !this.mh + !this.ph;
if (uh <= 1) {
this.finishedH = true;
if (!this.bw) setTimeout(() => {
self.finalValue('bw', (this.sw - this.ph * 2 - this.mh * (this.m - 1)) / this.m);
});
else if (!this.mh) setTimeout(() => {
self.finalValue('mh', (this.sw - this.ph * 2 - this.bw * this.m) / (this.m - 1));
});
else if (!this.ph) setTimeout(() => {
self.finalValue('ph', (this.sw - this.mh * (this.m - 1) - this.bw * this.m) / 2);
});
}
const uv = !this.bh + !this.mv + !this.pv;
if (uv <= 1) {
this.finishedV = true;
if (!this.bh) setTimeout(() => {
self.finalValue('bh', (this.sh - this.pv * 2 - this.mv * (this.n - 1)) / this.n);
});
else if (!this.mv) setTimeout(() => {
self.finalValue('mv', (this.sw - this.pv * 2 - this.bh * this.n) / (this.n - 1));
});
else if (!this.pv) setTimeout(() => {
self.finalValue('pv', (this.sw - this.mv * (this.m - 1) - this.bh * this.n) / 2);
});
}
if (!this.sw || !this.sh || !this.m || !this.n) {
this.incomplete = true;
} else {
const uh = !this.bw + !this.mh;
if (uh <= 1) {
this.finishedH = true;
if (!this.bw) setTimeout(() => {
self.finalValue('bw', (this.sw - this.mh * (this.m + 1)) / this.m);
});
else if (!this.mh) setTimeout(() => {
self.finalValue('mh', (this.sw - this.bw * this.m) / (this.m + 1));
});
if (this.ratio && this.rw && this.rh) {
if (this.bh && !this.fbw) {
this.fbw = true;
this.bw = utils.round(this.bh * this.rw / this.rh, 2);
}
if (this.bw && !this.fbh) {
this.fbh = true;
this.bh = utils.round(this.bw * this.rh / this.rw, 2);
}
}
const uv = !this.bh + !this.mv;
if (uv <= 1) {
this.finishedV = true;
if (!this.bh) setTimeout(() => {
self.finalValue('bh', (this.sh - this.mv * (this.n + 1)) / this.n);
});
else if (!this.mv) setTimeout(() => {
self.finalValue('mv', (this.sw - this.bh * this.n) / (this.n + 1));
});
if (this.padding) {
const uh = !this.bw + !this.mh + !this.ph;
if (uh <= 1) {
this.finishedH = true;
if (!this.bw) setTimeout(() => {
self.finalValue('bw', (this.sw - this.ph * 2 - this.mh * (this.m - 1)) / this.m);
});
else if (!this.mh) setTimeout(() => {
self.finalValue('mh', (this.sw - this.ph * 2 - this.bw * this.m) / (this.m - 1));
});
else if (!this.ph) setTimeout(() => {
self.finalValue('ph', (this.sw - this.mh * (this.m - 1) - this.bw * this.m) / 2);
});
}
const uv = !this.bh + !this.mv + !this.pv;
if (uv <= 1) {
this.finishedV = true;
if (!this.bh) setTimeout(() => {
self.finalValue('bh', (this.sh - this.pv * 2 - this.mv * (this.n - 1)) / this.n);
});
else if (!this.mv) setTimeout(() => {
self.finalValue('mv', (this.sw - this.pv * 2 - this.bh * this.n) / (this.n - 1));
});
else if (!this.pv) setTimeout(() => {
self.finalValue('pv', (this.sw - this.mv * (this.m - 1) - this.bh * this.n) / 2);
});
}
} else {
const uh = !this.bw + !this.mh;
if (uh <= 1) {
this.finishedH = true;
if (!this.bw) setTimeout(() => {
self.finalValue('bw', (this.sw - this.mh * (this.m + 1)) / this.m);
});
else if (!this.mh) setTimeout(() => {
self.finalValue('mh', (this.sw - this.bw * this.m) / (this.m + 1));
});
}
const uv = !this.bh + !this.mv;
if (uv <= 1) {
this.finishedV = true;
if (!this.bh) setTimeout(() => {
self.finalValue('bh', (this.sh - this.mv * (this.n + 1)) / this.n);
});
else if (!this.mv) setTimeout(() => {
self.finalValue('mv', (this.sw - this.bh * this.n) / (this.n + 1));
});
}
}
}
if(this.finishedH && this.finishedV){
//TODO draw
}
this.redraw();
},
finalValue: function (n, v) {
v = utils.round(v, 2);
@@ -186,31 +194,57 @@ let app = {
['bw', 'bh', 'rw', 'rh', 'mh', 'mv', 'ph', 'pv'].forEach(name => {
Vue.set(self, name, undefined);
});
},
redraw: function () {
if (this.sw && this.sh) {
const maxWidth = 0.8 * this.$el.getBoundingClientRect().width;
let height = this.previewMaxHeight;
let width = height * this.sw / this.sh;
if (width > maxWidth) {
width = maxWidth;
height = width * this.sh / this.sw;
}
this.preview.setAttribute('width', width);
this.preview.style.width = `${width}px`;
this.preview.setAttribute('height', height);
this.preview.style.height = `${height}px`;
const ctx = this.preview.getContext('2d');
ctx.clearRect(0,0, width, height);
ctx.lineWidth = 4;
ctx.strokeStyle = '#424242';
ctx.strokeRect(0, 0, width, height);
} else {
this.preview.width = 1;
this.preview.height = 1;
}
}
},
'mounted': function () {
const self = this;
this.preview = document.getElementById('preview');
data.papers.forEach(s => {
self.sheets.push({
title: `${s.title} (${s.w}×${s.h}cm)`,
w: s.w,
h: s.h
w: s.w, h: s.h
});
});
data.papers.forEach(s => {
self.sheets.push({
title: `${s.title} landscape (${s.h}×${s.w}cm)`,
w: s.h,
h: s.w
w: s.h, h: s.w
});
});
console.log('app mounted');
setTimeout(() => {
self.$el.setAttribute('style', '');
self.previewMaxHeight = this.preview.getBoundingClientRect().height;
self.refreshValues();
});
}
};
window.onload = () => {
app = new Vue(app);
};
};
style.css
+7 -1
View File
@@ -53,7 +53,7 @@ td:nth-child(2), td:nth-child(4) {
}
td:nth-child(3), td:nth-child(5) {
width: 1.1rem;
width: 1.8rem;
}
td:nth-child(6), td[colspan="5"]+td {
@@ -66,6 +66,12 @@ td[colspan="5"]{
text-align: center;
}
canvas{
display:block;
margin:auto;
height:20rem;
}
@media only screen and (min-width: 768px) {
main {
max-width: 42rem;