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; if (datos.solapas == undefined || datos.solapas == null || datos.solapas == false) { this.solapa = 0; this.offsetSolapa = 0.0; } else { this.solapa = datos.solapas; this.offsetSolapa = 3.0; } this.lomoRedondo = datos.lomoRedondo; } 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; 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.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 (this.size == "thumbnail") { 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; } // 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]); // 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(anchoSolapa.toFixed(1) + " mm", origenEC.x - anchoLibro - (lomoLibro + anchoSolapa) / 2, origenEC.y - (altoLibro / 3) + 15, styleCotas); previewEC.makeText(anchoSolapa.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 previewEC.makeText(lomoLibro.toFixed(1) + " mm", origenEC.x, origenEC.y + (altoLibro / 3) + 15, styleCotas); previewEC.makeText((anchoLibro + offsetSolapaValor).toFixed(1) + " mm", origenEC.x - (lomoLibro / 2 + anchoLibro / 2), origenEC.y - (altoLibro / 3) + 15, styleCotas); previewEC.makeText((anchoLibro + offsetSolapaValor).toFixed(1) + " mm", origenEC.x + (lomoLibro / 2 + anchoLibro / 2), origenEC.y - (altoLibro / 3) + 15, styleCotas); previewEC.makeText(altoLibro.toFixed(1) + " mm", origenEC.x + (lomoLibro / 2) + 25, origenEC.y, styleCotas).rotation = -Math.PI / 2; previewEC.makeText((altoLibro + (2 * sangradoValor)).toFixed(1) + " mm", origenEC.x + (lomoLibro / 2 + anchoLibro + anchoSolapa) + 50, origenEC.y, styleCotas).rotation = -Math.PI / 2; previewEC.makeText(((2 * anchoLibro) + (2 * (anchoSolapa + offsetSolapaValor)) + lomoLibro + (2 * sangradoValor)).toFixed(1) + " mm", origenEC.x, origenEC.y + (altoLibro / 2) + 50, styleCotas); } previewEC.update(); } #portadaTapaDura() { // 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 if (this.ancho >= 210 || this.alto >= 297) { sangradoValor = parseFloat(15); // mm sangradoTexto = "Sangrado 15 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.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 this.container.empty(); // Get the element for placing the graphical elements var previewEC = new Two({ fitted: true }).appendTo($(this.container)[0]); // 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(); } #portadaEspiral(isTapaDura = false) { // Variables locales let altoLibro, anchoLibro, anchoSolapa, anchoCalle, altoSangrado, anchoSangrado, offsetCubierta, anchoCubierta; 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 = 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 (this.size == "thumbnail") { 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.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]); // 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(); } #portadaGrapado() { // 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 // 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 = 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 (this.size == "thumbnail") { 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; } var previewEC = new Two({ fitted: true }).appendTo(this.container[0]); // 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(); } } export default previewFormas;