mirror of
https://git.imnavajas.es/jjimenez/safekat.git
synced 2025-07-25 22:52:08 +00:00
resize svg previews
This commit is contained in:
amazuecos
@ -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'
|
||||
|
||||
];
|
||||
|
||||
@ -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'
|
||||
|
||||
];
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -11,7 +11,7 @@ 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') {
|
||||
@ -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;
|
||||
@ -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()
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -705,6 +725,13 @@ class previewFormas {
|
||||
}
|
||||
|
||||
previewEC.update();
|
||||
this.actualPreview = previewEC
|
||||
this.actualPreviewCallback = this.#portadaTapaBlanda
|
||||
this.setViewBoxToPreview()
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
@ -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) {
|
||||
@ -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()
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -19,31 +19,41 @@ class PreviewFormasAdmin{
|
||||
init() {
|
||||
|
||||
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('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 () {
|
||||
@ -51,12 +61,14 @@ class PreviewFormasAdmin{
|
||||
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 () {
|
||||
@ -64,6 +76,7 @@ class PreviewFormasAdmin{
|
||||
self.preview.setData(self.data);
|
||||
self.preview.previewInteriorPlana('cubierta', self.isCosido, self.tipoTapa.includes("dura") ? 1 : 0);
|
||||
|
||||
|
||||
});
|
||||
|
||||
$('#tab-pv-esquema-cubierta').on("click", function () {
|
||||
@ -72,6 +85,7 @@ class PreviewFormasAdmin{
|
||||
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 () {
|
||||
@ -79,6 +93,7 @@ class PreviewFormasAdmin{
|
||||
self.preview.setData(self.data);
|
||||
self.preview.previewInteriorPlana('sobrecubierta', self.isCosido, self.tipoTapa.includes("dura") ? 1 : 0);
|
||||
|
||||
|
||||
});
|
||||
|
||||
$('#tab-pv-faja').on("click", function () {
|
||||
@ -86,6 +101,7 @@ class PreviewFormasAdmin{
|
||||
self.preview.setData(self.data);
|
||||
self.preview.previewInteriorPlana('faja', self.isCosido, self.tipoTapa.includes("dura") ? 1 : 0);
|
||||
|
||||
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
Reference in New Issue
Block a user