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

resize svg previews

Browse Source
This commit is contained in:
amazuecos
2025-03-05 00:49:05 +01:00
parent e5e53c026a
commit b6a17e0d34
6 changed files with 206 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
ci4/app/Language/en/Presupuestos.php
View File

@ -174,6 +174,6 @@ return [
'lineaDuplicada' => 'That type of line already exists in the budget.',
'errorRotColor' => 'Papers and weights must be the same in color and BW',
],
'resize_preview' => 'Refresh preview'
];

2
ci4/app/Language/es/Presupuestos.php
View File

@ -402,5 +402,7 @@ return [
'error_sobrecubierta_sin_solapas' => 'Debe seleccionar "sobrecubierta" en los datos del libro para introducir el ancho de solapa',
'error_faja_sin_solapas' => 'Debe seleccionar "faja" en los datos del libro para introducir el ancho de solapa'
],
'resize_preview' => 'Refrescar vista esquema'
];

28
ci4/app/Views/themes/vuexy/form/presupuestos/admin/_previewItems.php
View File

@ -218,7 +218,8 @@
<h6><?= lang("Presupuestos.previewMaquinaPlana") ?></h6>
<div id="shape-container">
<div class="d-flex align-items-stretch justify-content-end">
<div class="d-flex align-items-stretch justify-content-end gap-2">
<button type="button" class="btn btn-xs btn-success h-100 refresh-shape"><i class="ti ti-xs ti-refresh"></i></button>
<button type="button" class="btn btn-xs btn-primary h-100 download-shape"><i class="ti ti-xs ti-download"></i></button>
</div>
<div id="pv_bn_shape" class="draw-shapes"></div>
@ -299,7 +300,8 @@
<h6><?= lang("Presupuestos.previewMaquinaPlana") ?></h6>
<div id="shape-container">
<div class="d-flex align-items-stretch justify-content-end">
<div class="d-flex align-items-stretch justify-content-end gap-2">
<button type="button" class="btn btn-xs btn-success h-100 refresh-shape"><i class="ti ti-xs ti-refresh"></i></button>
<button type="button" class="btn btn-xs btn-primary h-100 download-shape"><i class="ti ti-xs ti-download"></i></button>
</div>
<div id="pv_bnhq_shape" class="draw-shapes"></div>
@ -380,7 +382,8 @@
<h6><?= lang("Presupuestos.previewMaquinaPlana") ?></h6>
<div id="shape-container">
<div class="d-flex align-items-stretch justify-content-end">
<div class="d-flex align-items-stretch justify-content-end gap-2">
<button type="button" class="btn btn-xs btn-success h-100 refresh-shape"><i class="ti ti-xs ti-refresh"></i></button>
<button type="button" class="btn btn-xs btn-primary h-100 download-shape"><i class="ti ti-xs ti-download"></i></button>
</div>
<div id="pv_color_shape" class="draw-shapes"></div>
@ -461,7 +464,9 @@
<h6><?= lang("Presupuestos.previewMaquinaPlana") ?></h6>
<div id="shape-container">
<div class="d-flex align-items-stretch justify-content-end">
<div class="d-flex align-items-stretch justify-content-end gap-2">
<button type="button" class="btn btn-xs btn-success h-100 refresh-shape"><i class="ti ti-xs ti-refresh"></i></button>
<button type="button" class="btn btn-xs btn-primary h-100 download-shape"><i class="ti ti-xs ti-download"></i></button>
</div>
@ -541,7 +546,8 @@
<h6><?= lang("Presupuestos.previewMaquinaRotativa") ?></h6>
<div id="shape-container">
<div class="d-flex align-items-stretch justify-content-end">
<div class="d-flex align-items-stretch justify-content-end gap-2">
<button type="button" class="btn btn-xs btn-success h-100 refresh-shape"><i class="ti ti-xs ti-refresh"></i></button>
<button type="button" class="btn btn-xs btn-primary h-100 download-shape"><i class="ti ti-xs ti-download"></i></button>
</div>
<div id="pv_rot_bn_shape" class="draw-rot-shapes"></div>
@ -621,7 +627,8 @@
<h6><?= lang("Presupuestos.previewMaquinaRotativa") ?></h6>
<div id="shape-container">
<div class="d-flex align-items-stretch justify-content-end">
<div class="d-flex align-items-stretch justify-content-end gap-2">
<button type="button" class="btn btn-xs btn-success h-100 refresh-shape"><i class="ti ti-xs ti-refresh"></i></button>
<button type="button" class="btn btn-xs btn-primary h-100 download-shape"><i class="ti ti-xs ti-download"></i></button>
</div>
<div id="pv_rot_color_shape" class="draw-rot-shapes"></div>
@ -702,7 +709,8 @@
<h6><?= lang("Presupuestos.previewMaquinaPlana") ?></h6>
<div id="shape-container">
<div class="d-flex align-items-stretch justify-content-end">
<div class="d-flex align-items-stretch justify-content-end gap-2">
<button type="button" class="btn btn-xs btn-success h-100 refresh-shape"><i class="ti ti-xs ti-refresh"></i></button>
<button type="button" class="btn btn-xs btn-primary h-100 download-shape"><i class="ti ti-xs ti-download"></i></button>
</div>
<div id="pv_guardas_shape" class="draw-shapes"></div>
@ -786,7 +794,8 @@
<h6><?= lang("Presupuestos.previewCubierta") ?></h6>
<div id="pv-cubierta-container">
<div class="d-flex align-items-stretch justify-content-end">
<div class="d-flex align-items-stretch justify-content-end gap-2">
<button type="button" class="btn btn-xs btn-success h-100 refresh-shape"><i class="ti ti-xs ti-refresh"></i></button>
<button type="button" class="btn btn-xs btn-primary h-100 download-shape"><i class="ti ti-xs ti-download"></i></button>
</div>
<div id="pv_cubierta_shape" class="draw-shapes"></div>
@ -854,7 +863,8 @@
<h6><?= lang("Presupuestos.previewConfiguracionEsquemaCubierta") ?></h6>
<div id="shape-container">
<div class="d-flex align-items-stretch justify-content-end">
<div class="d-flex align-items-stretch justify-content-end gap-2">
<button type="button" class="btn btn-xs btn-success h-100 refresh-shape"><i class="ti ti-xs ti-refresh"></i></button>
<button type="button" class="btn btn-xs btn-primary h-100 download-shape"><i class="ti ti-xs ti-download"></i></button>
</div>
<div id="pv_ec_shape" class="draw-shapes"></div>

