jjimenez/safekat
1
0
Fork 0
mirror of https://git.imnavajas.es/jjimenez/safekat.git synced 2025-07-25 22:52:08 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
d44686607a7799375280b3a14ee3dd4213fa2c3c
safekat/httpdocs/assets/js/safekat/components/preview.js
amazuecos 8caa6e8bab fix download
2025-03-25 18:29:39 +01:00

1333 lines
58 KiB
JavaScript
Raw Blame History

class previewFormas {
constructor(container, tipoLibro, tipoTapa, size, datos) {
this.container = container;
this.tipoLibro = tipoLibro;
this.tipoTapa = tipoTapa;
this.size = size;
this.ancho = datos.ancho;
this.alto = datos.alto;
this.lomo = datos.lomo;
this.lomoSobrecubierta = datos.lomoSobrecubierta;
this.previews = []
let solapaTemp = null;
let solapaSobrecubiertaTemp = null;
if (typeof this.lomo === 'function') {
solapaTemp = datos.solapas ? datos.solapas() : null;
solapaSobrecubiertaTemp = datos.solapas_sobrecubierta ? datos.solapas_sobrecubierta() : null;
}
else {
solapaTemp = datos.solapas ? datos.solapas : null;
solapaSobrecubiertaTemp = datos.solapas_sobrecubierta ? datos.solapas_sobrecubierta : null;
}
if (solapaTemp == undefined || solapaTemp == null || solapaTemp == false) {
this.solapa = 0;
this.offsetSolapa = 0.0;
}
else {
this.solapa = solapaTemp;
this.offsetSolapa = 3.0;
}
if (solapaSobrecubiertaTemp == undefined || solapaSobrecubiertaTemp == null || solapaSobrecubiertaTemp == false) {
this.solapas_sobrecubierta = 0;
this.offsetSolapa_sobrecubierta = 0.0;
}
else {
this.solapa_sobrecubierta = solapaSobrecubiertaTemp;
this.offsetSolapa_sobrecubierta = 3.0;
}
this.lomoRedondo = datos.lomoRedondo;
this.pvObj = null;
}
resizeEvent() {
$(window).resize(this.setViewBoxToPreview.bind(this))
}
setContainer(container) {
this.container = container;
}
setData(datos) {
this.previews = []
this.actualPreview = null;
this.ancho = datos.ancho;
this.alto = datos.alto;
this.lomo = datos.lomo;
this.lomoSobrecubierta = datos.lomoSobrecubierta;
let solapaTemp = null;
let solapaSobrecubiertaTemp = null;
if (typeof this.lomo === 'function') {
solapaTemp = datos.solapas ? datos.solapas() : null;
solapaSobrecubiertaTemp = datos.solapas_sobrecubierta ? datos.solapas_sobrecubierta() : null;
}
else {
solapaTemp = datos.solapas ? datos.solapas : null;
solapaSobrecubiertaTemp = datos.solapas_sobrecubierta ? datos.solapas_sobrecubierta : null;
}
if (solapaTemp == undefined || solapaTemp == null || solapaTemp == false) {
this.solapa = 0;
this.offsetSolapa = 0.0;
}
else {
this.solapa = solapaTemp;
this.offsetSolapa = 3.0;
}
if (solapaSobrecubiertaTemp == undefined || solapaSobrecubiertaTemp == null || solapaSobrecubiertaTemp == false) {
this.solapas_sobrecubierta = 0;
this.offsetSolapa_sobrecubierta = 0.0;
}
else {
this.solapa_sobrecubierta = solapaSobrecubiertaTemp;
this.offsetSolapa_sobrecubierta = 3.0;
}
this.lomoRedondo = datos.lomoRedondo;
}
getObjetoLP(lpName, _isCosido, _isTapaDura) {
let rowData = null;
$('#tableLineasPresupuesto').DataTable().rows().every(function (rowIdx, tableLoop, rowLoop) {
let lineaPresupuestoId = this.data().row_id.replace('lp_', '');
switch (lpName) {
case 'bn':
case 'bnhq':
case 'color':
case 'colorhq':
case 'cubierta':
case 'rot_bn':
case 'rot_color':
case 'guardas':
case 'sobrecubierta':
case 'faja':
if (lineaPresupuestoId === lpName) {
rowData = this.data();
}
break;
case 'ec':
if (lineaPresupuestoId === 'cubierta') {
rowData = this.data();
}
break;
default:
//console.log(lineaPresupuestoId);
break;
}
});
this.pvObj = {
idIndex: lpName,
tipoImpresion: parseInt($('#tipo_impresion_id').val()),
gramajeLibro: parseInt(rowData.gramaje),
manoLP: parseFloat(rowData.lomo),
lomoLibro: this.lomo(),
lomoLibroSobrecubierta: this.lomoSobrecubierta(),
anchoSolapa: $('#solapas').is(':checked') ? parseFloat($('#solapas_ancho').val()) : parseFloat(0),
nFormas: parseInt(rowData.formas),
nFormasH: parseInt(rowData.formas_h),
nFormasV: parseInt(rowData.formas_v),
orientacionFormas: rowData.formas_orientacion,
altoMaquina: parseFloat(rowData.maquina_alto),
anchoMaquina: parseFloat(rowData.maquina_ancho),
altoImpresion: parseFloat(rowData.maquina_impresion_alto),
anchoImpresion: parseFloat(rowData.maquina_impresion_ancho),
altoLibro: lpName == 'faja' ? parseFloat(parseFloat(rowData.alto_faja).toFixed(0)) : parseFloat(this.alto()),
anchoLibro: this.ancho(),
offsetSolapa: 0
};
//console.log(pvObj);
// Printing shape definition
this.pvObj.anchoForma = parseInt(_isCosido) ? parseInt(2 * this.pvObj.anchoLibro) : parseInt(this.pvObj.anchoLibro);
this.pvObj.altoForma = this.pvObj.altoLibro;
// Update preview info fields
let pvName = '#pv_' + lpName;
$(pvName + '_pg').attr("href", $(pvName + '_pg').attr('sk-url') + rowData.papel);
$(pvName + '_pi').attr("href", $(pvName + '_pi').attr('sk-url') + rowData.papel_impresion_id);
$(pvName + '_mi').attr("href", $(pvName + '_mi').attr('sk-url') + rowData.maquina_id);
$(pvName + '_gramaje').text(this.pvObj.gramajeLibro);
$(pvName + '_mano').text(this.pvObj.manoLP);
$(pvName + '_solapas').text(this.pvObj.anchoSolapa);
$(pvName + '_maquina').text(this.pvObj.anchoMaquina + "x" + this.pvObj.altoMaquina);
$(pvName + '_maquina_impresion').text(this.pvObj.anchoImpresion + "x" + this.pvObj.altoImpresion);
$(pvName + '_libro').text(this.pvObj.anchoLibro + "x" + this.pvObj.altoLibro);
$(pvName + '_forma').text(this.pvObj.anchoForma + "x" + this.pvObj.altoForma);
$(pvName + '_nFormas').text(this.pvObj.nFormas);
if (this.pvObj.anchoSolapa != 0) {
$('.pv-solapas').show();
this.pvObj.offsetSolapa = parseFloat(3); // 3mm
}
// Custom overwrites
switch (this.pvObj.idIndex) {
case 'cubierta':
// Fresado TD or Cosido TD
if (this.pvObj.tipoImpresion === 1 || this.pvObj.tipoImpresion === 3) {
let anchoPliegue = parseFloat(7); // mm
let altoPliegue = parseFloat(7); // mm
let sangre = parseFloat(20); // mm
if (this.isTapaDura && (this.ancho() >= 210 || this.alto() >= 267)) {
sangre = parseFloat(10); // mm
}
this.pvObj.anchoForma = ((2 * this.pvObj.anchoLibro) + (2 * anchoPliegue) + (2 * sangre) + this.pvObj.lomoLibro);
this.pvObj.altoForma += altoPliegue + (2 * sangre);
}
// Fresado TB y Cosido TB
else if (this.pvObj.tipoImpresion === 2 || this.pvObj.tipoImpresion === 4) {
let sangre = parseFloat(5); // mm
this.pvObj.anchoForma = ((2 * this.pvObj.anchoLibro) + (2 * (this.pvObj.anchoSolapa + this.pvObj.offsetSolapa)) + (2 * sangre) + this.pvObj.lomoLibro);
this.pvObj.altoForma += (2 * sangre);
}
// Grapado
else if (this.pvObj.tipoImpresion === 21) {
let sangre = parseFloat(5); // mm
this.pvObj.anchoForma = ((2 * this.pvObj.anchoLibro) + (2 * (this.pvObj.anchoSolapa + this.pvObj.offsetSolapa)) + (2 * sangre));
this.pvObj.altoForma += (2 * sangre);
}
// Espiral TD y TB, Wire-o TD y TB
else if (this.pvObj.tipoImpresion === 5 || this.pvObj.tipoImpresion === 6 ||
this.pvObj.tipoImpresion === 7 || this.pvObj.tipoImpresion === 8) {
let sangre = parseFloat(20); // mm
this.pvObj.anchoForma = this.pvObj.anchoLibro;
} else {
// ?
}
// Update labels
$(pvName + '_forma').text(this.pvObj.anchoForma + "x" + this.pvObj.altoForma);
break;
case 'sobrecubierta':
let sangre = parseFloat(5); // mm
let anchoSolapaSobrecubierta = $('#solapas_sobrecubierta').is(':checked') ? parseFloat($('#solapas_ancho_sobrecubierta').val()) : parseFloat(0); // mm
if (_isTapaDura) {
let anchoPliegue = parseFloat(7); // mm
let altoPliegue = parseFloat(7); // mm
this.pvObj.anchoForma = ((2 * this.pvObj.anchoLibro) + (2 * anchoPliegue) + (2 * (anchoSolapaSobrecubierta + this.pvObj.offsetSolapa)) + (2 * sangre) + this.pvObj.lomoLibroSobrecubierta);
this.pvObj.altoForma += altoPliegue + parseFloat(2 * sangre);
} else {
this.pvObj.anchoForma = ((2 * this.pvObj.anchoLibro) + (2 * (anchoSolapaSobrecubierta + this.pvObj.offsetSolapa)) + (2 * sangre) + this.pvObj.lomoLibroSobrecubierta);
this.pvObj.altoForma += parseFloat(2 * sangre);
}
// Update labels
$(pvName + '_solapas').text(anchoSolapaSobrecubierta);
anchoSolapaSobrecubierta != 0 ? $('.pv-solapas').show() : $('.pv-solapas').hide();
$(pvName + '_forma').text(this.pvObj.anchoForma + "x" + this.pvObj.altoForma);
break;
case 'faja':
let sangreFaja = parseFloat(5); // mm
let anchoSolapaFaja = $('#faja').is(':checked') ? parseFloat($('#faja_solapas_ancho').val()) : parseFloat(0); // mm
if (_isTapaDura) {
let anchoPliegue = parseFloat(7); // mm
this.pvObj.anchoForma = ((2 * this.pvObj.anchoLibro) + (2 * anchoPliegue) + (2 * (anchoSolapaFaja + this.pvObj.offsetSolapa)) + (2 * sangreFaja) + this.pvObj.lomoLibroSobrecubierta);
this.pvObj.altoForma += parseFloat(2 * sangreFaja);
} else {
this.pvObj.anchoForma = ((2 * this.pvObj.anchoLibro) + (2 * (anchoSolapaFaja + this.pvObj.offsetSolapa)) + (2 * sangreFaja) + this.pvObj.lomoLibroSobrecubierta);
this.pvObj.altoForma = parseFloat(this.pvObj.altoForma) + parseFloat(2 * sangreFaja);
}
// Update labels
$(pvName + '_solapas').text(anchoSolapaFaja);
anchoSolapaFaja != 0 ? $('.pv-solapas').show() : $('.pv-solapas').hide();
$(pvName + '_forma').text(this.pvObj.anchoForma + "x" + this.pvObj.altoForma);
break;
case 'ec':
$(pvName + '_pg').attr("href", $(pvName + '_pg').attr('sk-url') + rowData.papel);
$(pvName + '_pi').attr("href", $(pvName + '_pi').attr('sk-url') + rowData.papel_impresion_id);
$(pvName + '_mi').attr("href", $(pvName + '_mi').attr('sk-url') + rowData.maquina_id);
$('#pv_ec_lomo').text(parseFloat(this.pvObj.lomoLibro).toFixed(1));
break;
case 'rot_bn':
case 'rot_color':
// Conditional assignements depending on rotation of the printing shape
if (this.pvObj.orientacionFormas != 'h') {
let auxReg = this.pvObj.altoForma;
this.pvObj.altoForma = this.pvObj.anchoForma;
this.pvObj.anchoForma = auxReg;
}
$(pvName + '_forma').text(this.pvObj.anchoForma + "x" + this.pvObj.altoForma);
this.pvObj.altoClick = isNaN(parseFloat(rowData.alto_click)) ? 305 : parseFloat(rowData.alto_click);
this.pvObj.nFormasH = Math.trunc(this.pvObj.anchoImpresion / this.pvObj.anchoForma);
this.pvObj.nFormasV = Math.trunc((this.pvObj.altoImpresion - 3) / (this.pvObj.altoForma + 4));
break;
case 'bn':
case 'bnhq':
case 'color':
case 'colorhq':
// Conditional assignements depending on rotation of the printing shape
if (this.pvObj.orientacionFormas != 'h') {
let auxReg = this.pvObj.altoForma;
this.pvObj.altoForma = this.pvObj.anchoForma;
this.pvObj.anchoForma = auxReg;
}
$(pvName + '_forma').text(this.pvObj.anchoForma + "x" + this.pvObj.altoForma);
break;
case 'guardas':
// Fresado TD y Cosido TD
if (this.pvObj.tipoImpresion === 1 || this.pvObj.tipoImpresion === 3) {
this.pvObj.anchoForma = 2 * this.pvObj.anchoLibro;
}
// Fresado TB y Cosido TB
else if (this.pvObj.tipoImpresion === 2 || this.pvObj.tipoImpresion === 4) {
this.pvObj.anchoForma = this.pvObj.anchoLibro;
}
// Espiral TD y TB, Wire-o TD y TB
else if (this.pvObj.tipoImpresion === 5 || this.pvObj.tipoImpresion === 6 ||
this.pvObj.tipoImpresion === 7 || this.pvObj.tipoImpresion === 8) {
this.pvObj.anchoForma = this.pvObj.anchoLibro;
} else {
// ?
}
// Conditional assignements depending on rotation of the printing shape
if (this.pvObj.orientacionFormas == 'v') {
let auxReg = this.pvObj.altoForma;
this.pvObj.altoForma = this.pvObj.anchoForma;
this.pvObj.anchoForma = auxReg;
}
$(pvName + '_forma').text(this.pvObj.anchoForma + "x" + this.pvObj.altoForma);
break;
default:
break;
}
}
previewInteriorPlana(lpTagName, isCosido, isTapaDura) {
// Local parameters
let guardaV = 0;
let guardaH = 0;
let styleText = { size: 12, family: 'Public Sans' };
// Get the preview Object parameters
this.getObjetoLP(lpTagName, isCosido, isTapaDura);
// Configuracion de las guardas
// Guarda vertical
if (this.pvObj.nFormasV > 1) {
guardaV = 3;
}
// Guarda horizontal
if (this.pvObj.nFormasH > 1) {
guardaH = 3;
}
// Constantes relativas a las dimnesiones de la forma
let LVo = this.pvObj.altoForma / 2;
let LHo = this.pvObj.anchoForma / 2;
// Clear the canvas element
$('#pv_' + this.pvObj.idIndex + '_shape').empty();
// Get the element for placing the graphical elements
var divPlana = document.getElementById('pv_' + this.pvObj.idIndex + '_shape');
var _pvPlana = new Two({ fitted: true }).appendTo(divPlana);
this.previews.push(_pvPlana)
// Calculate the center of the canvas element
var origenPlana = new Two.Vector(_pvPlana.width / 2, _pvPlana.height / 2);
var areaMaquinaPlana = _pvPlana.makeRectangle(
origenPlana.x,
origenPlana.y,
this.pvObj.anchoMaquina,
this.pvObj.altoMaquina);
areaMaquinaPlana.stroke = 'black';
areaMaquinaPlana.fill = '#E69F6E';
areaMaquinaPlana.linewidth = 1;
var areaImpresionPlana = _pvPlana.makeRectangle(
origenPlana.x,
origenPlana.y,
this.pvObj.anchoImpresion,
this.pvObj.altoImpresion);
areaImpresionPlana.stroke = 'red';
areaImpresionPlana.fill = '#FCEAF1';
areaImpresionPlana.linewidth = 1;
var formas = [];
for (let iV = 0; iV < this.pvObj.nFormasV; iV++) {
for (let iH = 0; iH < this.pvObj.nFormasH; iH++) {
let _offsetX = ((((this.pvObj.nFormasH - 1) - 2 * iH) * LHo) + (((this.pvObj.nFormasH - 1) / 2 - iH) * guardaH));
let _offsetY = ((((this.pvObj.nFormasV - 1) - 2 * iV) * LVo) + (((this.pvObj.nFormasV - 1) / 2 - iV) * guardaV));
formas[iV + iH] = _pvPlana.makeRectangle(
origenPlana.x + _offsetX,
origenPlana.y + _offsetY,
this.pvObj.anchoForma,
this.pvObj.altoForma);
formas[iV + iH].stroke = 'grey';
formas[iV + iH].fill = '#F4F8F2';
formas[iV + iH].linewidth = 1;
// Texts
_pvPlana.makeText(this.pvObj.altoForma, (origenPlana.x + _offsetX) + (this.pvObj.anchoForma / 2 - 25), (origenPlana.y + _offsetY), styleText);
_pvPlana.makeText(this.pvObj.anchoForma, (origenPlana.x + _offsetX), (origenPlana.y + _offsetY) + (this.pvObj.altoForma / 2 - 15), styleText);
}
}
_pvPlana.update();
this.actualPreview = _pvPlana
this.actualPreviewCallback = this.previewInteriorPlana
this.setViewBoxToPreview()
}
previewRotativa(lpTagName, isCosido, isTapaDura) {
// Local parameters
let styleText = { size: 12, family: 'Public Sans' };
let margenTop = 3;
let guardaV = 0;
let guardaH = 0;
// Get the preview Object parameters
this.getObjetoLP(lpTagName, isCosido, isTapaDura);
// Calculos
// Configuracion de las guardas
// Guarda vertical
if (this.pvObj.nFormasV > 1) {
guardaV = 3;
}
// Guarda horizontal
if (this.pvObj.nFormasH > 1) {
guardaH = 3;
}
// Constantes relativas al libro
let LVo = this.pvObj.altoForma / 2;
let LHo = this.pvObj.anchoForma / 2;
// offset Y
let nTopForms = (this.pvObj.altoImpresion / 2.0 - margenTop) / (LVo + guardaV);
const int_part = Math.trunc(nTopForms);
const float_part = Number((nTopForms - int_part).toFixed(2));
let yOffset = LVo * float_part;
//console.log(yOffset);
// Clear the canvas element
$('#pv_' + this.pvObj.idIndex + '_shape').empty();
// Get the element for placing the graphical elements
var divRotativa = document.getElementById('pv_' + this.pvObj.idIndex + '_shape');
var _pvRotativa = new Two({ fitted: true }).appendTo(divRotativa);
this.previews.push(_pvRotativa)
// Calculate the center of the canvas element
var origenRotativa = new Two.Vector(_pvRotativa.width / 2, _pvRotativa.height / 2);
var areaMaquinaRotativa = _pvRotativa.makeRectangle(
origenRotativa.x,
origenRotativa.y,
this.pvObj.anchoMaquina,
this.pvObj.altoMaquina);
areaMaquinaRotativa.stroke = 'black';
areaMaquinaRotativa.fill = '#E69F6E';
areaMaquinaRotativa.linewidth = 1;
var areaImpresionRotativa = _pvRotativa.makeRectangle(
origenRotativa.x,
origenRotativa.y,
this.pvObj.anchoImpresion,
this.pvObj.altoImpresion);
areaImpresionRotativa.stroke = 'red';
areaImpresionRotativa.fill = '#FCEAF1';
areaImpresionRotativa.linewidth = 1;
var areaClickRotativa = _pvRotativa.makeRectangle(
origenRotativa.x,
origenRotativa.y - (this.pvObj.altoImpresion / 2 - this.pvObj.altoClick / 2),
this.pvObj.anchoImpresion - 10,
this.pvObj.altoClick);
areaClickRotativa.stroke = 'blue';
//areaClickRotativa.fill = '#FCEAF1';
areaClickRotativa.linewidth = 2;
var formas = [];
for (let iV = 0; iV < this.pvObj.nFormasV; iV++) {
for (let iH = 0; iH < this.pvObj.nFormasH; iH++) {
let _offsetX = ((((this.pvObj.nFormasH - 1) - 2 * iH) * LHo) + (((this.pvObj.nFormasH - 1) / 2 - iH) * guardaH));
let _offsetY = ((((this.pvObj.nFormasV - 1) - 2 * iV) * LVo) + (((this.pvObj.nFormasV - 1) / 2 - iV) * guardaV));
formas[iV + iH] = _pvRotativa.makeRectangle(
origenRotativa.x + _offsetX,
(origenRotativa.y - yOffset) + _offsetY,
this.pvObj.anchoForma,
this.pvObj.altoForma);
formas[iV + iH].stroke = 'grey';
formas[iV + iH].fill = '#F4F8F2';
formas[iV + iH].linewidth = 1;
// Texts
_pvRotativa.makeText(this.pvObj.altoForma, (origenRotativa.x + _offsetX) + (this.pvObj.anchoForma / 2 - 25), ((origenRotativa.y - yOffset) + _offsetY), styleText);
_pvRotativa.makeText(this.pvObj.anchoForma, (origenRotativa.x + _offsetX), ((origenRotativa.y - yOffset) + _offsetY) + (this.pvObj.altoForma / 2 - 15), styleText);
}
}
_pvRotativa.update();
this.actualPreview = _pvRotativa
this.actualPreviewCallback = this.previewRotativa
this.setViewBoxToPreview()
}
previewEsquemaCubierta() {
if (this.tipoLibro.includes("cosido") || this.tipoLibro.includes("fresado")) {
if (this.tipoTapa.toLowerCase().includes("dura"))
this.#portadaTapaDura();
else {
this.#portadaTapaBlanda();
}
}
else if (this.tipoLibro.includes("espiral") || this.tipoLibro.includes("wire-o")) {
if (this.tipoTapa.toLowerCase().includes("dura"))
this.#portadaEspiral(true);
else
this.#portadaEspiral(false);
}
else if (this.tipoLibro.includes("grapado")) {
this.#portadaGrapado();
}
}
#portadaTapaBlanda() {
// Variables locales
let altoLibro, anchoLibro, lomoLibro, anchoCubierta, altoSangrado, anchoSangrado, anchoSolapa;
if (typeof this.lomo === 'function') {
this.lomo = this.lomo();
this.ancho = this.ancho();
this.alto = this.alto();
this.lomoRedondo = this.lomoRedondo();
}
let styleCotas = { size: 12, family: 'Public Sans' };
let sangradoTexto = "Sangrado 5 mm";
let sangradoValor = parseFloat(5); // mm
let offsetSolapaValor = parseFloat(0); // mm
// Definicion de los parametros del Esquema de Cubierta (EC)
if (this.solapa == 0) {
if (this.size == "thumbnail") {
anchoSangrado = 350; // px
altoSangrado = (anchoSangrado * 0.647 > 300) ? 300 : anchoSangrado * 0.647; // px
} else {
anchoSangrado = 800; // px
altoSangrado = (anchoSangrado * 0.6 > 650) ? 650 : anchoSangrado * 0.6; // px
}
altoLibro = altoSangrado * 0.97;
anchoLibro = anchoSangrado * 0.419;
anchoSolapa = 0;
lomoLibro = anchoSangrado * 0.133;
anchoCubierta = (2 * anchoLibro) + (2 * anchoSolapa) + lomoLibro;
} else {
if (this.size == "thumbnail") {
anchoSangrado = 350; // px
altoSangrado = (anchoSangrado * 0.647 > 300) ? 300 : anchoSangrado * 0.647; // px
} else {
anchoSangrado = 800; // px
altoSangrado = (anchoSangrado * 0.6 > 650) ? 650 : anchoSangrado * 0.6; // px
}
altoLibro = altoSangrado * 0.95;
anchoLibro = anchoSangrado * 0.28;
anchoSolapa = anchoSangrado * 0.163;
lomoLibro = anchoSangrado * 0.09;
anchoCubierta = (2 * anchoLibro) + (2 * anchoSolapa) + lomoLibro;
}
// Clear the canvas element
this.container.empty();
// Get the element for placing the graphical elements
var previewEC = new Two({ fitted: true }).appendTo(this.container[0]);
this.previews.push(previewEC)
// Calculate the center of the canvas element
var origenEC = new Two.Vector(previewEC.width / 2, previewEC.height / 2);
var sangrado = previewEC.makeRectangle(
origenEC.x,
origenEC.y,
anchoSangrado,
altoSangrado
);
sangrado.stroke = 'black';
sangrado.dashes = [5, 5];
sangrado.fill = '#FCEAF1';
sangrado.linewidth = 1;
if (this.solapa != 0) {
var solapas = previewEC.makeRectangle(
origenEC.x,
origenEC.y,
anchoCubierta,
altoLibro);
solapas.stroke = 'black';
solapas.linewidth = 1;
// Cotas Solapas
if (this.size != "thumbnail") {
var cotaSolapa2 = previewEC.makeDobleArrow(
origenEC.x - anchoCubierta / 2,
origenEC.y - (altoLibro / 3),
origenEC.x - anchoLibro - lomoLibro / 2,
origenEC.y - (altoLibro / 3),
10);
cotaSolapa2.linewidth = 2;
var cotaSolapa1 = previewEC.makeDobleArrow(
origenEC.x + anchoCubierta / 2,
origenEC.y - (altoLibro / 3),
origenEC.x + anchoLibro + lomoLibro / 2,
origenEC.y - (altoLibro / 3),
10);
cotaSolapa1.linewidth = 2;
// Textos Solapas
let stylesSolapa = { size: 18, family: 'Public Sans' };
previewEC.makeText("Solapa 1", origenEC.x + anchoLibro + (lomoLibro + anchoSolapa) / 2, origenEC.y, stylesSolapa);
previewEC.makeText("Solapa 2", origenEC.x - anchoLibro - (lomoLibro + anchoSolapa) / 2, origenEC.y, stylesSolapa);
// Textos Cotas Solapas
previewEC.makeText(this.solapa.toFixed(1) + " mm", origenEC.x - anchoLibro - (lomoLibro + anchoSolapa) / 2, origenEC.y - (altoLibro / 3) + 15, styleCotas);
previewEC.makeText(this.solapa.toFixed(1) + " mm", origenEC.x + anchoLibro + (lomoLibro + anchoSolapa) / 2, origenEC.y - (altoLibro / 3) + 15, styleCotas);
}
}
var libro = previewEC.makeRectangle(
origenEC.x,
origenEC.y,
((2 * anchoLibro) + lomoLibro),
altoLibro);
libro.stroke = 'black';
libro.linewidth = 1;
var lomo = previewEC.makeRectangle(
origenEC.x,
origenEC.y,
lomoLibro,
altoLibro);
lomo.stroke = 'black';
lomo.fill = '#F4F8F2';
lomo.linewidth = 1;
// Cotas y textos
if (this.size != "thumbnail") {
// Cotas:
var cotaAnchoCubierta = previewEC.makeDobleArrow(
origenEC.x - (anchoSangrado / 2),
origenEC.y + (altoLibro / 2) + 35,
origenEC.x + (anchoSangrado / 2),
origenEC.y + (altoLibro / 2) + 35,
10);
cotaAnchoCubierta.linewidth = 2;
var cotaAltoCubierta = previewEC.makeDobleArrow(
origenEC.x + (anchoCubierta / 2) + 35,
origenEC.y + (altoSangrado / 2),
origenEC.x + (anchoCubierta / 2) + 35,
origenEC.y - (altoSangrado / 2),
10);
cotaAltoCubierta.linewidth = 2;
var cotaAltoLibro = previewEC.makeDobleArrow(
origenEC.x + (lomoLibro / 2) + 35,
origenEC.y + (altoLibro / 2),
origenEC.x + (lomoLibro / 2) + 35,
origenEC.y - (altoLibro / 2),
10);
cotaAltoLibro.linewidth = 2;
var cotaLomo = previewEC.makeDobleArrow(
origenEC.x - (lomoLibro / 2),
origenEC.y + (altoLibro / 3),
origenEC.x + (lomoLibro / 2),
origenEC.y + (altoLibro / 3),
10);
cotaLomo.linewidth = 2;
var cotaContraportada = previewEC.makeDobleArrow(
origenEC.x - (lomoLibro / 2 + anchoLibro),
origenEC.y - (altoLibro / 3),
origenEC.x - (lomoLibro / 2),
origenEC.y - (altoLibro / 3),
10);
cotaContraportada.linewidth = 2;
var cotaPortada = previewEC.makeDobleArrow(
origenEC.x + (lomoLibro / 2),
origenEC.y - (altoLibro / 3),
origenEC.x + (lomoLibro / 2 + anchoLibro),
origenEC.y - (altoLibro / 3),
10);
cotaPortada.linewidth = 2;
// Textos:
// Titulos generales
let stylesEC = { size: 22, weight: 'bold', family: 'Public Sans' };
previewEC.makeText("Portada", origenEC.x + (lomoLibro + anchoLibro) / 2, origenEC.y, stylesEC);
previewEC.makeText("Contraportada", origenEC.x - (lomoLibro + anchoLibro) / 2, origenEC.y, stylesEC);
let a = previewEC.makeText("Lomo", origenEC.x, origenEC.y, stylesEC).rotation = -Math.PI / 2;
// Sangrados
let styleSangrado = { size: 10, family: 'Public Sans', style: 'italic', fill: 'red' };
previewEC.makeText(sangradoTexto, origenEC.x, origenEC.y + (altoLibro / 2 + 20), styleSangrado);
previewEC.makeText(sangradoTexto, origenEC.x, origenEC.y - (altoLibro / 2 + 20), styleSangrado);
previewEC.makeText(sangradoTexto, origenEC.x + (lomoLibro / 2 + anchoLibro + anchoSolapa + 20), origenEC.y, styleSangrado).rotation = -Math.PI / 2;
previewEC.makeText(sangradoTexto, origenEC.x - (lomoLibro / 2 + anchoLibro + anchoSolapa + 20), origenEC.y, styleSangrado).rotation = -Math.PI / 2;
// Cotas
let lomoTotal = 0;
if (typeof this.lomo === 'function') {
lomoTotal = this.lomo().toFixed(1);
} else {
lomoTotal = this.lomo.toFixed(1);
}
previewEC.makeText(lomoTotal + " mm", origenEC.x, origenEC.y + (altoLibro / 3) + 15, styleCotas);
previewEC.makeText((this.ancho + this.offsetSolapa).toFixed(1) + " mm", origenEC.x - (lomoLibro / 2 + anchoLibro / 2), origenEC.y - (altoLibro / 3) + 15, styleCotas);
previewEC.makeText((this.ancho + this.offsetSolapa).toFixed(1) + " mm", origenEC.x + (lomoLibro / 2 + anchoLibro / 2), origenEC.y - (altoLibro / 3) + 15, styleCotas);
previewEC.makeText(this.alto.toFixed(1) + " mm", origenEC.x + (lomoLibro / 2) + 25, origenEC.y, styleCotas).rotation = -Math.PI / 2;
previewEC.makeText((this.alto + (2 * sangradoValor)).toFixed(1) + " mm", origenEC.x + (lomoLibro / 2 + anchoLibro + anchoSolapa) + 50, origenEC.y, styleCotas).rotation = -Math.PI / 2;
previewEC.makeText((((2 * this.ancho) + (2 * (this.solapa + this.offsetSolapa)) + parseFloat(lomoTotal) + (2 * sangradoValor)).toFixed(1)) + " mm",
origenEC.x,
origenEC.y + (altoLibro / 2) + 50,
styleCotas);
}
previewEC.update();
this.actualPreview = previewEC
this.actualPreviewCallback = this.#portadaTapaBlanda
this.setViewBoxToPreview()
}
#portadaTapaDura() {
// Variables locales
let altoLibro, anchoLibro, lomoLibro, anchoCubierta, altoSangrado, anchoSangrado;
if (typeof this.lomo === 'function') {
this.lomo = this.lomo();
this.ancho = this.ancho();
this.alto = this.alto();
this.lomoRedondo = this.lomoRedondo();
}
let styleCotas = { size: 12, family: 'Public Sans' };
let sangradoTexto = "Sangrado 20 mm";
let sangradoValor = parseFloat(20); // mm
if (this.ancho >= 210 || this.alto >= 267) {
sangradoValor = parseFloat(10); // mm
sangradoTexto = "Sangrado 10 mm";
}
let anchoPliegue = parseFloat(7); // mm cajo
let altoPliegue = parseFloat(7); // mm
let anchoCarton = parseFloat(6); // mm
if (this.lomoRedondo)
anchoCarton += parseFloat(6); // mm
// Definicion de los parametros del Esquema de Cubierta (EC)
if (this.size == "thumbnail") {
anchoSangrado = 350; // px
altoSangrado = (anchoSangrado * 0.647 > 300) ? 300 : anchoSangrado * 0.647; // px
} else {
anchoSangrado = 800; // px
altoSangrado = (anchoSangrado * 0.6 > 650) ? 650 : anchoSangrado * 0.6; // px
}
altoLibro = altoSangrado * 0.88;
anchoLibro = anchoSangrado * 0.39;
lomoLibro = anchoSangrado * 0.133;
anchoCubierta = (2 * anchoLibro) + lomoLibro;
// Clear the canvas element
this.container.empty();
// Get the element for placing the graphical elements
var previewEC = new Two({ fitted: true }).appendTo($(this.container)[0]);
this.previews.push(previewEC)
// Calculate the center of the canvas element
var origenEC = new Two.Vector(previewEC.width / 2, previewEC.height / 2);
var sangrado = previewEC.makeRectangle(
origenEC.x,
origenEC.y,
anchoSangrado,
altoSangrado
);
sangrado.stroke = 'black';
sangrado.dashes = [5, 5];
sangrado.fill = '#FCEAF1';
sangrado.linewidth = 1;
var libro = previewEC.makeRectangle(
origenEC.x,
origenEC.y,
((2 * anchoLibro) + lomoLibro),
altoLibro);
libro.stroke = 'black';
libro.linewidth = 1;
var lomo = previewEC.makeRectangle(
origenEC.x,
origenEC.y,
lomoLibro,
altoLibro);
lomo.stroke = 'black';
lomo.fill = '#F4F8F2';
lomo.linewidth = 1;
// Cotas y textos
if (this.size != "thumbnail") {
// Cotas:
var cotaAnchoCubierta = previewEC.makeDobleArrow(
origenEC.x - (anchoSangrado / 2),
origenEC.y + (altoLibro / 2) + 35,
origenEC.x + (anchoSangrado / 2),
origenEC.y + (altoLibro / 2) + 35,
10);
cotaAnchoCubierta.linewidth = 2;
var cotaAltoCubierta = previewEC.makeDobleArrow(
origenEC.x + (anchoCubierta / 2) + 40,
origenEC.y + (altoSangrado / 2),
origenEC.x + (anchoCubierta / 2) + 40,
origenEC.y - (altoSangrado / 2),
10);
cotaAltoCubierta.linewidth = 2;
var cotaAltoLibro = previewEC.makeDobleArrow(
origenEC.x + (lomoLibro / 2) + 35,
origenEC.y + (altoLibro / 2),
origenEC.x + (lomoLibro / 2) + 35,
origenEC.y - (altoLibro / 2),
10);
cotaAltoLibro.linewidth = 2;
var cotaLomo = previewEC.makeDobleArrow(
origenEC.x - (lomoLibro / 2),
origenEC.y + (altoLibro / 3),
origenEC.x + (lomoLibro / 2),
origenEC.y + (altoLibro / 3),
10);
cotaLomo.linewidth = 2;
var cotaContraportada = previewEC.makeDobleArrow(
origenEC.x - (lomoLibro / 2 + anchoLibro),
origenEC.y - (altoLibro / 3),
origenEC.x - (lomoLibro / 2),
origenEC.y - (altoLibro / 3),
10);
cotaContraportada.linewidth = 2;
var cotaPortada = previewEC.makeDobleArrow(
origenEC.x + (lomoLibro / 2),
origenEC.y - (altoLibro / 3),
origenEC.x + (lomoLibro / 2 + anchoLibro),
origenEC.y - (altoLibro / 3),
10);
cotaPortada.linewidth = 2;
// Textos:
// Titulos generales
let stylesEC = { size: 22, weight: 'bold', family: 'Public Sans' };
previewEC.makeText("Portada", origenEC.x + (lomoLibro + anchoLibro) / 2, origenEC.y, stylesEC);
previewEC.makeText("Contraportada", origenEC.x - (lomoLibro + anchoLibro) / 2, origenEC.y, stylesEC);
previewEC.makeText("Lomo", origenEC.x, origenEC.y, stylesEC).rotation = -Math.PI / 2;
// Sangrados
let styleSangrado = { size: 10, family: 'Public Sans', style: 'italic', fill: 'red' };
previewEC.makeText(sangradoTexto, origenEC.x, origenEC.y + (altoLibro / 2 + 13), styleSangrado);
previewEC.makeText(sangradoTexto, origenEC.x, origenEC.y - (altoLibro / 2 + 13), styleSangrado);
previewEC.makeText(sangradoTexto, origenEC.x + (lomoLibro / 2 + anchoLibro + 13), origenEC.y, styleSangrado).rotation = -Math.PI / 2;
previewEC.makeText(sangradoTexto, origenEC.x - (lomoLibro / 2 + anchoLibro + 13), origenEC.y, styleSangrado).rotation = -Math.PI / 2;
// Cotas
previewEC.makeText((this.lomo + anchoCarton).toFixed(1) + " mm", origenEC.x, origenEC.y + (altoLibro / 3) + 15, styleCotas);
previewEC.makeText((this.ancho + anchoPliegue).toFixed(1) + " mm", origenEC.x - (lomoLibro / 2 + anchoLibro / 2), origenEC.y - (altoLibro / 3) + 15, styleCotas);
previewEC.makeText((this.ancho + anchoPliegue).toFixed(1) + " mm", origenEC.x + (lomoLibro / 2 + anchoLibro / 2), origenEC.y - (altoLibro / 3) + 15, styleCotas);
previewEC.makeText((this.alto + altoPliegue).toFixed(1) + " mm", origenEC.x + (lomoLibro / 2) + 50, origenEC.y, styleCotas).rotation = -Math.PI / 2;
previewEC.makeText((this.alto + (2 * sangradoValor) + altoPliegue).toFixed(1) + " mm", origenEC.x + (lomoLibro / 2 + anchoLibro) + 55, origenEC.y, styleCotas).rotation = -Math.PI / 2;
previewEC.makeText((2 * this.ancho) + this.lomo + (2 * sangradoValor) + +(2 * anchoPliegue) + anchoCarton + " mm",
origenEC.x,
origenEC.y + (altoLibro / 2) + 50,
styleCotas);
}
previewEC.update();
this.actualPreview = previewEC
this.actualPreviewCallback = this.#portadaTapaBlanda
this.setViewBoxToPreview()
}
#portadaEspiral(isTapaDura = false) {
// Variables locales
let altoLibro, anchoLibro, anchoSolapa, anchoCalle, altoSangrado, anchoSangrado, offsetCubierta, anchoCubierta;
if (typeof this.lomo === 'function') {
this.lomo = this.lomo();
this.ancho = this.ancho();
this.alto = this.alto();
this.lomoRedondo = this.lomoRedondo();
this.solapa = this.solapa();
}
let styleCotas = { size: 12, family: 'Public Sans' };
let sangradoTexto = (isTapaDura) ? "Sangrado 20 mm" : "Sangrado 5 mm";
let sangradoValor = (isTapaDura) ? parseFloat(20) : parseFloat(5); // mm
// Definicion de los parametros del Esquema de Cubierta (EC)
if ((this.solapa !== 0) && (!isTapaDura)) {
if (this.size == "thumbnail") {
anchoSangrado = 350; // px
altoSangrado = (anchoSangrado * 0.647 > 300) ? 300 : anchoSangrado * 0.647; // px
} else {
anchoSangrado = 800; // px
altoSangrado = (anchoSangrado * 0.6 > 650) ? 650 : anchoSangrado * 0.6; // px
}
altoLibro = altoSangrado * 0.95;
anchoLibro = anchoSangrado * 0.28;
anchoCalle = anchoSangrado * 0.02;
anchoSolapa = anchoSangrado * 0.163;
sangrado = anchoSangrado * 0.03;
anchoCubierta = 2 * (anchoLibro + anchoSolapa + sangrado) + anchoCalle;
offsetCubierta = anchoLibro / 2 + anchoCalle / 2 + anchoSolapa / 2 + sangrado;
} else {
if (this.size == "thumbnail") {
anchoSangrado = 350; // px
altoSangrado = (anchoSangrado * 0.647 > 300) ? 300 : anchoSangrado * 0.647; // px
} else {
anchoSangrado = 800; // px
altoSangrado = (anchoSangrado * 0.6 > 650) ? 650 : anchoSangrado * 0.6; // px
}
altoLibro = (isTapaDura) ? altoSangrado * 0.88 : altoSangrado * 0.9;
anchoLibro = (isTapaDura) ? anchoSangrado * 0.39 : anchoSangrado * 0.44;
anchoCalle = anchoSangrado * 0.02;
anchoSolapa = 0;
anchoCubierta = (2 * anchoLibro) + (2 * anchoSolapa) + anchoCalle;
offsetCubierta = anchoLibro / 2 + anchoCalle / 2 + anchoSolapa + sangradoValor;
}
var previewEC = new Two({ fitted: true }).appendTo(this.container[0]);
this.previews.push(previewEC)
// Calculate the center of the canvas element
var origenEC = new Two.Vector(previewEC.width / 2, previewEC.height / 2);
var sangrado = previewEC.makeRectangle(
origenEC.x,
origenEC.y,
anchoSangrado,
altoSangrado
);
sangrado.stroke = 'black';
sangrado.dashes = [5, 5];
sangrado.fill = '#FCEAF1';
sangrado.linewidth = 1;
if ((this.solapa != 0) && (!isTapaDura)) {
var solapa1 = previewEC.makeRectangle(
origenEC.x + (anchoLibro + anchoCalle / 2 + anchoSolapa / 2 + sangradoValor),
origenEC.y,
anchoSolapa,
altoLibro);
solapa1.stroke = 'black';
solapa1.linewidth = 1;
var solapa2 = previewEC.makeRectangle(
origenEC.x - (anchoLibro + anchoCalle / 2 + anchoSolapa / 2 + sangradoValor),
origenEC.y,
anchoSolapa,
altoLibro);
solapa2.stroke = 'black';
solapa2.linewidth = 1;
// Cotas y textos
if (this.size != "thumbnail") {
// Cotas
var cotaSolapa2 = previewEC.makeDobleArrow(
origenEC.x - (anchoCalle / 2 + sangradoValor + anchoLibro + anchoSolapa),
origenEC.y - (altoLibro / 3),
origenEC.x - (anchoLibro + sangradoValor + anchoCalle / 2),
origenEC.y - (altoLibro / 3),
10);
cotaSolapa2.linewidth = 2;
var cotaSolapa1 = previewEC.makeDobleArrow(
origenEC.x + (anchoCalle / 2 + sangradoValor + anchoLibro + anchoSolapa),
origenEC.y - (altoLibro / 3),
origenEC.x + (anchoLibro + sangradoValor + anchoCalle / 2),
origenEC.y - (altoLibro / 3),
10);
cotaSolapa1.linewidth = 2;
// Textos Solapas
let stylesSolapa = { size: 18, family: 'Public Sans' };
previewEC.makeText("Solapa 1", origenEC.x + anchoLibro + (anchoCalle + anchoSolapa) / 2, origenEC.y, stylesSolapa);
previewEC.makeText("Solapa 2", origenEC.x - anchoLibro - (anchoCalle + anchoSolapa) / 2, origenEC.y, stylesSolapa);
// Textos Cotas Solapas
previewEC.makeText((this.solapa).toFixed(1) + " mm", origenEC.x - anchoLibro - (anchoCalle + anchoSolapa) / 2, origenEC.y - (altoLibro / 3) + 15, styleCotas);
previewEC.makeText(this.solapa.toFixed(1) + " mm", origenEC.x + anchoLibro + (anchoCalle + anchoSolapa) / 2, origenEC.y - (altoLibro / 3) + 15, styleCotas);
}
}
var portada = previewEC.makeRectangle(
origenEC.x + (anchoLibro / 2 + anchoCalle / 2 + sangradoValor),
origenEC.y,
anchoLibro,
altoLibro);
portada.stroke = 'black';
portada.linewidth = 1;
var contraportada = previewEC.makeRectangle(
origenEC.x - (anchoLibro / 2 + anchoCalle / 2 + sangradoValor),
origenEC.y,
anchoLibro,
altoLibro);
contraportada.stroke = 'black';
contraportada.linewidth = 1;
var calle = previewEC.makeRectangle(
origenEC.x,
origenEC.y,
anchoCalle,
altoSangrado);
calle.stroke = 'black';
calle.dashes = [2, 5];
calle.fill = '#F4F8F2';
calle.linewidth = 1;
// Cotas y textos
if (this.size != "thumbnail") {
// Cotas:
var cotaAnchoCubierta = previewEC.makeDobleArrow(
origenEC.x - (anchoSangrado / 2),
origenEC.y + (altoLibro / 2) + 35,
origenEC.x + (anchoSangrado / 2),
origenEC.y + (altoLibro / 2) + 35,
10);
cotaAnchoCubierta.linewidth = 2;
var cotaAltoCubierta = previewEC.makeDobleArrow(
origenEC.x + (anchoSangrado / 2) + 15,
origenEC.y + (altoSangrado / 2),
origenEC.x + (anchoSangrado / 2) + 15,
origenEC.y - (altoSangrado / 2),
10);
cotaAltoCubierta.linewidth = 2;
var cotaAltoLibro = previewEC.makeDobleArrow(
origenEC.x + (anchoCalle / 2) + 35,
origenEC.y + (altoLibro / 2),
origenEC.x + (anchoCalle / 2) + 35,
origenEC.y - (altoLibro / 2),
10);
cotaAltoLibro.linewidth = 2;
var cotaContraportada = previewEC.makeDobleArrow(
origenEC.x - (anchoCalle / 2 + anchoLibro + sangradoValor),
origenEC.y - (altoLibro / 3),
origenEC.x - ((anchoCalle / 2) + sangradoValor),
origenEC.y - (altoLibro / 3),
10);
cotaContraportada.linewidth = 2;
var cotaPortada = previewEC.makeDobleArrow(
origenEC.x + ((anchoCalle / 2) + sangradoValor),
origenEC.y - (altoLibro / 3),
origenEC.x + (anchoCalle / 2 + anchoLibro + sangradoValor),
origenEC.y - (altoLibro / 3),
10);
cotaPortada.linewidth = 2;
// Textos:
// Titulos generales
let stylesEC = { size: 22, weight: 'bold', family: 'Public Sans' };
previewEC.makeText("Portada",
origenEC.x + anchoLibro / 2 + anchoCalle / 2 + sangradoValor + 15,
origenEC.y,
stylesEC
);
previewEC.makeText("Contraportada",
origenEC.x - (anchoLibro / 2 + anchoCalle / 2 + sangradoValor),
origenEC.y,
stylesEC
);
// Sangrados
let styleSangrado = { size: 10, family: 'Public Sans', style: 'italic', fill: 'red' };
previewEC.makeText(sangradoTexto, origenEC.x + offsetCubierta, origenEC.y + (altoLibro / 2 + 13), styleSangrado);
previewEC.makeText(sangradoTexto, origenEC.x + offsetCubierta, origenEC.y - (altoLibro / 2 + 13), styleSangrado);
previewEC.makeText(sangradoTexto, origenEC.x - offsetCubierta, origenEC.y + (altoLibro / 2 + 13), styleSangrado);
previewEC.makeText(sangradoTexto, origenEC.x - offsetCubierta, origenEC.y - (altoLibro / 2 + 13), styleSangrado);
previewEC.makeText(sangradoTexto, origenEC.x + (anchoSangrado / 2) - 20, origenEC.y, styleSangrado).rotation = -Math.PI / 2;
previewEC.makeText(sangradoTexto, origenEC.x - (anchoSangrado / 2) + 20, origenEC.y, styleSangrado).rotation = -Math.PI / 2;
// Cotas
previewEC.makeText(this.ancho.toFixed(1) + " mm", origenEC.x - (offsetCubierta - anchoSolapa / 2), origenEC.y - (altoLibro / 3) + 15, styleCotas);
previewEC.makeText(this.ancho.toFixed(1) + " mm", origenEC.x + (offsetCubierta - anchoSolapa / 2), origenEC.y - (altoLibro / 3) + 15, styleCotas);
previewEC.makeText(this.alto.toFixed(1) + " mm", origenEC.x + (anchoCalle / 2) + 50, origenEC.y, styleCotas).rotation = -Math.PI / 2;
previewEC.makeText((this.alto + (2 * sangradoValor)).toFixed(1) + " mm",
origenEC.x + (anchoSangrado / 2) + 30,
origenEC.y,
styleCotas
).rotation = -Math.PI / 2;
previewEC.makeText(((2 * this.ancho) + this.lomo + (2 * sangradoValor)).toFixed(1) + " mm",
origenEC.x,
origenEC.y + (altoLibro / 2) + 50,
styleCotas);
}
previewEC.update();
this.actualPreview = previewEC
this.actualPreviewCallback = this.#portadaEspiral
this.setViewBoxToPreview()
}
#portadaGrapado() {
// Variables locales
let altoLibro, anchoLibro, lomoLibro, anchoSolapa, anchoCubierta, altoSangrado, anchoSangrado;
if (typeof this.lomo === 'function') {
this.lomo = this.lomo();
this.ancho = this.ancho();
this.alto = this.alto();
this.lomoRedondo = this.lomoRedondo();
this.solapa = this.solapa();
}
let styleCotas = { size: 12, family: 'Public Sans' };
let sangradoTexto = "Sangrado 5 mm";
let sangradoValor = parseFloat(5); // mm
// Definicion de los parametros del Esquema de Cubierta (EC)
if (this.solapa == 0) {
if (this.size == "thumbnail") {
anchoSangrado = 350; // px
altoSangrado = (anchoSangrado * 0.647 > 300) ? 300 : anchoSangrado * 0.647; // px
} else {
anchoSangrado = 800; // px
altoSangrado = (anchoSangrado * 0.6 > 650) ? 650 : anchoSangrado * 0.6; // px
}
altoLibro = altoSangrado * 0.97;
anchoLibro = anchoSangrado * 0.48;
anchoSolapa = 0;
lomoLibro = 0; // ESTA ES LA DIFERENCIA PARA GRAPADO
anchoCubierta = (2 * anchoLibro) + (2 * anchoSolapa) + lomoLibro;
} else {
if (this.size == "thumbnail") {
anchoSangrado = 350; // px
altoSangrado = (anchoSangrado * 0.647 > 300) ? 300 : anchoSangrado * 0.647; // px
} else {
anchoSangrado = 800; // px
altoSangrado = (anchoSangrado * 0.6 > 650) ? 650 : anchoSangrado * 0.6; // px
}
altoLibro = altoSangrado * 0.95;
anchoLibro = anchoSangrado * 0.3;
anchoSolapa = anchoSangrado * 0.18;
lomoLibro = 0; // ESTA ES LA DIFERENCIA PARA GRAPADO
anchoCubierta = (2 * anchoLibro) + (2 * anchoSolapa) + lomoLibro;
}
var previewEC = new Two({ fitted: true }).appendTo(this.container[0]);
this.previews.push(previewEC)
// Calculate the center of the canvas element
var origenEC = new Two.Vector(previewEC.width / 2, previewEC.height / 2);
var sangrado = previewEC.makeRectangle(
origenEC.x,
origenEC.y,
anchoSangrado,
altoSangrado
);
sangrado.stroke = 'black';
sangrado.dashes = [5, 5];
sangrado.fill = '#FCEAF1';
sangrado.linewidth = 1;
if (this.solapa != 0) {
var solapas = previewEC.makeRectangle(
origenEC.x,
origenEC.y,
anchoCubierta,
altoLibro);
solapas.stroke = 'black';
solapas.linewidth = 1;
// Cotas y textos
if (this.size != "thumbnail") {
// Cotas
var cotaSolapa2 = previewEC.makeDobleArrow(
origenEC.x - anchoCubierta / 2,
origenEC.y - (altoLibro / 3),
origenEC.x - anchoLibro - lomoLibro / 2,
origenEC.y - (altoLibro / 3),
10);
cotaSolapa2.linewidth = 2;
var cotaSolapa1 = previewEC.makeDobleArrow(
origenEC.x + anchoCubierta / 2,
origenEC.y - (altoLibro / 3),
origenEC.x + anchoLibro + lomoLibro / 2,
origenEC.y - (altoLibro / 3),
10);
cotaSolapa1.linewidth = 2;
// Textos Solapas
let stylesSolapa = { size: 18, family: 'Public Sans' };
previewEC.makeText("Solapa 1", origenEC.x + anchoLibro + (lomoLibro + anchoSolapa) / 2, origenEC.y, stylesSolapa);
previewEC.makeText("Solapa 2", origenEC.x - anchoLibro - (lomoLibro + anchoSolapa) / 2, origenEC.y, stylesSolapa);
// Textos Cotas Solapas
previewEC.makeText(this.solapa + " mm", origenEC.x - anchoLibro - (lomoLibro + anchoSolapa) / 2, origenEC.y - (altoLibro / 3) + 15, styleCotas);
previewEC.makeText(this.solapa + " mm", origenEC.x + anchoLibro + (lomoLibro + anchoSolapa) / 2, origenEC.y - (altoLibro / 3) + 15, styleCotas);
}
}
var libro = previewEC.makeRectangle(
origenEC.x,
origenEC.y,
((2 * anchoLibro) + lomoLibro),
altoLibro);
libro.stroke = 'black';
libro.linewidth = 1;
var lomo = previewEC.makeRectangle(
origenEC.x,
origenEC.y,
lomoLibro,
altoLibro);
lomo.stroke = 'black';
lomo.fill = '#F4F8F2';
lomo.linewidth = 1;
// Cotas y textos
if (this.size != "thumbnail") {
// Cotas:
var cotaAnchoCubierta = previewEC.makeDobleArrow(
origenEC.x - (anchoSangrado / 2),
origenEC.y + (altoLibro / 2) + 35,
origenEC.x + (anchoSangrado / 2),
origenEC.y + (altoLibro / 2) + 35,
10);
cotaAnchoCubierta.linewidth = 2;
var cotaAltoCubierta = previewEC.makeDobleArrow(
origenEC.x + (anchoCubierta / 2) + 35,
origenEC.y + (altoSangrado / 2),
origenEC.x + (anchoCubierta / 2) + 35,
origenEC.y - (altoSangrado / 2),
10);
cotaAltoCubierta.linewidth = 2;
var cotaAltoLibro = previewEC.makeDobleArrow(
origenEC.x + (lomoLibro / 2) + 35,
origenEC.y + (altoLibro / 2),
origenEC.x + (lomoLibro / 2) + 35,
origenEC.y - (altoLibro / 2),
10);
cotaAltoLibro.linewidth = 2;
var cotaContraportada = previewEC.makeDobleArrow(
origenEC.x - (lomoLibro / 2 + anchoLibro),
origenEC.y - (altoLibro / 3),
origenEC.x - (lomoLibro / 2),
origenEC.y - (altoLibro / 3),
10);
cotaContraportada.linewidth = 2;
var cotaPortada = previewEC.makeDobleArrow(
origenEC.x + (lomoLibro / 2),
origenEC.y - (altoLibro / 3),
origenEC.x + (lomoLibro / 2 + anchoLibro),
origenEC.y - (altoLibro / 3),
10);
cotaPortada.linewidth = 2;
// Textos:
// Titulos generales
let stylesEC = { size: 22, weight: 'bold', family: 'Public Sans' };
previewEC.makeText("Portada", origenEC.x + (lomoLibro + anchoLibro) / 2, origenEC.y, stylesEC);
previewEC.makeText("Contraportada", origenEC.x - (lomoLibro + anchoLibro) / 2, origenEC.y, stylesEC);
// Sangrados
let styleSangrado = { size: 10, family: 'Public Sans', style: 'italic', fill: 'red' };
previewEC.makeText(sangradoTexto, origenEC.x, origenEC.y + (altoLibro / 2 + 20), styleSangrado);
previewEC.makeText(sangradoTexto, origenEC.x, origenEC.y - (altoLibro / 2 + 20), styleSangrado);
previewEC.makeText(sangradoTexto, origenEC.x + (lomoLibro / 2 + anchoLibro + anchoSolapa + 20), origenEC.y, styleSangrado).rotation = -Math.PI / 2;
previewEC.makeText(sangradoTexto, origenEC.x - (lomoLibro / 2 + anchoLibro + anchoSolapa + 20), origenEC.y, styleSangrado).rotation = -Math.PI / 2;
// Cotas
previewEC.makeText((this.ancho + this.offsetSolapa).toFixed(1) + " mm", origenEC.x - (lomoLibro / 2 + anchoLibro / 2), origenEC.y - (altoLibro / 3) + 15, styleCotas);
previewEC.makeText((this.ancho + this.offsetSolapa).toFixed(1) + " mm", origenEC.x + (lomoLibro / 2 + anchoLibro / 2), origenEC.y - (altoLibro / 3) + 15, styleCotas);
previewEC.makeText(this.alto.toFixed(1) + " mm", origenEC.x + (lomoLibro / 2) + 25, origenEC.y, styleCotas).rotation = -Math.PI / 2;
previewEC.makeText(this.alto.toFixed(1) + (2 * sangradoValor) + " mm", origenEC.x + (lomoLibro / 2 + anchoLibro + anchoSolapa) + 50, origenEC.y, styleCotas).rotation = -Math.PI / 2;
previewEC.makeText(((2 * anchoLibro) + (2 * (this.solapa + this.offsetSolapa)) + this.lomo + (2 * sangradoValor)).toFixed(1) + " mm",
origenEC.x,
origenEC.y + (altoLibro / 2) + 50,
styleCotas);
}
previewEC.update();
this.actualPreview = previewEC
this.actualPreviewCallback = this.#portadaGrapado
this.setViewBoxToPreview()
}
setViewBoxToPreview() {
if (this.actualPreview) {
this.actualPreview.renderer.domElement.setAttribute('width', '100%'); // Optional, for aspect ratio
this.actualPreview.renderer.domElement.setAttribute('height', "40rem"); // Optional, for aspect ratio
this.resize()
}
}
resize() {
var fitElement = this.actualPreview.fit.domElement;
this.actualPreview.renderer.domElement.setAttribute('viewBox', `0 0 ${this.actualPreview.width} ${this.actualPreview.height}`);
this.actualPreview.renderer.domElement.setAttribute('preserveAspectRatio', 'xMidYMid meet'); // Optional, for aspect ratio
this.actualPreview.renderer.domElement.setAttribute('width', '100%'); // Optional, for aspect ratio
this.actualPreview.renderer.domElement.setAttribute('height', "40rem"); // Optional, for aspect ratio
}
}
export default previewFormas;
Reference in New Issue View Git Blame Copy Permalink