WebcFirmaDigital

Webc Firma Digital es un Web Component tipo modal con un canvas para escribir la firma.

Este Web Component está construido con Lit v3.3.0 y no tiene dependencias externas.

Índice

• Arquitectura Hexagonal
• Estructura del proyecto
• Datos de entrada
• Datos de salida
• Configuración
• Cómo utilizar
  • Uso de la etiqueta
  • Recepción de los datos
  • Observaciones
• Licencia
• Autores
• Instrucciones para el desarrollo

Arquitectura Hexagonal

La librería está diseñada con Hexagonal Architecture, lo que significa que separa las capas internas (dominio y aplicación) de las capas externas (infraestructura y adaptadores). Esto permite que la lógica de negocio sea independiente de los frameworks y herramientas específicas.

Estructura del proyecto

📂 webc-firma-digital
┣ 📂 src
┃ ┣ 📂 domain                # Lógica de negocio y modelos
┃ ┃ ┣ 📂 models              # Modelos de datos y puertos
┃ ┃ ┗ 📂 usecase             # Casos de uso (Aplicación de negocio)
┃ ┣ 📂 infrastructure        # Comunicación con el exterior (Servicios, APIs, etc.)
┃ ┃ ┣ 📂 dto                 # Data Transfer Objects
┃ ┃ ┗ 📂 repositories        # Implementacion de los puertos
┃ ┃ 📂 modules               # Módulos de la aplicación
┃ ┃ ┣ 📂 canvas              # Módulo de canvas
┃ ┃ ┣ 📂 firma-digital       # Módulo de firma digital
┃ ┃ ┗ 📂 iconos              # Modulo de iconos

Datos de entrada del web component

| Atributo | Descripción | |--------------------|----------------------------------------------------| | maxWidth (string) | (Opcional) Maximo ancho del Modal. Default: 1200px |
| width (string) | (Opcional) Ancho del modal. Default: 90% |
| maxHeight (string) | (Opcional) Maximo alto del Modal. Default: 800px | | height (string) | (Opcional) Alto del Modal. Default: 90% |

Datos de salida del web component

| Atributo | Descripción | |-------------------------------|---------------------------------------------| | base64? (string - null) | Imagen de la firna en Base64 |
| timestamp? (Date - null) | Fecha y Hora del guardado de la firma |
| firmaVacia (boolean) | Indicador si viene la firma |
| numeroTrazos? (number - null) | Número de trazos realizados en el canvas |

Configuración

El Web Componnet se puede utilizar de varias formas

1. Instalacion con npm

   npm install webc-firma-digital

2. Utilización con CDN

   <script type="module" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/component-firma-digital.min.js"></script>

   Nota: Este script puede cambiar con cada versión, por lo que se recomienda verificar en la pagina jsdelivr.

Como utilizar

Uso de la etiqueta

Para utilizar se debe incluir la etiqueta webc-firma-digital en el html. Y tambien se debe incluir el boton que abrira el modal de la firma.

<webc-firma-digital
  id="modalFirma"
  max-width="100%"   <!-- opcional -->
  width="100%"         <!-- opcional -->
  max-height="100%"  <!-- opcional -->
  height="100%"        <!-- opcional -->
></webc-firma-digital>

<button id="btnAbrirFirma">Abrir Firma</button>

Recepción de los datos

Se debe crear una interface con estos atributos

interface FirmaDigitalDto {
    imagenBase64?: string | null;
    timestamp?: Date | null;
    numeroTrazos?: number | null;
    firmaVacia: boolean;
}

Se debe capturar el evento de esta forma

const modal = document.getElementById('modalFirma');

document.getElementById('btnAbrirFirma')
    .addEventListener('click', () => {
        modal.abrir();  // método expuesto por <webc-firma-digital>
    });

modal.addEventListener('firma-digital', e => {
    console.log(e.detail); //e.detail retorna el objeto con todos los datos
});

Observaciones

Cerrar

Cuando el usuario pulsa “Cerrar” el componente emite:

{ firmaVacia: true }

Guardar firma

Se comprueba que se haya dibujado al menos el número mínimo de trazos. Si la validación falla, no se cierra y se muestra un error. Si es exitosa, se emite:

{
firmaVacia: false, 
imagenBase64: "<data:image/png;base64,...>", 
numeroTrazos: 31
timestamp: new Date(),
}

Licencia

Este componente es software propietario de TCC. Queda restringido a proyectos internos y no puede distribuirse ni reutilizarse fuera de la organización.

Autores

• Camiliño Andrés Calle Coavas - Analista Desarrollador - Softcaribbean

Instrucciones para el desarrollo

Correr el proyecto

npx vite

Compilar y publicar libreria

Paso 1: Actualizar la versión en el archivo package.json de la libreria

Paso 2: Compilar la librería con el siguiente comando:

npm run build

Paso 3: Ejecutar el siguiente comando:

npm pack

Paso 4: Publicar npm publish

npm publish