+
+
diff --git a/httpdocs/assets/js/safekat/components/preview.js b/httpdocs/assets/js/safekat/components/preview.js
index 3dc8cb49..3a95d29a 100644
--- a/httpdocs/assets/js/safekat/components/preview.js
+++ b/httpdocs/assets/js/safekat/components/preview.js
@@ -11,16 +11,16 @@ class previewFormas {
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') {
+ if (typeof this.lomo === 'function') {
solapaTemp = datos.solapas ? datos.solapas() : null;
- solapaSobrecubiertaTemp = datos.solapas_sobrecubierta ? datos.solapas_sobrecubierta(): null;
+ solapaSobrecubiertaTemp = datos.solapas_sobrecubierta ? datos.solapas_sobrecubierta() : null;
}
else {
- solapaTemp = datos.solapas? datos.solapas : null;
- solapaSobrecubiertaTemp = datos.solapas_sobrecubierta? datos.solapas_sobrecubierta : null;
+ solapaTemp = datos.solapas ? datos.solapas : null;
+ solapaSobrecubiertaTemp = datos.solapas_sobrecubierta ? datos.solapas_sobrecubierta : null;
}
if (solapaTemp == undefined || solapaTemp == null || solapaTemp == false) {
@@ -44,13 +44,16 @@ class previewFormas {
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;
@@ -58,13 +61,13 @@ class previewFormas {
let solapaTemp = null;
let solapaSobrecubiertaTemp = null;
- if(typeof this.lomo === 'function') {
+ if (typeof this.lomo === 'function') {
solapaTemp = datos.solapas ? datos.solapas() : null;
- solapaSobrecubiertaTemp = datos.solapas_sobrecubierta ? datos.solapas_sobrecubierta(): null;
+ solapaSobrecubiertaTemp = datos.solapas_sobrecubierta ? datos.solapas_sobrecubierta() : null;
}
else {
- solapaTemp = datos.solapas? datos.solapas : null;
- solapaSobrecubiertaTemp = datos.solapas_sobrecubierta? datos.solapas_sobrecubierta : null;
+ solapaTemp = datos.solapas ? datos.solapas : null;
+ solapaSobrecubiertaTemp = datos.solapas_sobrecubierta ? datos.solapas_sobrecubierta : null;
}
if (solapaTemp == undefined || solapaTemp == null || solapaTemp == false) {
@@ -138,7 +141,7 @@ class previewFormas {
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()),
+ altoLibro: lpName == 'faja' ? parseFloat(parseFloat(rowData.alto_faja).toFixed(0)) : parseFloat(this.alto()),
anchoLibro: this.ancho(),
offsetSolapa: 0
};
@@ -220,7 +223,7 @@ class previewFormas {
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);
+ this.pvObj.altoForma += parseFloat(2 * sangre);
}
// Update labels
@@ -338,6 +341,7 @@ class previewFormas {
// 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);
@@ -384,6 +388,12 @@ class previewFormas {
}
}
_pvPlana.update();
+ this.actualPreview = _pvPlana
+ this.actualPreviewCallback = this.previewInteriorPlana
+ this.setViewBoxToPreview()
+
+
+
}
previewRotativa(lpTagName, isCosido, isTapaDura) {
@@ -424,6 +434,8 @@ class previewFormas {
// 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);
@@ -481,6 +493,12 @@ class previewFormas {
}
_pvRotativa.update();
+ this.actualPreview = _pvRotativa
+ this.actualPreviewCallback = this.previewRotativa
+
+ this.setViewBoxToPreview()
+
+
}
@@ -510,14 +528,14 @@ class previewFormas {
// Variables locales
let altoLibro, anchoLibro, lomoLibro, anchoCubierta, altoSangrado, anchoSangrado, anchoSolapa;
-
- if(typeof this.lomo === 'function') {
+
+ 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
@@ -558,6 +576,8 @@ class previewFormas {
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);
@@ -687,7 +707,7 @@ class previewFormas {
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') {
+ if (typeof this.lomo === 'function') {
lomoTotal = this.lomo().toFixed(1);
} else {
lomoTotal = this.lomo.toFixed(1);
@@ -705,6 +725,13 @@ class previewFormas {
}
previewEC.update();
+ this.actualPreview = previewEC
+ this.actualPreviewCallback = this.#portadaTapaBlanda
+ this.setViewBoxToPreview()
+
+
+
+
}
@@ -714,7 +741,7 @@ class previewFormas {
// Variables locales
let altoLibro, anchoLibro, lomoLibro, anchoCubierta, altoSangrado, anchoSangrado;
- if(typeof this.lomo === 'function') {
+ if (typeof this.lomo === 'function') {
this.lomo = this.lomo();
this.ancho = this.ancho();
this.alto = this.alto();
@@ -750,6 +777,7 @@ class previewFormas {
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);
@@ -855,6 +883,13 @@ class previewFormas {
}
previewEC.update();
+ this.actualPreview = previewEC
+ this.actualPreviewCallback = this.#portadaTapaBlanda
+ this.setViewBoxToPreview()
+
+
+
+
}
#portadaEspiral(isTapaDura = false) {
@@ -862,7 +897,7 @@ class previewFormas {
// Variables locales
let altoLibro, anchoLibro, anchoSolapa, anchoCalle, altoSangrado, anchoSangrado, offsetCubierta, anchoCubierta;
- if(typeof this.lomo === 'function') {
+ if (typeof this.lomo === 'function') {
this.lomo = this.lomo();
this.ancho = this.ancho();
this.alto = this.alto();
@@ -907,6 +942,8 @@ class previewFormas {
}
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);
@@ -1070,6 +1107,13 @@ class previewFormas {
}
previewEC.update();
+ this.actualPreview = previewEC
+ this.actualPreviewCallback = this.#portadaEspiral
+ this.setViewBoxToPreview()
+
+
+
+
}
@@ -1078,8 +1122,8 @@ class previewFormas {
// Variables locales
let altoLibro, anchoLibro, lomoLibro, anchoSolapa, anchoCubierta, altoSangrado, anchoSangrado;
-
- if(typeof this.lomo === 'function') {
+
+ if (typeof this.lomo === 'function') {
this.lomo = this.lomo();
this.ancho = this.ancho();
this.alto = this.alto();
@@ -1122,6 +1166,8 @@ class previewFormas {
}
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);
@@ -1253,7 +1299,32 @@ class previewFormas {
}
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
+
+ }
+
}
export default previewFormas;
diff --git a/httpdocs/assets/js/safekat/pages/presupuestoAdmin/sections/previewFormasAdmin.js b/httpdocs/assets/js/safekat/pages/presupuestoAdmin/sections/previewFormasAdmin.js
index 6f452df3..35bb8d0b 100644
--- a/httpdocs/assets/js/safekat/pages/presupuestoAdmin/sections/previewFormasAdmin.js
+++ b/httpdocs/assets/js/safekat/pages/presupuestoAdmin/sections/previewFormasAdmin.js
@@ -1,9 +1,9 @@
import preview from '../../../components/preview.js';
-class PreviewFormasAdmin{
+class PreviewFormasAdmin {
+
+ constructor(tipoLibro, tipoTapa, data) {
- constructor(tipoLibro, tipoTapa, data){
-
this.data = data;
this.isCosido = $("#isCosido").val();
this.tipoTapa = tipoTapa;
@@ -12,81 +12,97 @@ class PreviewFormasAdmin{
this.preview = new preview($('#pv_ec_shape'), tipoLibro, tipoTapa, "fullImage", data);
}
- setData(data){
+ setData(data) {
this.data = data;
}
- init(){
-
- const self = this;
-
- $('#tab-pv-bn').on( "click", function() {
- self.preview.setData(self.data);
- self.preview.previewInteriorPlana('bn', self.isCosido, self.tipoTapa.includes("dura")?1:0);
- } );
-
- $('#tab-pv-bnhq').on( "click", function() {
- self.preview.setData(self.data);
- self.preview.previewInteriorPlana('bnhq', self.isCosido, self.tipoTapa.includes("dura")?1:0);
- } );
-
- $('#tab-pv-color').on( "click", function() {
- self.preview.setData(self.data);
- self.preview.previewInteriorPlana('color', self.isCosido, self.tipoTapa.includes("dura")?1:0);
- } );
-
- $('#tab-pv-colorhq').on( "click", function() {
- self.preview.setData(self.data);
- self.preview.previewInteriorPlana('colorhq', self.isCosido, self.tipoTapa.includes("dura")?1:0);
- } );
-
- $('#tab-pv-rot-bn').on( "click", function() {
- self.preview.setData(self.data);
- self.preview.previewRotativa('rot_bn', self.isCosido, self.tipoTapa.includes("dura")?1:0);
-
- } );
-
- $('#tab-pv-rot-color').on( "click", function() {
-
- self.preview.setData(self.data);
- self.preview.previewRotativa('rot_color', self.isCosido, self.tipoTapa.includes("dura")?1:0);
-
- } );
-
- $('#tab-pv-guardas').on( "click", function() {
-
- self.preview.setData(self.data);
- self.preview.previewInteriorPlana('guardas', self.isCosido, self.tipoTapa.includes("dura")?1:0);
- } );
-
- $('#tab-pv-cubierta').on( "click", function() {
-
- self.preview.setData(self.data);
- self.preview.previewInteriorPlana('cubierta', self.isCosido, self.tipoTapa.includes("dura")?1:0);
-
- } );
-
- $('#tab-pv-esquema-cubierta').on( "click", function() {
-
- self.preview.setData(self.data);
- self.preview.getObjetoLP('ec', self.isCosido, self.tipoTapa.includes("dura")?1:0);
- self.preview.previewEsquemaCubierta('ec', self.isCosido, self.tipoTapa.includes("dura")?1:0);
-
- } );
-
- $('#tab-pv-sobrecubierta').on( "click", function() {
-
- self.preview.setData(self.data);
- self.preview.previewInteriorPlana('sobrecubierta', self.isCosido, self.tipoTapa.includes("dura")?1:0);
-
- } );
+ init() {
- $('#tab-pv-faja').on( "click", function() {
-
+ const self = this;
+ this.preview.resizeEvent();
+ // $(".refresh-shape").on("click", () => {
+ // $("#accordionPreviewTip").find(".nav-link.active").each((index, element) => {
+ // this.preview.setViewBoxToPreview()
+ // })
+ // })
+ $('#tab-pv-bn').on("click", function () {
self.preview.setData(self.data);
- self.preview.previewInteriorPlana('faja', self.isCosido, self.tipoTapa.includes("dura")?1:0);
-
- } );
+ self.preview.previewInteriorPlana('bn', self.isCosido, self.tipoTapa.includes("dura") ? 1 : 0);
+
+ });
+
+ $('#tab-pv-bnhq').on("click", function () {
+ self.preview.setData(self.data);
+ self.preview.previewInteriorPlana('bnhq', self.isCosido, self.tipoTapa.includes("dura") ? 1 : 0);
+
+ });
+
+ $('#tab-pv-color').on("click", function () {
+ self.preview.setData(self.data);
+ self.preview.previewInteriorPlana('color', self.isCosido, self.tipoTapa.includes("dura") ? 1 : 0);
+
+ });
+
+ $('#tab-pv-colorhq').on("click", function () {
+ self.preview.setData(self.data);
+ self.preview.previewInteriorPlana('colorhq', self.isCosido, self.tipoTapa.includes("dura") ? 1 : 0);
+
+ });
+
+ $('#tab-pv-rot-bn').on("click", function () {
+ self.preview.setData(self.data);
+ self.preview.previewRotativa('rot_bn', self.isCosido, self.tipoTapa.includes("dura") ? 1 : 0);
+
+
+ });
+
+ $('#tab-pv-rot-color').on("click", function () {
+
+ self.preview.setData(self.data);
+ self.preview.previewRotativa('rot_color', self.isCosido, self.tipoTapa.includes("dura") ? 1 : 0);
+
+
+ });
+
+ $('#tab-pv-guardas').on("click", function () {
+
+ self.preview.setData(self.data);
+ self.preview.previewInteriorPlana('guardas', self.isCosido, self.tipoTapa.includes("dura") ? 1 : 0);
+
+ });
+
+ $('#tab-pv-cubierta').on("click", function () {
+
+ self.preview.setData(self.data);
+ self.preview.previewInteriorPlana('cubierta', self.isCosido, self.tipoTapa.includes("dura") ? 1 : 0);
+
+
+ });
+
+ $('#tab-pv-esquema-cubierta').on("click", function () {
+
+ self.preview.setData(self.data);
+ self.preview.getObjetoLP('ec', self.isCosido, self.tipoTapa.includes("dura") ? 1 : 0);
+ self.preview.previewEsquemaCubierta('ec', self.isCosido, self.tipoTapa.includes("dura") ? 1 : 0);
+
+
+ });
+
+ $('#tab-pv-sobrecubierta').on("click", function () {
+
+ self.preview.setData(self.data);
+ self.preview.previewInteriorPlana('sobrecubierta', self.isCosido, self.tipoTapa.includes("dura") ? 1 : 0);
+
+
+ });
+
+ $('#tab-pv-faja').on("click", function () {
+
+ self.preview.setData(self.data);
+ self.preview.previewInteriorPlana('faja', self.isCosido, self.tipoTapa.includes("dura") ? 1 : 0);
+
+
+ });
}
}
diff --git a/httpdocs/themes/vuexy/css/sk-datatables.css b/httpdocs/themes/vuexy/css/sk-datatables.css
index 60269a86..8b182e2c 100644
--- a/httpdocs/themes/vuexy/css/sk-datatables.css
+++ b/httpdocs/themes/vuexy/css/sk-datatables.css
@@ -97,11 +97,12 @@ table.dataTable.table-hover>tbody>tr.selected:hover>* {
}
div.draw-shapes {
- width: 95%;
- height: 550px;
+ width: 100%;
+ height: 40rem;
margin: 2.5% auto;
}
+
div.draw-rot-shapes {
width: 95%;
height: 850px;