finished preview
This commit is contained in:
klemek
+11
-11
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user