Fix borderless FirmaEC rendering and bump to 1.2.22

This commit is contained in:
2026-05-22 12:02:44 -05:00
parent e67e7aa122
commit 2a0f272af1
13 changed files with 83 additions and 22 deletions
+5 -1
View File
@@ -2,10 +2,14 @@
## Versión actual
- Versión base: `1.2.21`
- Versión base: `1.2.22`
## Historial
### 1.2.22 - 2026-05-22
- `FirmaEC` deja de mostrar líneas de borde y separadores cuando la preferencia está en `Sin borde`, tanto al colocar la firma como en el PDF final.
### 1.2.21 - 2026-05-22
- `FirmaEC` respeta la opción `Sin borde` tanto en la vista previa web como en la firma visible del PDF.
+1 -1
View File
@@ -2,7 +2,7 @@
## Versión actual
- Base actual: `1.2.21`
- Base actual: `1.2.22`
- Fuente de verdad: [VERSION](/home/mgonzalez/desarrollo/react/linkedsign/VERSION)
- Historial de cambios: [CHANGELOG.md](/home/mgonzalez/desarrollo/react/linkedsign/CHANGELOG.md)
+1 -1
View File
@@ -2,7 +2,7 @@
## Versión actual
- Base actual: `1.2.21`
- Base actual: `1.2.22`
- Fuente de verdad: [VERSION](/home/mgonzalez/desarrollo/react/linkedsign/VERSION)
- Historial de cambios: [CHANGELOG.md](/home/mgonzalez/desarrollo/react/linkedsign/CHANGELOG.md)
+1 -1
View File
@@ -2,7 +2,7 @@
## Versión actual
- Base actual: `1.2.21`
- Base actual: `1.2.22`
- Fuente de verdad: [VERSION](/home/mgonzalez/desarrollo/react/linkedsign/VERSION)
- Historial de cambios: [CHANGELOG.md](/home/mgonzalez/desarrollo/react/linkedsign/CHANGELOG.md)
+1 -1
View File
@@ -1 +1 @@
1.2.21
1.2.22
+2 -2
View File
@@ -18,8 +18,8 @@ android {
applicationId "net.linkedcorp.linkedsign"
minSdk 26
targetSdk 35
versionCode 10221
versionName "1.2.21"
versionCode 10222
versionName "1.2.22"
buildConfigField "String", "API_BASE_URL", "\"${apiBaseUrl}\""
}
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "linkedsign-backend",
"version": "1.2.21",
"version": "1.2.22",
"private": true,
"description": "Initial backend for LinkedSign",
"main": "src/server.js",
@@ -301,9 +301,11 @@ async function drawStyleFirmaEC(pdfDoc, page, sx, sy, sw, sh, { signerName, veri
const qrY = sy + (sh - qrSize) / 2;
page.drawImage(qrImage, { x: qrX, y: qrY, width: qrSize, height: qrSize });
// Vertical divider
// Vertical divider belongs to the bordered variant only.
const divX = qrOnRight ? qrX - 4 : sx + qrSize + 8;
if (useBorder) {
page.drawLine({ start: { x: divX, y: sy + 6 }, end: { x: divX, y: sy + sh - 6 }, thickness: 0.5, color: rgb(0.55, 0.55, 0.58) });
}
// Text column
const textX = qrOnRight ? sx + 6 : divX + 5;
+1 -1
View File
@@ -1,7 +1,7 @@
{
"name": "frontend",
"private": true,
"version": "1.2.21",
"version": "1.2.22",
"type": "module",
"scripts": {
"dev": "vite",
@@ -13,7 +13,7 @@ const SIG_W = 200;
const SIG_H = 60;
const getSignatureWidth = (style, signerName = '') => {
if (style !== 'qr') return SIG_W;
if (style !== 'qr' && style !== 'firmaec') return SIG_W;
const normalizedName = signerName.trim();
const calculatedWidth = 78 + (normalizedName.length * 4.9);
return Math.max(170, Math.min(270, Math.round(calculatedWidth)));
@@ -162,6 +162,34 @@ export default function PdfSignaturePlacer({
);
}
if (signatureStyle === 'firmaec') {
return (
<div className="sig-preview-body sig-preview-body--firmaec">
{qrPosition === 'left' && (
<>
<div className="sig-preview-qr-box sig-preview-qr-box--firmaec" data-background={qrBackground}>
<div className="sig-preview-qr-pattern sig-preview-qr-pattern--firmaec" />
</div>
{qrBorder === 'line' && <div className="sig-preview-divider" />}
</>
)}
<div className="sig-preview-text sig-preview-text--firmaec">
<small>Validar unicamente en FirmaEC.</small>
<small>Firmado electronicamente por:</small>
<strong>{String(signerName).toUpperCase()}</strong>
</div>
{qrPosition === 'right' && (
<>
{qrBorder === 'line' && <div className="sig-preview-divider" />}
<div className="sig-preview-qr-box sig-preview-qr-box--firmaec" data-background={qrBackground}>
<div className="sig-preview-qr-pattern sig-preview-qr-pattern--firmaec" />
</div>
</>
)}
</div>
);
}
if (signatureStyle === 'image') {
return (
<div className="sig-preview-body sig-preview-body--image">
@@ -54,7 +54,7 @@ const STYLES = [
</svg>
<span className="sp-qr-hint">Escanear</span>
</div>
<div className="sp-divider-v" />
{qrBorder === 'line' && <div className="sp-divider-v" />}
</>
)}
<div className="sp-info sp-info--qr">
@@ -64,7 +64,7 @@ const STYLES = [
</div>
{qrPosition === 'right' && (
<>
<div className="sp-divider-v" />
{qrBorder === 'line' && <div className="sp-divider-v" />}
<div className="sp-qr-box" data-background={qrBackground} data-border={qrBorder}>
<svg viewBox="0 0 10 10" className="sp-qr-svg" xmlns="http://www.w3.org/2000/svg">
{[0,1,2,3,4,5,6,7,8,9].map(r =>
@@ -110,7 +110,7 @@ const STYLES = [
<rect x={0} y={7} width={3} height={3} fill="none" stroke="#000" strokeWidth={0.3} />
</svg>
</div>
<div className="sp-divider-v" />
{qrBorder === 'line' && <div className="sp-divider-v" />}
</>
)}
<div className="sp-firmaec-text">
@@ -120,7 +120,7 @@ const STYLES = [
</div>
{qrPosition === 'right' && (
<>
<div className="sp-divider-v" />
{qrBorder === 'line' && <div className="sp-divider-v" />}
<div className="sp-qr-box sp-qr-box--firmaec" data-background={qrBackground}>
<svg viewBox="0 0 10 10" className="sp-qr-svg" xmlns="http://www.w3.org/2000/svg">
{[0,1,2,3,4,5,6,7,8,9].map(r =>
+27
View File
@@ -1917,6 +1917,33 @@ select {
overflow: hidden;
font-family: 'Courier New', Courier, monospace;
}
.sig-preview-body--firmaec {
display: flex;
align-items: center;
gap: 8px;
height: 100%;
}
.sig-preview-qr-box--firmaec {
background: #fff;
}
.sig-preview-qr-pattern--firmaec {
background:
linear-gradient(90deg, #111 20%, transparent 20% 40%, #111 40% 60%, transparent 60% 80%, #111 80%),
linear-gradient(#111 20%, transparent 20% 40%, #111 40% 60%, transparent 60% 80%, #111 80%);
opacity: 0.9;
}
.sig-preview-text--firmaec {
font-family: 'Courier New', Courier, monospace;
gap: 3px;
}
.sig-preview-text--firmaec strong {
text-transform: uppercase;
}
.sig-preview-divider {
width: 1px;
height: 70%;
background: rgba(85, 85, 88, 0.58);
}
.sig-preview--image {
display: flex;
align-items: stretch;
@@ -316,9 +316,9 @@ export default function SignaturesPage() {
<h4>Estilo aplicado</h4>
<p>La firma usará tu configuración guardada en el menú <strong>Estilo Firma</strong>.</p>
<p><strong>Tipo:</strong> {form.signatureStyle}</p>
{form.signatureStyle === 'qr' && <p><strong>Posición QR:</strong> {form.qrPosition === 'left' ? 'Izquierda' : 'Derecha'}</p>}
{form.signatureStyle === 'qr' && <p><strong>Fondo:</strong> {form.qrBackground === 'transparent' ? 'Transparente' : 'Suave'}</p>}
{form.signatureStyle === 'qr' && <p><strong>Borde:</strong> {form.qrBorder === 'none' ? 'Sin borde' : 'Con borde'}</p>}
{(form.signatureStyle === 'qr' || form.signatureStyle === 'firmaec') && <p><strong>Posición QR:</strong> {form.qrPosition === 'left' ? 'Izquierda' : 'Derecha'}</p>}
{(form.signatureStyle === 'qr' || form.signatureStyle === 'firmaec') && <p><strong>Fondo:</strong> {form.qrBackground === 'transparent' ? 'Transparente' : 'Suave'}</p>}
{(form.signatureStyle === 'qr' || form.signatureStyle === 'firmaec') && <p><strong>Borde:</strong> {form.qrBorder === 'none' ? 'Sin borde' : 'Con borde'}</p>}
</div>
</>
)}
@@ -425,9 +425,9 @@ export default function SignaturesPage() {
<p><strong>Razón:</strong> {form.reason}</p>
{form.location && <p><strong>Ubicación:</strong> {form.location}</p>}
<p><strong>Estilo visual:</strong> {form.signatureStyle}</p>
{form.signatureStyle === 'qr' && <p><strong>Posición QR:</strong> {form.qrPosition === 'left' ? 'Izquierda' : 'Derecha'}</p>}
{form.signatureStyle === 'qr' && <p><strong>Fondo:</strong> {form.qrBackground === 'transparent' ? 'Transparente' : 'Suave'}</p>}
{form.signatureStyle === 'qr' && <p><strong>Borde:</strong> {form.qrBorder === 'none' ? 'Sin borde' : 'Con borde'}</p>}
{(form.signatureStyle === 'qr' || form.signatureStyle === 'firmaec') && <p><strong>Posición QR:</strong> {form.qrPosition === 'left' ? 'Izquierda' : 'Derecha'}</p>}
{(form.signatureStyle === 'qr' || form.signatureStyle === 'firmaec') && <p><strong>Fondo:</strong> {form.qrBackground === 'transparent' ? 'Transparente' : 'Suave'}</p>}
{(form.signatureStyle === 'qr' || form.signatureStyle === 'firmaec') && <p><strong>Borde:</strong> {form.qrBorder === 'none' ? 'Sin borde' : 'Con borde'}</p>}
</>
)}
</div>