105
httpdocs/assets/js/safekat/components/preview.js
View File

@ -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
};
@ -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()
}
@ -511,7 +529,7 @@ 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();
@ -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()
}
@ -1079,7 +1123,7 @@ 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;

94
httpdocs/assets/js/safekat/pages/presupuestoAdmin/sections/previewFormasAdmin.js
View File

@ -1,8 +1,8 @@
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();
@ -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(){
init() {
const self = this;
$('#tab-pv-bn').on( "click", function() {
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('bn', 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() {
});
$('#tab-pv-bnhq').on("click", function () {
self.preview.setData(self.data);
self.preview.previewInteriorPlana('bnhq', self.isCosido, self.tipoTapa.includes("dura")?1:0);
} );
self.preview.previewInteriorPlana('bnhq', self.isCosido, self.tipoTapa.includes("dura") ? 1 : 0);
$('#tab-pv-color').on( "click", function() {
});
$('#tab-pv-color').on("click", function () {
self.preview.setData(self.data);
self.preview.previewInteriorPlana('color', self.isCosido, self.tipoTapa.includes("dura")?1:0);
} );
self.preview.previewInteriorPlana('color', self.isCosido, self.tipoTapa.includes("dura") ? 1 : 0);
$('#tab-pv-colorhq').on( "click", function() {
});
$('#tab-pv-colorhq').on("click", function () {
self.preview.setData(self.data);
self.preview.previewInteriorPlana('colorhq', self.isCosido, self.tipoTapa.includes("dura")?1:0);
} );
self.preview.previewInteriorPlana('colorhq', self.isCosido, self.tipoTapa.includes("dura") ? 1 : 0);
$('#tab-pv-rot-bn').on( "click", function() {
});
$('#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);
self.preview.previewRotativa('rot_bn', self.isCosido, self.tipoTapa.includes("dura") ? 1 : 0);
} );
$('#tab-pv-rot-color').on( "click", function() {
});
$('#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);
self.preview.previewRotativa('rot_color', self.isCosido, self.tipoTapa.includes("dura") ? 1 : 0);
} );
$('#tab-pv-guardas').on( "click", function() {
});
$('#tab-pv-guardas').on("click", function () {
self.preview.setData(self.data);
self.preview.previewInteriorPlana('guardas', self.isCosido, self.tipoTapa.includes("dura")?1:0);
} );
self.preview.previewInteriorPlana('guardas', self.isCosido, self.tipoTapa.includes("dura") ? 1 : 0);
$('#tab-pv-cubierta').on( "click", function() {
});
$('#tab-pv-cubierta').on("click", function () {
self.preview.setData(self.data);
self.preview.previewInteriorPlana('cubierta', self.isCosido, self.tipoTapa.includes("dura")?1:0);
self.preview.previewInteriorPlana('cubierta', self.isCosido, self.tipoTapa.includes("dura") ? 1 : 0);
} );
$('#tab-pv-esquema-cubierta').on( "click", function() {
});
$('#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);
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() {
});
$('#tab-pv-sobrecubierta').on("click", function () {
self.preview.setData(self.data);
self.preview.previewInteriorPlana('sobrecubierta', self.isCosido, self.tipoTapa.includes("dura")?1:0);
self.preview.previewInteriorPlana('sobrecubierta', self.isCosido, self.tipoTapa.includes("dura") ? 1 : 0);
} );
$('#tab-pv-faja').on( "click", function() {
});
$('#tab-pv-faja').on("click", function () {
self.preview.setData(self.data);
self.preview.previewInteriorPlana('faja', self.isCosido, self.tipoTapa.includes("dura")?1:0);
self.preview.previewInteriorPlana('faja', self.isCosido, self.tipoTapa.includes("dura") ? 1 : 0);
} );
});
}
}

5
httpdocs/themes/vuexy/css/sk-datatables.css
View File

@ -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;