From 136b123cc00e24c16775f2202636aede755fbaa4 Mon Sep 17 00:00:00 2001
From: Lizandro Guarnizo <77708265+lizandrogd@users.noreply.github.com>
Date: Wed, 22 Jul 2026 21:45:25 -0500
Subject: [PATCH] fix: preview en tiempo real de firma Topaz en modal
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Usar GetSigImageB64 en el poll para actualizar el canvas del overlay
cada vez que cambia el número de puntos. SigImage/0 (SigWebRefresh)
solo devuelve el trazo actual; SigImage/1 acumula toda la firma.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 form_cliente.php           | 19 ++++++++++++++++++-
 ver_formulario_enviado.php | 19 ++++++++++++++++++-
 2 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/form_cliente.php b/form_cliente.php
index b0a1c8c..4ce1194 100644
--- a/form_cliente.php
+++ b/form_cliente.php
@@ -1321,13 +1321,30 @@ const topaz = (() => {
         $('topaz-pts').textContent = '0';
         _setStatus('Firme en el pad biométrico', false);
 
+        let _lastPts = -1;
         _poll = setInterval(() => {
             try {
                 const pts = NumberOfTabletPoints();
                 $('topaz-pts').textContent = pts;
                 const hasSig = pts > 0;
                 $('topaz-btn-aceptar').disabled = !hasSig;
-                if (hasSig) _setStatus('✅ Firma detectada — presione Aceptar', true);
+                if (hasSig) {
+                    _setStatus('✅ Firma detectada — presione Aceptar', true);
+                    if (pts !== _lastPts) {
+                        _lastPts = pts;
+                        GetSigImageB64(function(b64) {
+                            if (!b64) return;
+                            const img = new Image();
+                            img.onload = () => {
+                                const cv = document.getElementById('topaz-canvas');
+                                const cx = cv.getContext('2d');
+                                cx.clearRect(0, 0, cv.width, cv.height);
+                                cx.drawImage(img, 0, 0, cv.width, cv.height);
+                            };
+                            img.src = 'data:image/png;base64,' + b64;
+                        });
+                    }
+                }
             } catch(e) { _stopPoll(); }
         }, 400);
     }
diff --git a/ver_formulario_enviado.php b/ver_formulario_enviado.php
index 12f0be2..f8e3312 100644
--- a/ver_formulario_enviado.php
+++ b/ver_formulario_enviado.php
@@ -2603,12 +2603,29 @@ const topaz = (() => {
         document.getElementById('topaz-pts').textContent = '0';
         _setStatus('Firme en el pad biométrico', false);
 
+        let _lastPts = -1;
         _poll = setInterval(() => {
             try {
                 const pts = NumberOfTabletPoints();
                 document.getElementById('topaz-pts').textContent = pts;
                 document.getElementById('topaz-btn-aceptar').disabled = pts === 0;
-                if (pts > 0) _setStatus('✅ Firma detectada — presione Aceptar', true);
+                if (pts > 0) {
+                    _setStatus('✅ Firma detectada — presione Aceptar', true);
+                    if (pts !== _lastPts) {
+                        _lastPts = pts;
+                        GetSigImageB64(function(b64) {
+                            if (!b64) return;
+                            const img = new Image();
+                            img.onload = () => {
+                                const cv = document.getElementById('topaz-canvas');
+                                const cx = cv.getContext('2d');
+                                cx.clearRect(0, 0, cv.width, cv.height);
+                                cx.drawImage(img, 0, 0, cv.width, cv.height);
+                            };
+                            img.src = 'data:image/png;base64,' + b64;
+                        });
+                    }
+                }
             } catch(e) { _stopPoll(); }
         }, 400);
     }