boton guardar en todas pags, resuelto preview cosido

This commit is contained in:
2024-11-09 12:15:32 +01:00
parent 11b14ccf76
commit 873adc5bf5
7 changed files with 2084 additions and 866 deletions

View File

@ -26,7 +26,7 @@
<span class="align-middle d-sm-inline-block d-none me-sm-1"></i><?= lang('App.global_confirm') ?></span>
</div>
<div id="btnSave" class="btn mt-3 btn-primary waves-effect waves-light ml-2 d-none">
<div id="btnSave" class="btn mt-3 btn-primary waves-effect waves-light ml-2">
<span class="align-middle d-sm-inline-block d-none me-sm-1"></i><?= lang('App.global_save') ?></span>
</div>
<?php endif; ?>

View File

@ -18,7 +18,7 @@
</div>
</div>
<div class="row">
<div id="pv_ec_shape" class="col-sm-12 d-none" style="width:850px;height:600px;margin:2.5% auto;"></div>
<div id="pv_ec_shape" class="col-sm-12 d-none" style="width:850px;height:630px;margin:2.5% auto;"></div>
</div>
</div>

View File

@ -1,819 +0,0 @@
// Global parameters
var pvObj;
$('#toReview').on("click", function () {
previewEsquemaCubierta(true);
});
$(document).on('shown.bs.modal', function (e) {
previewEsquemaCubierta(false);
})
function previewEsquemaCubierta(isThumbnail = false) {
if($('#cosidoDiv').length){
if ($('#cosidoDiv').hasClass('checked') || $("#fresadoDiv").hasClass('checked')) {
//console.log("Cosido/Fresado");
if ($("#tapaBlanda").is(":checked")) {
portadaTapaBlanda(isThumbnail);
} else if ($("#tapaDura").is(":checked")) {
portadaTapaDura(isThumbnail);
}
} else if ($('#espiralDiv').hasClass('checked') || $('#wireoDiv').hasClass('checked')) {
//console.log("Espiral/Wireo");
if ($("#tapaBlanda").is(":checked")) {
portadaEspiral(isThumbnail, false);
} else if ($("#tapaDura").is(":checked")) {
portadaEspiral(isThumbnail, true);
}
} else if ($('#grapadoDiv').hasClass('checked')) {
portadaGrapado(isThumbnail);
}
}
else{
let titulo = $('#tipoLibro').text().toLowerCase();
if(titulo.includes("cosido") || titulo.includes("fresado")){
if(titulo.includes("dura"))
portadaTapaDura(isThumbnail);
else{
portadaTapaBlanda(isThumbnail);
}
}
else if (titulo.includes("espiral") || titulo.includes("wire-o")){
if(titulo.includes("dura"))
portadaEspiral(isThumbnail, true);
else
portadaEspiral(isThumbnail, false);
}
else if (titulo.includes("grapado")){
portadaGrapado(isThumbnail);
}
}
}
function portadaTapaDura(isThumbnail = false) {
// Variables locales
let altoLibro, anchoLibro, lomoLibro, anchoCubierta, altoSangrado, anchoSangrado;
let styleCotas = {size: 12, family: 'Public Sans'};
let sangradoTexto = "Sangrado 20 mm";
let sangradoValor = parseFloat(20); // mm
let anchoPliegue = parseFloat(7); // mm
let altoPliegue = parseFloat(7); // mm
let anchoCarton = parseFloat(7); // mm
let divIdName = (isThumbnail) ? 'thumbnail_ec_shape' : 'pv_ec_shape';
// Get the preview Object parameters
getObjetoToPreview();
// Definicion de los parametros del Esquema de Cubierta (EC)
if (isThumbnail) {
anchoSangrado = 350; // px
altoSangrado = (anchoSangrado * 0.647 > 300) ? 300 : anchoSangrado * 0.647; // px
} else {
anchoSangrado = 800; // px
altoSangrado = (anchoSangrado * 0.647 > 650) ? 650 : anchoSangrado * 0.647; // px
}
altoLibro = altoSangrado * 0.88;
anchoLibro = anchoSangrado * 0.39;
lomoLibro = anchoSangrado * 0.133;
anchoCubierta = (2 * anchoLibro) + lomoLibro;
// Clear the canvas element
$(`#${divIdName}`).empty();
// Get the element for placing the graphical elements
var divEC = document.getElementById(divIdName);
var previewEC = new Two({fitted: true}).appendTo(divEC);
// 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 (!isThumbnail) {
// 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(pvObj.lomoLibro + anchoCarton + " mm", origenEC.x, origenEC.y + (altoLibro / 3) + 15, styleCotas);
previewEC.makeText(pvObj.anchoLibro + anchoPliegue + " mm", origenEC.x - (lomoLibro / 2 + anchoLibro / 2), origenEC.y - (altoLibro / 3) + 15, styleCotas);
previewEC.makeText(pvObj.anchoLibro + anchoPliegue + " mm", origenEC.x + (lomoLibro / 2 + anchoLibro / 2), origenEC.y - (altoLibro / 3) + 15, styleCotas);
previewEC.makeText(pvObj.altoLibro + altoPliegue + " mm", origenEC.x + (lomoLibro / 2) + 50, origenEC.y, styleCotas).rotation = -Math.PI / 2;
previewEC.makeText(pvObj.altoLibro + (2 * sangradoValor) + altoPliegue + " mm", origenEC.x + (lomoLibro / 2 + anchoLibro) + 55, origenEC.y, styleCotas).rotation = -Math.PI / 2;
previewEC.makeText((2 * pvObj.anchoLibro) + pvObj.lomoLibro + (2 * sangradoValor) + +(2 * anchoPliegue) + anchoCarton + " mm",
origenEC.x,
origenEC.y + (altoLibro / 2) + 50,
styleCotas);
}
previewEC.update();
}
function portadaTapaBlanda(isThumbnail = false) {
// Variables locales
let altoLibro, anchoLibro, lomoLibro, anchoSolapa, anchoCubierta, altoSangrado, anchoSangrado;
let styleCotas = {size: 12, family: 'Public Sans'};
let sangradoTexto = "Sangrado 5 mm";
let sangradoValor = parseFloat(5); // mm
let offsetSolapaValor = parseFloat(0); // mm
let divIdName = (isThumbnail) ? 'thumbnail_ec_shape' : 'pv_ec_shape';
// Get the preview Object parameters
getObjetoToPreview();
// Definicion de los parametros del Esquema de Cubierta (EC)
if (pvObj.anchoSolapa == 0) {
if (isThumbnail) {
anchoSangrado = 350; // px
altoSangrado = (anchoSangrado * 0.647 > 300) ? 300 : anchoSangrado * 0.647; // px
} else {
anchoSangrado = 800; // px
altoSangrado = (anchoSangrado * 0.647 > 650) ? 650 : anchoSangrado * 0.647; // px
}
altoLibro = altoSangrado * 0.97;
anchoLibro = anchoSangrado * 0.419;
anchoSolapa = 0;
lomoLibro = anchoSangrado * 0.133;
anchoCubierta = (2 * anchoLibro) + (2 * anchoSolapa) + lomoLibro;
} else {
if (isThumbnail) {
anchoSangrado = 350; // px
altoSangrado = (anchoSangrado * 0.647 > 300) ? 300 : anchoSangrado * 0.647; // px
} else {
anchoSangrado = 750; // px
altoSangrado = (anchoSangrado * 0.647 > 650) ? 650 : anchoSangrado * 0.647; // px
}
altoLibro = altoSangrado * 0.95;
anchoLibro = anchoSangrado * 0.28;
anchoSolapa = anchoSangrado * 0.163;
lomoLibro = anchoSangrado * 0.09;
anchoCubierta = (2 * anchoLibro) + (2 * anchoSolapa) + lomoLibro;
offsetSolapaValor = parseFloat('3.0'); // mm
}
// Clear the canvas element
$(`#${divIdName}`).empty();
// Get the element for placing the graphical elements
var divEC = document.getElementById(divIdName);
var previewEC = new Two({fitted: true}).appendTo(divEC);
// 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 (pvObj.anchoSolapa != 0) {
var solapas = previewEC.makeRectangle(
origenEC.x,
origenEC.y,
anchoCubierta,
altoLibro);
solapas.stroke = 'black';
solapas.linewidth = 1;
// Cotas Solapas
if (!isThumbnail) {
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(pvObj.anchoSolapa + " mm", origenEC.x - anchoLibro - (lomoLibro + anchoSolapa) / 2, origenEC.y - (altoLibro / 3) + 15, styleCotas);
previewEC.makeText(pvObj.anchoSolapa + " 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 (!isThumbnail) {
// 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
previewEC.makeText(pvObj.lomoLibro + " mm", origenEC.x, origenEC.y + (altoLibro / 3) + 15, styleCotas);
previewEC.makeText(pvObj.anchoLibro + " mm", origenEC.x - (lomoLibro / 2 + anchoLibro / 2), origenEC.y - (altoLibro / 3) + 15, styleCotas);
previewEC.makeText(pvObj.anchoLibro + " mm", origenEC.x + (lomoLibro / 2 + anchoLibro / 2), origenEC.y - (altoLibro / 3) + 15, styleCotas);
previewEC.makeText(pvObj.altoLibro + " mm", origenEC.x + (lomoLibro / 2) + 25, origenEC.y, styleCotas).rotation = -Math.PI / 2;
previewEC.makeText(pvObj.altoLibro + (2 * sangradoValor) + " mm", origenEC.x + (lomoLibro / 2 + anchoLibro + anchoSolapa) + 50, origenEC.y, styleCotas).rotation = -Math.PI / 2;
previewEC.makeText((2 * pvObj.anchoLibro) + (2 * (pvObj.anchoSolapa + pvObj.offsetSolapa)) + pvObj.lomoLibro + (2 * sangradoValor) + " mm",
origenEC.x,
origenEC.y + (altoLibro / 2) + 50,
styleCotas);
}
previewEC.update();
}
function portadaEspiral(isThumbnail = false, isTapaDura = false) {
// Variables locales
let altoLibro, anchoLibro, anchoCalle, anchoCubierta, altoSangrado, anchoSangrado, anchoSolapa, offsetCubierta;
let styleCotas = {size: 12, family: 'Public Sans'};
let sangradoTexto = (isTapaDura) ? "Sangrado 20 mm" : "Sangrado 5 mm";
let sangradoValor = (isTapaDura) ? parseFloat(20) : parseFloat(5); // mm
let divIdName = (isThumbnail) ? 'thumbnail_ec_shape' : 'pv_ec_shape';
// Get the preview Object parameters
getObjetoToPreview();
// Definicion de los parametros del Esquema de Cubierta (EC)
if ((pvObj.anchoSolapa !== 0) && (!isTapaDura)) {
if (isThumbnail) {
anchoSangrado = 350; // px
altoSangrado = (anchoSangrado * 0.647 > 300) ? 300 : anchoSangrado * 0.647; // px
} else {
anchoSangrado = 750; // px
altoSangrado = (anchoSangrado * 0.647 > 650) ? 650 : anchoSangrado * 0.647; // 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 (isThumbnail) {
anchoSangrado = 350; // px
altoSangrado = (anchoSangrado * 0.647 > 300) ? 300 : anchoSangrado * 0.647; // px
} else {
anchoSangrado = 750; // px
altoSangrado = (anchoSangrado * 0.647 > 650) ? 650 : anchoSangrado * 0.647; // px
}
altoLibro = (isTapaDura) ? altoSangrado * 0.88 : altoSangrado * 0.97;
anchoLibro = (isTapaDura) ? anchoSangrado * 0.39 : anchoSangrado * 0.419;
anchoCalle = anchoSangrado * 0.02;
anchoSolapa = 0;
anchoCubierta = (2 * anchoLibro) + (2 * anchoSolapa) + anchoCalle;
offsetCubierta = anchoLibro / 2 + anchoCalle / 2 + anchoSolapa + sangradoValor;
}
// Clear the canvas element
$(`#${divIdName}`).empty();
// Get the element for placing the graphical elements
var divEC = document.getElementById(divIdName);
var previewEC = new Two({fitted: true}).appendTo(divEC);
// 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 ((pvObj.anchoSolapa != 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 (!isThumbnail) {
// 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(pvObj.anchoSolapa + " mm", origenEC.x - anchoLibro - (anchoCalle + anchoSolapa) / 2, origenEC.y - (altoLibro / 3) + 15, styleCotas);
previewEC.makeText(pvObj.anchoSolapa + " 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 (!isThumbnail) {
// 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(pvObj.anchoLibro + " mm", origenEC.x - (offsetCubierta - anchoSolapa / 2), origenEC.y - (altoLibro / 3) + 15, styleCotas);
previewEC.makeText(pvObj.anchoLibro + " mm", origenEC.x + (offsetCubierta - anchoSolapa / 2), origenEC.y - (altoLibro / 3) + 15, styleCotas);
previewEC.makeText(pvObj.altoLibro + " mm", origenEC.x + (anchoCalle / 2) + 50, origenEC.y, styleCotas).rotation = -Math.PI / 2;
previewEC.makeText(pvObj.altoLibro + (2 * sangradoValor) + " mm",
origenEC.x + (anchoSangrado / 2) + 30,
origenEC.y,
styleCotas
).rotation = -Math.PI / 2;
previewEC.makeText((2 * pvObj.anchoLibro) + pvObj.lomoLibro + (2 * sangradoValor) + " mm",
origenEC.x,
origenEC.y + (altoLibro / 2) + 50,
styleCotas);
}
previewEC.update();
}
function portadaGrapado(isThumbnail = false) {
// Variables locales
let altoLibro, anchoLibro, lomoLibro, anchoSolapa, anchoCubierta, altoSangrado, anchoSangrado;
let styleCotas = {size: 12, family: 'Public Sans'};
let sangradoTexto = "Sangrado 5 mm";
let sangradoValor = parseFloat('5.0'); // mm
let offsetSolapaValor = parseFloat('0.0'); // mm
let divIdName = (isThumbnail) ? 'thumbnail_ec_shape' : 'pv_ec_shape';
// Get the preview Object parameters
getObjetoToPreview();
// Definicion de los parametros del Esquema de Cubierta (EC)
if (pvObj.anchoSolapa == 0) {
if (isThumbnail) {
anchoSangrado = 350; // px
altoSangrado = (anchoSangrado * 0.647 > 300) ? 300 : anchoSangrado * 0.647; // px
} else {
anchoSangrado = 750; // px
altoSangrado = (anchoSangrado * 0.647 > 650) ? 650 : anchoSangrado * 0.647; // 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 (isThumbnail) {
anchoSangrado = 350; // px
altoSangrado = (anchoSangrado * 0.647 > 300) ? 300 : anchoSangrado * 0.647; // px
} else {
anchoSangrado = 750; // px
altoSangrado = (anchoSangrado * 0.647 > 650) ? 650 : anchoSangrado * 0.647; // 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;
offsetSolapaValor = parseFloat('3.0'); // mm
}
// Clear the canvas element
$(`#${divIdName}`).empty();
// Get the element for placing the graphical elements
var divEC = document.getElementById(divIdName);
var previewEC = new Two({fitted: true}).appendTo(divEC);
// 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 (pvObj.anchoSolapa != 0) {
var solapas = previewEC.makeRectangle(
origenEC.x,
origenEC.y,
anchoCubierta,
altoLibro);
solapas.stroke = 'black';
solapas.linewidth = 1;
// Cotas y textos
if (!isThumbnail) {
// 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(pvObj.anchoSolapa + " mm", origenEC.x - anchoLibro - (lomoLibro + anchoSolapa) / 2, origenEC.y - (altoLibro / 3) + 15, styleCotas);
previewEC.makeText(pvObj.anchoSolapa + " 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 (!isThumbnail) {
// 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(pvObj.anchoLibro + " mm", origenEC.x - (lomoLibro / 2 + anchoLibro / 2), origenEC.y - (altoLibro / 3) + 15, styleCotas);
previewEC.makeText(pvObj.anchoLibro + " mm", origenEC.x + (lomoLibro / 2 + anchoLibro / 2), origenEC.y - (altoLibro / 3) + 15, styleCotas);
previewEC.makeText(pvObj.altoLibro + " mm", origenEC.x + (lomoLibro / 2) + 25, origenEC.y, styleCotas).rotation = -Math.PI / 2;
previewEC.makeText(pvObj.altoLibro + (2 * sangradoValor) + " mm", origenEC.x + (lomoLibro / 2 + anchoLibro + anchoSolapa) + 50, origenEC.y, styleCotas).rotation = -Math.PI / 2;
previewEC.makeText((2 * pvObj.anchoLibro) + (2 * (pvObj.anchoSolapa + pvObj.offsetSolapa)) + pvObj.lomoLibro + (2 * sangradoValor) + " mm",
origenEC.x,
origenEC.y + (altoLibro / 2) + 50,
styleCotas);
}
previewEC.update();
}
function getObjetoToPreview() {
if($('#cosidoDiv').length){
pvObj = {
lomoLibro: $('#lomo_cubierta').val() === '' ? parseFloat('0.0') : parseFloat(parseFloat($('#lomo_cubierta').val()).toFixed(2)),
anchoSolapa: $('#solapasCubierta').is(':checked') ? parseFloat($('#anchoSolapasCubierta').val()) : parseFloat('0.0'),
altoLibro: getDimensionLibro().alto,
anchoLibro: getDimensionLibro().ancho,
offsetSolapa: $('#solapasCubierta').is(':checked') ? parseFloat('3.0') : parseFloat('0.0')
};
} else {
let tamanio = $('#resumenTamanio').text().split(' ')[1].split('x');
let solapas = parseInt($('#resumenSolapasCubierta').length ? $('#resumenSolapasCubierta').text().split(' ')[1].replace("mm", '') : 0);
pvObj = {
lomoLibro: $('#lomo_cubierta').val() === '' ? parseFloat('0.0') : parseFloat(parseFloat($('#lomo_cubierta').val()).toFixed(2)),
anchoSolapa: solapas,
altoLibro: parseInt(tamanio[1]),
anchoLibro: parseInt(tamanio[0]),
offsetSolapa: (solapas != 0) ? parseFloat('3.0') : parseFloat('0.0')
};
}
//console.log($('#lomo_cubierta').val());
}