715 lines
29 KiB
Vue
715 lines
29 KiB
Vue
<script setup>
|
|
import { ref, onMounted, computed } from 'vue';
|
|
import { PDFDocument, rgb, StandardFonts } from 'pdf-lib';
|
|
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
|
import Draggable from '@Holos/PDF/Draggable.vue';
|
|
import CanvasElement from '@Holos/PDF/Canvas.vue';
|
|
import PDFViewport from '@Holos/PDF/PDFViewport.vue';
|
|
import TextFormatter from '@Holos/PDF/TextFormatter.vue';
|
|
|
|
/** Estado reactivo */
|
|
const pages = ref([{ id: 1, elements: [] }]);
|
|
const selectedElementId = ref(null);
|
|
const elementCounter = ref(0);
|
|
const documentTitle = ref('Documento sin título');
|
|
const isExporting = ref(false);
|
|
const currentPage = ref(1);
|
|
const pageIdCounter = ref(1); // <-- Agregar contador separado para páginas
|
|
|
|
/** Estado para tamaño de página */
|
|
const currentPageSize = ref({
|
|
width: 794, // A4 por defecto
|
|
height: 1123
|
|
});
|
|
|
|
/** Manejar cambio de tamaño de página */
|
|
const handlePageSizeChange = (sizeData) => {
|
|
currentPageSize.value = sizeData.dimensions;
|
|
// Aquí podrías ajustar elementos existentes si es necesario
|
|
window.Notify.info(`Tamaño de página cambiado a ${sizeData.size}`);
|
|
};
|
|
|
|
// Actualizar el método moveElement para usar el tamaño dinámico
|
|
const moveElement = (moveData) => {
|
|
const element = allElements.value.find(el => el.id === moveData.id);
|
|
if (element) {
|
|
element.x = Math.max(0, Math.min(currentPageSize.value.width - (element.width || 200), moveData.x));
|
|
element.y = Math.max(0, Math.min(currentPageSize.value.height - (element.height || 40), moveData.y));
|
|
}
|
|
};
|
|
|
|
/** Referencias */
|
|
const viewportRef = ref(null);
|
|
|
|
/** Referencias adicionales */
|
|
const textFormatterElement = ref(null);
|
|
const showTextFormatter = ref(false);
|
|
|
|
const selectElement = (elementId) => {
|
|
selectedElementId.value = elementId;
|
|
const selectedEl = allElements.value.find(el => el.id === elementId);
|
|
showTextFormatter.value = selectedEl?.type === 'text';
|
|
textFormatterElement.value = selectedEl;
|
|
};
|
|
|
|
const updateElement = (update) => {
|
|
const element = allElements.value.find(el => el.id === update.id);
|
|
if (element) {
|
|
Object.assign(element, update);
|
|
|
|
// Si se actualiza el formato, actualizar la referencia
|
|
if (update.formatting && textFormatterElement.value?.id === update.id) {
|
|
textFormatterElement.value = { ...element };
|
|
}
|
|
}
|
|
};
|
|
|
|
const handleSmartAlign = (alignData) => {
|
|
const element = allElements.value.find(el => el.id === alignData.id);
|
|
if (element && element.type === 'text') {
|
|
const pageWidth = currentPageSize.value.width;
|
|
const elementWidth = element.width || 200;
|
|
|
|
let newX = element.x;
|
|
switch (alignData.align) {
|
|
case 'center':
|
|
newX = (pageWidth - elementWidth) / 2;
|
|
break;
|
|
case 'right':
|
|
newX = pageWidth - elementWidth - 50;
|
|
break;
|
|
case 'left':
|
|
default:
|
|
newX = 50;
|
|
}
|
|
|
|
// Actualizar posición y formato
|
|
Object.assign(element, {
|
|
x: newX,
|
|
formatting: alignData.formatting
|
|
});
|
|
|
|
textFormatterElement.value = { ...element };
|
|
}
|
|
};
|
|
|
|
/** Tipos de elementos disponibles */
|
|
const availableElements = [
|
|
{
|
|
type: 'text',
|
|
icon: 'text_fields',
|
|
title: 'Texto',
|
|
description: 'Texto enriquecido con formato'
|
|
},
|
|
{
|
|
type: 'image',
|
|
icon: 'image',
|
|
title: 'Imagen',
|
|
description: 'Subir y editar imágenes'
|
|
},
|
|
{
|
|
type: 'table',
|
|
icon: 'table_chart',
|
|
title: 'Tabla',
|
|
description: 'Tabla con filas y columnas'
|
|
}
|
|
];
|
|
|
|
/** Propiedades computadas */
|
|
const allElements = computed(() => {
|
|
return pages.value.flatMap(page => page.elements);
|
|
});
|
|
|
|
const totalElements = computed(() => {
|
|
return allElements.value.length;
|
|
});
|
|
|
|
/** Métodos del canvas */
|
|
const handleDrop = (dropData) => {
|
|
try {
|
|
const data = JSON.parse(dropData.originalEvent.dataTransfer.getData('text/plain'));
|
|
|
|
const newElement = {
|
|
id: `element-${++elementCounter.value}`,
|
|
type: data.type,
|
|
pageIndex: dropData.pageIndex,
|
|
x: dropData.x,
|
|
y: dropData.y,
|
|
width: data.type === 'table' ? 300 : data.type === 'image' ? 200 : 200,
|
|
height: data.type === 'table' ? 120 : data.type === 'image' ? 150 : 40,
|
|
content: getDefaultContent(data.type),
|
|
fileName: getDefaultFileName(data.type),
|
|
created_at: new Date().toISOString()
|
|
};
|
|
|
|
pages.value[dropData.pageIndex].elements.push(newElement);
|
|
selectedElementId.value = newElement.id;
|
|
} catch (error) {
|
|
console.error('Error al procesar elemento arrastrado:', error);
|
|
}
|
|
};
|
|
|
|
const getDefaultContent = (type) => {
|
|
switch(type) {
|
|
case 'text':
|
|
return 'Nuevo texto';
|
|
case 'table':
|
|
return {
|
|
rows: 3,
|
|
cols: 3,
|
|
data: [
|
|
['Encabezado 1', 'Encabezado 2', 'Encabezado 3'],
|
|
['Fila 1, Col 1', 'Fila 1, Col 2', 'Fila 1, Col 3'],
|
|
['Fila 2, Col 1', 'Fila 2, Col 2', 'Fila 2, Col 3']
|
|
]
|
|
};
|
|
case 'image':
|
|
return null;
|
|
default:
|
|
return null;
|
|
}
|
|
};
|
|
|
|
const getDefaultFileName = (type) => {
|
|
switch(type) {
|
|
case 'table':
|
|
return 'tabla.csv';
|
|
case 'image':
|
|
return null;
|
|
default:
|
|
return null;
|
|
}
|
|
};
|
|
|
|
const handleDragOver = (event) => {
|
|
event.preventDefault();
|
|
};
|
|
|
|
const deleteElement = (elementId) => {
|
|
const index = allElements.value.findIndex(el => el.id === elementId);
|
|
if (index !== -1) {
|
|
const pageIndex = Math.floor(index / 3); // Suponiendo 3 elementos por página
|
|
pages.value[pageIndex].elements.splice(index % 3, 1);
|
|
if (selectedElementId.value === elementId) {
|
|
selectedElementId.value = null;
|
|
}
|
|
}
|
|
};
|
|
|
|
/** Paginación */
|
|
const addPage = () => {
|
|
pageIdCounter.value++; // <-- Incrementar contador independiente
|
|
pages.value.push({
|
|
id: pageIdCounter.value,
|
|
elements: []
|
|
});
|
|
};
|
|
|
|
const deletePage = (pageIndex) => {
|
|
if (pages.value.length > 1) {
|
|
// Mover elementos de la página eliminada a la página anterior
|
|
const elementsToMove = pages.value[pageIndex].elements;
|
|
if (pageIndex > 0 && elementsToMove.length > 0) {
|
|
elementsToMove.forEach(element => {
|
|
element.pageIndex = pageIndex - 1;
|
|
pages.value[pageIndex - 1].elements.push(element);
|
|
});
|
|
}
|
|
|
|
pages.value.splice(pageIndex, 1);
|
|
|
|
// Actualizar índices de página de elementos restantes
|
|
pages.value.forEach((page, index) => {
|
|
page.elements.forEach(element => {
|
|
element.pageIndex = index;
|
|
});
|
|
});
|
|
|
|
// Ajustar página actual si es necesario
|
|
if (currentPage.value > pages.value.length) {
|
|
currentPage.value = pages.value.length;
|
|
}
|
|
}
|
|
};
|
|
|
|
/** Métodos de acciones rápidas */
|
|
const addQuickElement = (type) => {
|
|
const targetPageIndex = currentPage.value - 1;
|
|
const existingElements = pages.value[targetPageIndex].elements.length;
|
|
|
|
const newElement = {
|
|
id: `element-${++elementCounter.value}`,
|
|
type: type,
|
|
pageIndex: targetPageIndex,
|
|
x: 80 + (existingElements * 20),
|
|
y: 80 + (existingElements * 20),
|
|
width: type === 'table' ? 300 : type === 'image' ? 200 : 200,
|
|
height: type === 'table' ? 120 : type === 'image' ? 150 : 40,
|
|
content: getDefaultContent(type),
|
|
fileName: getDefaultFileName(type),
|
|
created_at: new Date().toISOString()
|
|
};
|
|
|
|
pages.value[targetPageIndex].elements.push(newElement);
|
|
selectedElementId.value = newElement.id;
|
|
};
|
|
|
|
const exportPDF = async () => {
|
|
if (totalElements.value === 0) {
|
|
window.Notify.warning('No hay elementos para exportar');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
isExporting.value = true;
|
|
window.Notify.info('Generando PDF...');
|
|
|
|
// Crear un nuevo documento PDF con el tamaño de página seleccionado
|
|
const pdfDoc = await PDFDocument.create();
|
|
|
|
// Convertir dimensiones de pixels a puntos (1 px = 0.75 puntos)
|
|
const pageWidthPoints = currentPageSize.value.width * 0.75;
|
|
const pageHeightPoints = currentPageSize.value.height * 0.75;
|
|
|
|
let currentPDFPage = pdfDoc.addPage([pageWidthPoints, pageHeightPoints]);
|
|
let currentPageHeight = pageHeightPoints;
|
|
|
|
// Obtener fuentes
|
|
const helveticaFont = await pdfDoc.embedFont(StandardFonts.Helvetica);
|
|
const helveticaBoldFont = await pdfDoc.embedFont(StandardFonts.HelveticaBold);
|
|
const courierFont = await pdfDoc.embedFont(StandardFonts.Courier);
|
|
|
|
// Procesar páginas del maquetador
|
|
for (let pageIndex = 0; pageIndex < pages.value.length; pageIndex++) {
|
|
const page = pages.value[pageIndex];
|
|
|
|
// Crear nueva página PDF si no es la primera
|
|
if (pageIndex > 0) {
|
|
currentPDFPage = pdfDoc.addPage([pageWidthPoints, pageHeightPoints]);
|
|
currentPageHeight = pageHeightPoints;
|
|
}
|
|
|
|
// Ordenar elementos de esta página por posición
|
|
const sortedElements = [...page.elements].sort((a, b) => {
|
|
if (Math.abs(a.y - b.y) < 20) {
|
|
return a.x - b.x;
|
|
}
|
|
return a.y - b.y;
|
|
});
|
|
|
|
// Procesar elementos de la página
|
|
for (const element of sortedElements) {
|
|
// Calcular posición en el PDF manteniendo proporciones
|
|
const scaleX = pageWidthPoints / currentPageSize.value.width;
|
|
const scaleY = pageHeightPoints / currentPageSize.value.height;
|
|
|
|
const x = Math.max(50, element.x * scaleX);
|
|
const y = currentPageHeight - (element.y * scaleY) - 50;
|
|
|
|
switch (element.type) {
|
|
case 'text':
|
|
if (element.content) {
|
|
// Obtener formato del elemento
|
|
const formatting = element.formatting || {};
|
|
const fontSize = formatting.fontSize || 12;
|
|
const isBold = formatting.bold || false;
|
|
const isItalic = formatting.italic || false;
|
|
const textAlign = formatting.textAlign || 'left';
|
|
|
|
// Convertir color hexadecimal a RGB
|
|
let textColor = rgb(0, 0, 0); // Negro por defecto
|
|
if (formatting.color) {
|
|
const hex = formatting.color.replace('#', '');
|
|
const r = parseInt(hex.substr(0, 2), 16) / 255;
|
|
const g = parseInt(hex.substr(2, 2), 16) / 255;
|
|
const b = parseInt(hex.substr(4, 2), 16) / 255;
|
|
textColor = rgb(r, g, b);
|
|
}
|
|
|
|
// Seleccionar fuente
|
|
let font = helveticaFont;
|
|
if (isBold && !isItalic) {
|
|
font = helveticaBoldFont;
|
|
} else if (isBold && isItalic) {
|
|
// Para negrita + cursiva, usar negrita (limitación de PDF-lib)
|
|
font = helveticaBoldFont;
|
|
}
|
|
|
|
// Dividir texto largo en líneas
|
|
const words = element.content.split(' ');
|
|
const lines = [];
|
|
let currentLine = '';
|
|
const maxWidth = Math.min(pageWidthPoints - 100, (element.width || 200) * scaleX);
|
|
|
|
for (const word of words) {
|
|
const testLine = currentLine + (currentLine ? ' ' : '') + word;
|
|
const testWidth = font.widthOfTextAtSize(testLine, fontSize);
|
|
|
|
if (testWidth <= maxWidth) {
|
|
currentLine = testLine;
|
|
} else {
|
|
if (currentLine) lines.push(currentLine);
|
|
currentLine = word;
|
|
}
|
|
}
|
|
if (currentLine) lines.push(currentLine);
|
|
|
|
// Calcular posición X según alineación
|
|
lines.forEach((line, index) => {
|
|
let lineX = x;
|
|
const lineWidth = font.widthOfTextAtSize(line, fontSize);
|
|
|
|
if (textAlign === 'center') {
|
|
lineX = x + (maxWidth - lineWidth) / 2;
|
|
} else if (textAlign === 'right') {
|
|
lineX = x + maxWidth - lineWidth;
|
|
}
|
|
|
|
currentPDFPage.drawText(line, {
|
|
x: Math.max(50, lineX),
|
|
y: y - (index * (fontSize + 3)),
|
|
size: fontSize,
|
|
font: font,
|
|
color: textColor,
|
|
});
|
|
});
|
|
}
|
|
break;
|
|
|
|
case 'image':
|
|
if (element.content && element.content.startsWith('data:image')) {
|
|
try {
|
|
const base64Data = element.content.split(',')[1];
|
|
const imageBytes = Uint8Array.from(
|
|
atob(base64Data),
|
|
c => c.charCodeAt(0)
|
|
);
|
|
|
|
let image;
|
|
if (element.content.includes('image/jpeg') || element.content.includes('image/jpg')) {
|
|
image = await pdfDoc.embedJpg(imageBytes);
|
|
} else if (element.content.includes('image/png')) {
|
|
image = await pdfDoc.embedPng(imageBytes);
|
|
}
|
|
|
|
if (image) {
|
|
const maxWidth = Math.min(pageWidthPoints - 100, (element.width || 200) * scaleX);
|
|
const maxHeight = Math.min(300, (element.height || 150) * scaleY);
|
|
|
|
const imageAspectRatio = image.width / image.height;
|
|
let displayWidth = maxWidth;
|
|
let displayHeight = maxWidth / imageAspectRatio;
|
|
|
|
if (displayHeight > maxHeight) {
|
|
displayHeight = maxHeight;
|
|
displayWidth = maxHeight * imageAspectRatio;
|
|
}
|
|
|
|
currentPDFPage.drawImage(image, {
|
|
x: x,
|
|
y: y - displayHeight,
|
|
width: displayWidth,
|
|
height: displayHeight,
|
|
});
|
|
}
|
|
} catch (imageError) {
|
|
console.warn('Error al procesar imagen:', imageError);
|
|
// Placeholder para imagen con error
|
|
currentPDFPage.drawRectangle({
|
|
x: x,
|
|
y: y - 60,
|
|
width: 100 * scaleX,
|
|
height: 60 * scaleY,
|
|
borderColor: rgb(0.7, 0.7, 0.7),
|
|
borderWidth: 1,
|
|
});
|
|
|
|
currentPDFPage.drawText('[Imagen no disponible]', {
|
|
x: x + 5,
|
|
y: y - 35,
|
|
size: 10,
|
|
font: helveticaFont,
|
|
color: rgb(0.7, 0.7, 0.7),
|
|
});
|
|
}
|
|
} else {
|
|
// Placeholder para imagen vacía
|
|
currentPDFPage.drawRectangle({
|
|
x: x,
|
|
y: y - 60,
|
|
width: 100 * scaleX,
|
|
height: 60 * scaleY,
|
|
borderColor: rgb(0.7, 0.7, 0.7),
|
|
borderWidth: 1,
|
|
borderDashArray: [3, 3],
|
|
});
|
|
|
|
currentPDFPage.drawText('[Imagen]', {
|
|
x: x + 25,
|
|
y: y - 35,
|
|
size: 10,
|
|
font: helveticaFont,
|
|
color: rgb(0.7, 0.7, 0.7),
|
|
});
|
|
}
|
|
break;
|
|
|
|
case 'table':
|
|
if (element.content && element.content.data) {
|
|
const tableData = element.content.data;
|
|
const cellWidth = 80 * scaleX;
|
|
const cellHeight = 20 * scaleY;
|
|
const tableWidth = tableData[0].length * cellWidth;
|
|
const tableHeight = tableData.length * cellHeight;
|
|
|
|
currentPDFPage.drawRectangle({
|
|
x: x,
|
|
y: y - tableHeight,
|
|
width: tableWidth,
|
|
height: tableHeight,
|
|
borderColor: rgb(0.3, 0.3, 0.3),
|
|
borderWidth: 1,
|
|
});
|
|
|
|
tableData.forEach((row, rowIndex) => {
|
|
row.forEach((cell, colIndex) => {
|
|
const cellX = x + (colIndex * cellWidth);
|
|
const cellY = y - (rowIndex * cellHeight) - 15;
|
|
|
|
currentPDFPage.drawRectangle({
|
|
x: cellX,
|
|
y: y - ((rowIndex + 1) * cellHeight),
|
|
width: cellWidth,
|
|
height: cellHeight,
|
|
borderColor: rgb(0.7, 0.7, 0.7),
|
|
borderWidth: 0.5,
|
|
});
|
|
|
|
const maxChars = Math.floor(cellWidth / 8);
|
|
const displayText = cell.length > maxChars ?
|
|
cell.substring(0, maxChars - 3) + '...' : cell;
|
|
|
|
currentPDFPage.drawText(displayText, {
|
|
x: cellX + 5,
|
|
y: cellY,
|
|
size: 8,
|
|
font: helveticaFont,
|
|
color: rowIndex === 0 ? rgb(0.2, 0.2, 0.8) : rgb(0, 0, 0),
|
|
});
|
|
});
|
|
});
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Generar PDF
|
|
const pdfBytes = await pdfDoc.save();
|
|
|
|
// Descargar
|
|
const blob = new Blob([pdfBytes], { type: 'application/pdf' });
|
|
const url = URL.createObjectURL(blob);
|
|
const link = document.createElement('a');
|
|
link.href = url;
|
|
link.download = `${documentTitle.value.replace(/\s+/g, '_')}.pdf`;
|
|
document.body.appendChild(link);
|
|
link.click();
|
|
document.body.removeChild(link);
|
|
URL.revokeObjectURL(url);
|
|
|
|
window.Notify.success('PDF generado correctamente');
|
|
|
|
} catch (error) {
|
|
console.error('Error al generar PDF:', error);
|
|
window.Notify.error('Error al generar el PDF');
|
|
} finally {
|
|
isExporting.value = false;
|
|
}
|
|
};
|
|
|
|
// Función auxiliar para calcular la altura aproximada de un elemento
|
|
const getElementHeight = (element) => {
|
|
switch (element.type) {
|
|
case 'text':
|
|
if (!element.content) return 20;
|
|
const lines = Math.ceil(element.content.length / 50);
|
|
return lines * 15 + 10;
|
|
case 'table':
|
|
if (!element.content || !element.content.data) return 60;
|
|
const tableRows = element.content.data.length;
|
|
return (tableRows * 20) + 20;
|
|
case 'image':
|
|
return Math.min(300, (element.height || 150) * 0.75) + 30;
|
|
default:
|
|
return 40;
|
|
}
|
|
};
|
|
|
|
const clearCanvas = () => {
|
|
if (confirm('¿Estás seguro de que quieres limpiar el canvas? Se perderán todos los elementos.')) {
|
|
pages.value = [{ id: 1, elements: [] }];
|
|
selectedElementId.value = null;
|
|
elementCounter.value = 0;
|
|
pageIdCounter.value = 1; // <-- Resetear también el contador de páginas
|
|
currentPage.value = 1;
|
|
}
|
|
};
|
|
|
|
/** Atajos de teclado */
|
|
const handleKeydown = (event) => {
|
|
if (event.key === 'Delete' && selectedElementId.value) {
|
|
deleteElement(selectedElementId.value);
|
|
}
|
|
|
|
if (event.key === 'Escape') {
|
|
selectedElementId.value = null;
|
|
}
|
|
};
|
|
|
|
/** Ciclo de vida */
|
|
onMounted(() => {
|
|
document.addEventListener('keydown', handleKeydown);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex h-screen bg-gray-50 dark:bg-primary-d/50">
|
|
<!-- Panel Izquierdo - Elementos (sin cambios) -->
|
|
<div class="w-64 bg-white dark:bg-primary-d border-r border-gray-200 dark:border-primary/20 flex flex-col">
|
|
<!-- Header del panel -->
|
|
<div class="p-4 border-b border-gray-200 dark:border-primary/20">
|
|
<div class="flex items-center gap-2 mb-4">
|
|
<GoogleIcon name="text_snippet" class="text-blue-600 dark:text-blue-400 text-xl" />
|
|
<h2 class="font-semibold text-gray-900 dark:text-primary-dt text-sm">
|
|
Diseñador de Documentos
|
|
</h2>
|
|
</div>
|
|
|
|
<!-- Título del documento -->
|
|
<input
|
|
v-model="documentTitle"
|
|
class="w-full px-2 py-1 text-xs border border-gray-200 rounded mb-3 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt"
|
|
placeholder="Título del documento"
|
|
/>
|
|
|
|
<!-- Botón de exportación PDF -->
|
|
<button
|
|
@click="exportPDF"
|
|
:disabled="isExporting"
|
|
:class="[
|
|
'w-full flex items-center justify-center gap-2 px-3 py-2 text-sm rounded transition-colors',
|
|
isExporting
|
|
? 'bg-gray-400 text-white cursor-not-allowed'
|
|
: 'bg-red-600 hover:bg-red-700 text-white'
|
|
]"
|
|
>
|
|
<GoogleIcon :name="isExporting ? 'hourglass_empty' : 'picture_as_pdf'" class="text-sm" />
|
|
{{ isExporting ? 'Generando PDF...' : 'Exportar PDF' }}
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Sección Elementos -->
|
|
<div class="p-4 flex-1 overflow-y-auto">
|
|
<h3 class="text-xs font-semibold text-gray-500 dark:text-primary-dt/70 uppercase tracking-wider mb-3">
|
|
Elementos
|
|
</h3>
|
|
<p class="text-xs text-gray-400 dark:text-primary-dt/70 mb-4">
|
|
Arrastra elementos al canvas para crear tu documento
|
|
</p>
|
|
|
|
<div class="space-y-3">
|
|
<Draggable
|
|
v-for="element in availableElements"
|
|
:key="element.type"
|
|
:type="element.type"
|
|
:icon="element.icon"
|
|
:title="element.title"
|
|
:description="element.description"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Agregar rápido -->
|
|
<h3 class="text-xs font-semibold text-gray-500 dark:text-primary-dt/70 uppercase tracking-wider mt-6 mb-3">
|
|
Agregar rápido
|
|
</h3>
|
|
|
|
<div class="space-y-2">
|
|
<button
|
|
v-for="element in availableElements"
|
|
:key="`quick-${element.type}`"
|
|
@click="addQuickElement(element.type)"
|
|
:disabled="isExporting"
|
|
class="w-full flex items-center gap-2 px-3 py-2 text-sm text-gray-700 dark:text-primary-dt hover:bg-gray-100 dark:hover:bg-primary/10 rounded transition-colors disabled:opacity-50"
|
|
>
|
|
<GoogleIcon name="add" class="text-gray-400 dark:text-primary-dt/70 text-sm" />
|
|
{{ element.title }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Área Principal con Viewport -->
|
|
<div class="flex-1 flex flex-col">
|
|
<!-- Toolbar superior básico -->
|
|
<div class="h-14 bg-white dark:bg-primary-d border-b border-gray-200 dark:border-primary/20 flex items-center justify-between px-4">
|
|
<div class="flex items-center gap-4">
|
|
<h2 class="font-semibold text-gray-900 dark:text-primary-dt text-sm">
|
|
{{ documentTitle }}
|
|
</h2>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-4">
|
|
<span class="text-xs text-gray-500 dark:text-primary-dt/70">
|
|
{{ totalElements }} elemento{{ totalElements !== 1 ? 's' : '' }} • {{ pages.length }} página{{ pages.length !== 1 ? 's' : '' }}
|
|
</span>
|
|
|
|
<button
|
|
v-if="totalElements > 0"
|
|
@click="clearCanvas"
|
|
:disabled="isExporting"
|
|
class="flex items-center gap-1 px-2 py-1 text-xs text-red-600 hover:text-red-700 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-900/20 rounded transition-colors disabled:opacity-50"
|
|
>
|
|
<GoogleIcon name="delete" class="text-sm" />
|
|
Limpiar Todo
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- TextFormatter como toolbar estático -->
|
|
<TextFormatter
|
|
:element="textFormatterElement"
|
|
:visible="showTextFormatter"
|
|
@update="updateElement"
|
|
@smart-align="handleSmartAlign"
|
|
/>
|
|
|
|
<!-- PDFViewport -->
|
|
<PDFViewport
|
|
ref="viewportRef"
|
|
:pages="pages"
|
|
:selected-element-id="selectedElementId"
|
|
:is-exporting="isExporting"
|
|
@drop="handleDrop"
|
|
@click="handleCanvasClick"
|
|
@add-page="addPage"
|
|
@delete-page="deletePage"
|
|
@page-change="(page) => currentPage = page"
|
|
@page-size-change="handlePageSizeChange"
|
|
>
|
|
<template #elements="{ page, pageIndex }">
|
|
<CanvasElement
|
|
v-for="element in page.elements"
|
|
:key="element.id"
|
|
:element="element"
|
|
:is-selected="selectedElementId === element.id && !isExporting"
|
|
@select="selectElement"
|
|
@delete="deleteElement"
|
|
@update="updateElement"
|
|
@move="moveElement"
|
|
/>
|
|
</template>
|
|
</PDFViewport>
|
|
</div>
|
|
</div>
|
|
</template> |