juan.zapata/golscontrol-frontend-v1
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Conflictos resueltos

Browse Source
This commit is contained in:
Juan Felipe Zapata Moreno 2025-09-24 18:31:31 -06:00
commit 9fbcc76638
5 changed files with 1383 additions and 985 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

608
src/components/Holos/PDF/Canvas.vue
View File

@ -1,25 +1,26 @@
<script setup> <script setup>
import { ref, computed, nextTick, watch } from 'vue'; import { ref, computed, nextTick, watch } from "vue";
import GoogleIcon from '@Shared/GoogleIcon.vue'; import GoogleIcon from "@Shared/GoogleIcon.vue";
import SimpleTable from "./TableEditor.vue";
/** Propiedades */ /** Propiedades */
const props = defineProps({ const props = defineProps({
element: { element: {
type: Object, type: Object,
required: true required: true,
}, },
isSelected: { isSelected: {
type: Boolean, type: Boolean,
default: false default: false,
} },
}); });
/** Eventos */ /** Eventos */
const emit = defineEmits(['select', 'delete', 'update', 'move']); const emit = defineEmits(["select", "delete", "update", "move"]);
/** Referencias */ /** Referencias */
const isEditing = ref(false); const isEditing = ref(false);
const editValue = ref(''); const editValue = ref("");
const editInput = ref(null); const editInput = ref(null);
const editTextarea = ref(null); const editTextarea = ref(null);
const elementRef = ref(null); const elementRef = ref(null);
@ -33,11 +34,6 @@ const fileInput = ref(null);
/** Referencias adicionales para auto-posicionamiento */ /** Referencias adicionales para auto-posicionamiento */
const controlsRef = ref(null); const controlsRef = ref(null);
/** Constantes para precisión WYSIWYG */
const PDF_SCALE_FACTOR = 0.75; // 1px = 0.75 puntos PDF
const CANVAS_DPI = 96; // DPI del canvas
const PDF_DPI = 72; // DPI del PDF
/** Propiedades computadas */ /** Propiedades computadas */
const elementStyles = computed(() => { const elementStyles = computed(() => {
const baseStyles = { const baseStyles = {
@ -46,13 +42,13 @@ const elementStyles = computed(() => {
width: `${props.element.width || 200}px`, width: `${props.element.width || 200}px`,
height: `${props.element.height || 40}px`, height: `${props.element.height || 40}px`,
// Asegurar que la fuente se renderice con la misma métrica que el PDF // Asegurar que la fuente se renderice con la misma métrica que el PDF
fontFamily: 'Helvetica, Arial, sans-serif', fontFamily: "Helvetica, Arial, sans-serif",
lineHeight: '1.2', lineHeight: "1.2",
letterSpacing: 'normal' letterSpacing: "normal",
}; };
// Aplicar estilos de formato para elementos de texto // Aplicar estilos de formato para elementos de texto
if (props.element.type === 'text' && props.element.formatting) { if (props.element.type === "text" && props.element.formatting) {
const formatting = props.element.formatting; const formatting = props.element.formatting;
// Aplicar tamaño de fuente con factor de corrección // Aplicar tamaño de fuente con factor de corrección
@ -70,13 +66,13 @@ const elementStyles = computed(() => {
const elementWidth = props.element.width || 200; const elementWidth = props.element.width || 200;
switch (formatting.containerAlign) { switch (formatting.containerAlign) {
case 'center': case "center":
baseStyles.left = `${(pageWidth - elementWidth) / 2}px`; baseStyles.left = `${(pageWidth - elementWidth) / 2}px`;
break; break;
case 'right': case "right":
baseStyles.left = `${pageWidth - elementWidth - 50}px`; // 50px margen baseStyles.left = `${pageWidth - elementWidth - 50}px`; // 50px margen
break; break;
case 'left': case "left":
default: default:
baseStyles.left = `${props.element.x}px`; baseStyles.left = `${props.element.x}px`;
} }
@ -88,40 +84,40 @@ const elementStyles = computed(() => {
// Propiedades computadas para clases CSS dinámicas // Propiedades computadas para clases CSS dinámicas
const textContainerClasses = computed(() => { const textContainerClasses = computed(() => {
if (props.element.type !== 'text') return {}; if (props.element.type !== "text") return {};
const formatting = props.element.formatting || {}; const formatting = props.element.formatting || {};
return { return {
'font-bold': formatting.bold, "font-bold": formatting.bold,
'italic': formatting.italic, italic: formatting.italic,
'underline': formatting.underline, underline: formatting.underline,
'text-left': !formatting.textAlign || formatting.textAlign === 'left', "text-left": !formatting.textAlign || formatting.textAlign === "left",
'text-center': formatting.textAlign === 'center', "text-center": formatting.textAlign === "center",
'text-right': formatting.textAlign === 'right', "text-right": formatting.textAlign === "right",
'justify-start': !formatting.textAlign || formatting.textAlign === 'left', "justify-start": !formatting.textAlign || formatting.textAlign === "left",
'justify-center': formatting.textAlign === 'center', "justify-center": formatting.textAlign === "center",
'justify-end': formatting.textAlign === 'right' "justify-end": formatting.textAlign === "right",
}; };
}); });
const inputClasses = computed(() => { const inputClasses = computed(() => {
if (props.element.type !== 'text') return {}; if (props.element.type !== "text") return {};
const formatting = props.element.formatting || {}; const formatting = props.element.formatting || {};
return { return {
'font-bold': formatting.bold, "font-bold": formatting.bold,
'italic': formatting.italic, italic: formatting.italic,
'underline': formatting.underline, underline: formatting.underline,
'text-left': !formatting.textAlign || formatting.textAlign === 'left', "text-left": !formatting.textAlign || formatting.textAlign === "left",
'text-center': formatting.textAlign === 'center', "text-center": formatting.textAlign === "center",
'text-right': formatting.textAlign === 'right' "text-right": formatting.textAlign === "right",
}; };
}); });
const inputStyles = computed(() => { const inputStyles = computed(() => {
if (props.element.type !== 'text') return {}; if (props.element.type !== "text") return {};
const formatting = props.element.formatting || {}; const formatting = props.element.formatting || {};
const styles = {}; const styles = {};
@ -141,51 +137,69 @@ const inputStyles = computed(() => {
const controlsPosition = computed(() => { const controlsPosition = computed(() => {
if (!props.isSelected || isEditing.value) return {}; if (!props.isSelected || isEditing.value) return {};
// Si el elemento está muy cerca del borde superior (menos de 50px) // Si el elemento está muy cerca del borde superior
const isNearTop = props.element.y < 50; const isNearTop = props.element.y < 50;
return { return {
position: isNearTop ? 'bottom' : 'top', styles: isNearTop
styles: isNearTop ? { ? {
top: '100%', top: "100%",
marginTop: '8px' marginTop: "8px",
} : {
bottom: '100%',
marginBottom: '8px'
} }
: {
bottom: "100%",
marginBottom: "8px",
},
}; };
}); });
/** Watchers */ const tooltipPosition = computed(() => {
watch(() => props.isSelected, (selected) => { if (!props.isSelected || isEditing.value) return {};
if (selected && isEditing.value) {
nextTick(() => { const isNearTop = props.element.y < 50;
if (props.element.type === 'text' && editInput.value) { const hasControlButtons = props.element.type === "image";
editInput.value.focus();
editInput.value.select(); const rightOffset = hasControlButtons ? "60px" : "0px";
} else if (props.element.type === 'code' && editTextarea.value) {
editTextarea.value.focus(); return {
editTextarea.value.select(); position: isNearTop ? "bottom" : "top",
styles: isNearTop
? {
top: "100%",
marginTop: "8px",
right: rightOffset,
} }
: {
bottom: "100%",
marginBottom: "8px",
right: rightOffset,
},
};
}); });
const handleImageDoubleClick = (event) => {
event.stopPropagation();
if (props.element.type === "image") {
fileInput.value?.click();
} }
}); };
/** Métodos */ /** Métodos */
const handleSelect = (event) => { const handleSelect = (event) => {
event.stopPropagation(); event.stopPropagation();
emit('select', props.element.id); emit("select", props.element.id);
}; };
const handleDelete = () => { const handleDelete = () => {
emit('delete', props.element.id); emit("delete", props.element.id);
}; };
const startEditing = () => { const startEditing = () => {
if (props.element.type === 'table' && props.element.content) { if (props.element.type === "table" && props.element.content) {
// Deep copy para evitar mutaciones directas // Deep copy para evitar mutaciones directas
editValue.value = JSON.parse(JSON.stringify(props.element.content)); editValue.value = JSON.parse(JSON.stringify(props.element.content));
} else if (props.element.type === 'code') { } else if (props.element.type === "code") {
editValue.value = props.element.content || 'console.log("Hola mundo");'; editValue.value = props.element.content || 'console.log("Hola mundo");';
} else { } else {
editValue.value = props.element.content || getDefaultEditValue(); editValue.value = props.element.content || getDefaultEditValue();
@ -202,52 +216,102 @@ const finishEditing = () => {
if (isEditing.value) { if (isEditing.value) {
isEditing.value = false; isEditing.value = false;
// Para tablas, emitir el objeto completo // Para tablas, los datos ya se actualizaron en tiempo real
if (props.element.type === 'table') { // Solo necesitamos confirmar que se guardaron
emit('update', { if (props.element.type === "table" && editValue.value) {
emit("update", {
id: props.element.id, id: props.element.id,
content: editValue.value content: editValue.value,
}); });
} else { } else if (props.element.type !== "table") {
emit('update', { emit("update", {
id: props.element.id, id: props.element.id,
content: editValue.value content: editValue.value,
}); });
} }
} }
}; };
const handleKeydown = (event) => { const handleKeydown = (event) => {
if (props.element.type === 'text') { if (props.element.type === "text") {
if (event.key === 'Enter' && !event.shiftKey) { // Permitir Enter para salto de línea
if (event.key === "Enter") {
if (event.shiftKey || event.ctrlKey) {
event.preventDefault(); event.preventDefault();
finishEditing(); finishEditing();
} else if (event.key === 'Escape') {
isEditing.value = false;
editValue.value = props.element.content || 'Nuevo texto';
} }
} else if (props.element.type === 'code') { // Si es solo Enter, permitir el salto de línea normal
if (event.key === 'Escape') { } else if (event.key === "Escape") {
isEditing.value = false;
editValue.value = props.element.content || "Nuevo texto";
} else if (event.key === "Tab") {
event.preventDefault();
const start = editTextarea.value.selectionStart;
const end = editTextarea.value.selectionEnd;
const spaces = " ";
editValue.value =
editValue.value.substring(0, start) +
spaces +
editValue.value.substring(end);
// Restaurar posición del cursor
nextTick(() => {
editTextarea.value.selectionStart = editTextarea.value.selectionEnd =
start + spaces.length;
});
}
} else if (props.element.type === "code") {
if (event.key === "Escape") {
isEditing.value = false; isEditing.value = false;
editValue.value = props.element.content || 'console.log("Hola mundo");'; editValue.value = props.element.content || 'console.log("Hola mundo");';
} }
// Para código, permitimos Enter normal y usamos Ctrl+Enter para terminar // Para código, permitimos Enter normal y usamos Ctrl+Enter para terminar
if (event.key === 'Enter' && event.ctrlKey) { if (event.key === "Enter" && event.ctrlKey) {
event.preventDefault(); event.preventDefault();
finishEditing(); finishEditing();
} }
} else if (props.element.type === 'table') { } else if (props.element.type === "table") {
if (event.key === 'Escape') { if (event.key === "Escape") {
isEditing.value = false; isEditing.value = false;
// Restaurar el contenido original de la tabla // Restaurar el contenido original de la tabla
editValue.value = props.element.content ? editValue.value = props.element.content
JSON.parse(JSON.stringify(props.element.content)) : ? JSON.parse(JSON.stringify(props.element.content))
getDefaultEditValue(); : getDefaultEditValue();
} }
// Para tablas, Enter normal para nueva línea en celda, Ctrl+Enter para terminar }
if (event.key === 'Enter' && event.ctrlKey) { };
event.preventDefault();
finishEditing(); // Función para ajustar altura automáticamente del textarea
const adjustTextareaHeight = () => {
if (editTextarea.value) {
editTextarea.value.style.height = "auto";
editTextarea.value.style.height = editTextarea.value.scrollHeight + "px";
// Actualizar altura del elemento si es necesario
const newHeight = Math.max(40, editTextarea.value.scrollHeight + 20);
if (newHeight !== props.element.height) {
emit("update", {
id: props.element.id,
height: newHeight,
});
}
}
};
// Función para contar líneas y ajustar altura
const updateTextHeight = () => {
if (props.element.type === "text" && editValue.value) {
const lines = editValue.value.split("\n");
const fontSize = props.element.formatting?.fontSize || 14;
const lineHeight = fontSize * 1.4; // Factor de altura de línea
const padding = 20; // Padding vertical
const newHeight = Math.max(40, lines.length * lineHeight + padding);
if (newHeight !== props.element.height) {
emit("update", {
id: props.element.id,
height: newHeight,
});
} }
} }
}; };
@ -255,19 +319,19 @@ const handleKeydown = (event) => {
// Manejo de archivo de imagen // Manejo de archivo de imagen
const handleFileSelect = (event) => { const handleFileSelect = (event) => {
const file = event.target.files[0]; const file = event.target.files[0];
if (file && file.type.startsWith('image/')) { if (file && file.type.startsWith("image/")) {
const reader = new FileReader(); const reader = new FileReader();
reader.onload = (e) => { reader.onload = (e) => {
emit('update', { emit("update", {
id: props.element.id, id: props.element.id,
content: e.target.result, content: e.target.result,
fileName: file.name fileName: file.name,
}); });
}; };
reader.readAsDataURL(file); reader.readAsDataURL(file);
} }
// Limpiar el input // Limpiar el input
event.target.value = ''; event.target.value = "";
}; };
// Funcionalidad de arrastre // Funcionalidad de arrastre
@ -277,11 +341,11 @@ const handleMouseDown = (event) => {
isDragging.value = true; isDragging.value = true;
dragStart.value = { dragStart.value = {
x: event.clientX - props.element.x, x: event.clientX - props.element.x,
y: event.clientY - props.element.y y: event.clientY - props.element.y,
}; };
document.addEventListener('mousemove', handleMouseMove); document.addEventListener("mousemove", handleMouseMove);
document.addEventListener('mouseup', handleMouseUp); document.addEventListener("mouseup", handleMouseUp);
event.preventDefault(); event.preventDefault();
}; };
@ -291,10 +355,10 @@ const handleMouseMove = (event) => {
const newX = event.clientX - dragStart.value.x; const newX = event.clientX - dragStart.value.x;
const newY = event.clientY - dragStart.value.y; const newY = event.clientY - dragStart.value.y;
emit('move', { emit("move", {
id: props.element.id, id: props.element.id,
x: Math.max(0, newX), x: Math.max(0, newX),
y: Math.max(0, newY) y: Math.max(0, newY),
}); });
} else if (isResizing.value && !isDragging.value) { } else if (isResizing.value && !isDragging.value) {
handleResizeMove(event); handleResizeMove(event);
@ -305,8 +369,8 @@ const handleMouseUp = () => {
isDragging.value = false; isDragging.value = false;
isResizing.value = false; isResizing.value = false;
resizeDirection.value = null; resizeDirection.value = null;
document.removeEventListener('mousemove', handleMouseMove); document.removeEventListener("mousemove", handleMouseMove);
document.removeEventListener('mouseup', handleMouseUp); document.removeEventListener("mouseup", handleMouseUp);
}; };
// Funcionalidad de redimensionamiento por esquina // Funcionalidad de redimensionamiento por esquina
@ -315,16 +379,16 @@ const startResize = (event) => {
event.preventDefault(); event.preventDefault();
isResizing.value = true; isResizing.value = true;
resizeDirection.value = 'corner'; resizeDirection.value = "corner";
resizeStart.value = { resizeStart.value = {
x: event.clientX, x: event.clientX,
y: event.clientY, y: event.clientY,
width: props.element.width || 200, width: props.element.width || 200,
height: props.element.height || 40 height: props.element.height || 40,
}; };
document.addEventListener('mousemove', handleMouseMove); document.addEventListener("mousemove", handleMouseMove);
document.addEventListener('mouseup', handleMouseUp); document.addEventListener("mouseup", handleMouseUp);
}; };
// Funcionalidad de redimensionamiento por bordes // Funcionalidad de redimensionamiento por bordes
@ -338,11 +402,11 @@ const startResizeEdge = (event, direction) => {
x: event.clientX, x: event.clientX,
y: event.clientY, y: event.clientY,
width: props.element.width || 200, width: props.element.width || 200,
height: props.element.height || 40 height: props.element.height || 40,
}; };
document.addEventListener('mousemove', handleMouseMove); document.addEventListener("mousemove", handleMouseMove);
document.addEventListener('mouseup', handleMouseUp); document.addEventListener("mouseup", handleMouseUp);
}; };
const handleResizeMove = (event) => { const handleResizeMove = (event) => {
@ -355,30 +419,42 @@ const handleResizeMove = (event) => {
let newHeight = resizeStart.value.height; let newHeight = resizeStart.value.height;
// Calcular nuevas dimensiones según la dirección // Calcular nuevas dimensiones según la dirección
if (resizeDirection.value === 'corner') { if (resizeDirection.value === "corner") {
newWidth = Math.max(getMinWidth(), Math.min(getMaxWidth(), resizeStart.value.width + deltaX)); newWidth = Math.max(
newHeight = Math.max(getMinHeight(), Math.min(getMaxHeight(), resizeStart.value.height + deltaY)); getMinWidth(),
} else if (resizeDirection.value === 'right') { Math.min(getMaxWidth(), resizeStart.value.width + deltaX)
newWidth = Math.max(getMinWidth(), Math.min(getMaxWidth(), resizeStart.value.width + deltaX)); );
} else if (resizeDirection.value === 'bottom') { newHeight = Math.max(
newHeight = Math.max(getMinHeight(), Math.min(getMaxHeight(), resizeStart.value.height + deltaY)); getMinHeight(),
Math.min(getMaxHeight(), resizeStart.value.height + deltaY)
);
} else if (resizeDirection.value === "right") {
newWidth = Math.max(
getMinWidth(),
Math.min(getMaxWidth(), resizeStart.value.width + deltaX)
);
} else if (resizeDirection.value === "bottom") {
newHeight = Math.max(
getMinHeight(),
Math.min(getMaxHeight(), resizeStart.value.height + deltaY)
);
} }
emit('update', { emit("update", {
id: props.element.id, id: props.element.id,
width: newWidth, width: newWidth,
height: newHeight height: newHeight,
}); });
}; };
// Obtener tamaños mínimos según el tipo de elemento // Obtener tamaños mínimos según el tipo de elemento
const getMinWidth = () => { const getMinWidth = () => {
switch (props.element.type) { switch (props.element.type) {
case 'text': case "text":
return 100; return 100;
case 'image': case "image":
return 100; return 100;
case 'table': case "table":
return 200; return 200;
default: default:
return 100; return 100;
@ -387,11 +463,11 @@ const getMinWidth = () => {
const getMinHeight = () => { const getMinHeight = () => {
switch (props.element.type) { switch (props.element.type) {
case 'text': case "text":
return 30; return 30;
case 'image': case "image":
return 80; return 80;
case 'table': case "table":
return 80; return 80;
default: default:
return 30; return 30;
@ -407,42 +483,99 @@ const getMaxHeight = () => {
return 600; // Máximo general return 600; // Máximo general
}; };
// Nuevos métodos para alineación /** Watchers */
const updateContainerAlign = (align) => { watch(
emit('update', { () => props.isSelected,
id: props.element.id, (selected) => {
formatting: { if (selected && isEditing.value) {
...props.element.formatting, nextTick(() => {
containerAlign: align if (props.element.type === "text" && editInput.value) {
editInput.value.focus();
editInput.value.select();
} else if (props.element.type === "code" && editTextarea.value) {
editTextarea.value.focus();
editTextarea.value.select();
} }
}); });
}
}
);
// Watch para ajustar altura cuando cambie el texto
watch(editValue, () => {
if (isEditing.value && props.element.type === "text") {
nextTick(() => {
adjustTextareaHeight();
updateTextHeight();
});
}
});
const getDefaultEditValue = () => {
switch (props.element.type) {
case "text":
return "Nuevo texto";
case "table":
return {
data: [
["Columna 1", "Columna 2", "Columna 3"],
["Fila 1", "Fila 1", "Fila 1"],
["Fila 2", "Fila 2", "Fila 2"],
],
rows: 3,
cols: 3,
};
default:
return "";
}
}; };
const updateSmartAlign = (align) => { // Nuevas variables reactivas para selección de texto
const pageWidth = 794; // Obtener dinámicamente del viewport const selectedTextRange = ref(null);
const elementWidth = props.element.width || 200; const isSelectingText = ref(false);
let newX = props.element.x;
switch (align) { // Método para capturar selección de texto
case 'center': const handleTextSelection = () => {
newX = (pageWidth - elementWidth) / 2; if (props.element.type === 'text' && !isEditing.value) {
break; const selection = window.getSelection();
case 'right': if (selection.rangeCount > 0 && selection.toString().length > 0) {
newX = pageWidth - elementWidth - 50; // margen derecho const range = selection.getRangeAt(0);
break; selectedTextRange.value = {
case 'left': start: range.startOffset,
default: end: range.endOffset,
newX = 50; // margen izquierdo text: selection.toString()
};
isSelectingText.value = true;
// Emitir evento para activar TextFormatter
emit('text-selected', {
id: props.element.id,
selection: selectedTextRange.value,
element: props.element
});
} else {
selectedTextRange.value = null;
isSelectingText.value = false;
} }
}
};
// Aplicar formato solo a texto seleccionado
const applyFormatToSelection = (formatting) => {
if (selectedTextRange.value && props.element.type === 'text') {
// Crear un nuevo contenido con formato aplicado solo a la selección
const content = props.element.content || '';
const beforeSelection = content.substring(0, selectedTextRange.value.start);
const selectedText = content.substring(selectedTextRange.value.start, selectedTextRange.value.end);
const afterSelection = content.substring(selectedTextRange.value.end);
// Aquí podrías implementar markdown o HTML para mantener formato
// Por ahora aplicamos formato a todo el elemento como antes
emit('update', { emit('update', {
id: props.element.id, id: props.element.id,
x: newX, formatting: formatting
formatting: {
...props.element.formatting,
textAlign: align
}
}); });
}
}; };
</script> </script>
@ -457,12 +590,12 @@ const updateSmartAlign = (align) => {
:class="{ :class="{
'ring-2 ring-blue-500 ring-opacity-50': isSelected, 'ring-2 ring-blue-500 ring-opacity-50': isSelected,
'cursor-move': !isEditing && !isResizing, 'cursor-move': !isEditing && !isResizing,
'cursor-text': isEditing && (element.type === 'text' || element.type === 'code'), 'cursor-text': isEditing && element.type === 'text',
'cursor-se-resize': isResizing && resizeDirection === 'corner', 'cursor-se-resize': isResizing && resizeDirection === 'corner',
'cursor-e-resize': isResizing && resizeDirection === 'right', 'cursor-e-resize': isResizing && resizeDirection === 'right',
'cursor-s-resize': isResizing && resizeDirection === 'bottom', 'cursor-s-resize': isResizing && resizeDirection === 'bottom',
'z-50': isSelected, 'z-50': isSelected,
'z-10': !isSelected 'z-10': !isSelected,
}" }"
> >
<!-- Input oculto para selección de archivos --> <!-- Input oculto para selección de archivos -->
@ -477,56 +610,67 @@ const updateSmartAlign = (align) => {
<!-- Elemento de Texto MEJORADO --> <!-- Elemento de Texto MEJORADO -->
<div <div
v-if="element.type === 'text'" v-if="element.type === 'text'"
class="w-full h-full flex items-center px-3 py-2 bg-white rounded border border-gray-300 shadow-sm dark:bg-white dark:border-gray-400" class="w-full h-full flex items-start px-3 py-2 bg-white rounded border border-gray-300 shadow-sm"
:class="textContainerClasses" :class="textContainerClasses"
:style="{ :style="{
fontSize: element.formatting?.fontSize ? `${element.formatting.fontSize}px` : '14px', fontSize: element.formatting?.fontSize ? `${element.formatting.fontSize}px` : '14px',
color: element.formatting?.color || '#374151', color: element.formatting?.color || '#374151',
fontFamily: 'Helvetica, Arial, sans-serif', fontFamily: 'Helvetica, Arial, sans-serif',
lineHeight: '1.2', lineHeight: '1.4',
letterSpacing: 'normal', letterSpacing: 'normal',
// Simular exactamente como se verá en el PDF
textRendering: 'geometricPrecision', textRendering: 'geometricPrecision',
fontSmooth: 'always', fontSmooth: 'always',
WebkitFontSmoothing: 'antialiased' WebkitFontSmoothing: 'antialiased',
}" }"
> >
<input <!-- Textarea para edición -->
<textarea
v-if="isEditing" v-if="isEditing"
ref="editInput" ref="editTextarea"
v-model="editValue" v-model="editValue"
@blur="finishEditing" @blur="finishEditing"
@keydown="handleKeydown" @keydown="handleKeydown"
class="w-full bg-transparent outline-none cursor-text" @input="adjustTextareaHeight"
class="w-full bg-transparent outline-none resize-none cursor-text"
:class="inputClasses" :class="inputClasses"
:style="{ :style="{
...inputStyles, ...inputStyles,
fontFamily: 'Helvetica, Arial, sans-serif', fontFamily: 'Helvetica, Arial, sans-serif',
lineHeight: '1.2', lineHeight: '1.4',
letterSpacing: 'normal' letterSpacing: 'normal',
minHeight: '20px',
height: 'auto',
}" }"
@mousedown.stop @mousedown.stop
/> placeholder="Escribe tu texto aquí... (Shift+Enter o Ctrl+Enter para terminar)"
<span ></textarea>
<!-- Vista de solo lectura con selección de texto -->
<div
v-else v-else
class="truncate pointer-events-none w-full" class="w-full h-full overflow-hidden cursor-text"
:class="textContainerClasses" :class="textContainerClasses"
:style="{ :style="{
fontSize: element.formatting?.fontSize ? `${element.formatting.fontSize}px` : '14px', fontSize: element.formatting?.fontSize ? `${element.formatting.fontSize}px` : '14px',
color: element.formatting?.color || '#374151', color: element.formatting?.color || '#374151',
fontFamily: 'Helvetica, Arial, sans-serif', fontFamily: 'Helvetica, Arial, sans-serif',
lineHeight: '1.2', lineHeight: '1.4',
letterSpacing: 'normal' letterSpacing: 'normal',
whiteSpace: 'pre-wrap',
wordWrap: 'break-word',
}" }"
@mouseup="handleTextSelection"
@selectstart="() => isSelectingText = true"
> >
{{ element.content || 'Nuevo texto' }} {{ element.content || "Nuevo texto" }}
</span> </div>
</div> </div>
<!-- Elemento de Imagen --> <!-- Elemento de Imagen -->
<div <div
v-else-if="element.type === 'image'" v-else-if="element.type === 'image'"
class="w-full h-full flex items-center justify-center bg-gray-100 rounded border border-gray-300 dark:bg-primary/10 dark:border-primary/20 overflow-hidden" class="w-full h-full flex items-center justify-center bg-gray-100 rounded border border-gray-300 dark:bg-primary/10 dark:border-primary/20 overflow-hidden"
@dblclick.stop="handleImageDoubleClick"
> >
<!-- Si hay imagen cargada --> <!-- Si hay imagen cargada -->
<img <img
@ -536,69 +680,25 @@ const updateSmartAlign = (align) => {
class="w-full h-full object-cover pointer-events-none" class="w-full h-full object-cover pointer-events-none"
/> />
<!-- Placeholder para imagen --> <!-- Placeholder para imagen -->
<div v-else class="flex flex-col items-center justify-center text-gray-400 dark:text-primary-dt/50 p-4"> <div
v-else
class="flex flex-col items-center justify-center text-gray-400 dark:text-primary-dt/50 p-4"
>
<GoogleIcon name="image" class="text-2xl mb-1" /> <GoogleIcon name="image" class="text-2xl mb-1" />
<span class="text-xs text-center">Haz doble clic para cargar imagen</span> <span class="text-xs text-center"
>Haz doble clic para cargar imagen</span
>
</div> </div>
</div> </div>
<!-- Elemento de Tabla --> <!-- Elemento de Tabla SIMPLE -->
<div <SimpleTable
v-else-if="element.type === 'table'" v-if="element.type === 'table'"
class="w-full h-full bg-white rounded border overflow-hidden" :element="element"
> :is-editing="isEditing"
<div v-if="element.content && element.content.data" class="w-full h-full"> @update="(data) => emit('update', data)"
<table class="w-full h-full text-xs border-collapse"> @finish-editing="() => { isEditing = false; }"
<thead v-if="element.content.data.length > 0">
<tr class="bg-blue-50 dark:bg-blue-900/20">
<th
v-for="(header, colIndex) in element.content.data[0]"
:key="colIndex"
class="border border-gray-300 dark:border-primary/20 px-1 py-1 text-left font-semibold text-blue-800 dark:text-blue-300"
>
<input
v-if="isEditing"
v-model="editValue.data[0][colIndex]"
class="w-full bg-transparent outline-none text-xs"
@mousedown.stop
@click.stop
@focus.stop
/> />
<span v-else class="truncate">{{ header }}</span>
</th>
</tr>
</thead>
<tbody>
<tr
v-for="(row, rowIndex) in element.content.data.slice(1)"
:key="rowIndex"
class="hover:bg-gray-50 dark:hover:bg-primary/5"
>
<td
v-for="(cell, colIndex) in row"
:key="colIndex"
class="border border-gray-300 dark:border-primary/20 px-1 py-1"
>
<input
v-if="isEditing"
v-model="editValue.data[rowIndex + 1][colIndex]"
class="w-full bg-transparent outline-none text-xs"
@mousedown.stop
@click.stop
@focus.stop
/>
<span v-else class="truncate text-gray-700 dark:text-primary-dt">{{ cell }}</span>
</td>
</tr>
</tbody>
</table>
</div>
<!-- Placeholder para tabla vacía -->
<div v-else class="flex flex-col items-center justify-center text-gray-400 dark:text-primary-dt/50 p-4">
<GoogleIcon name="table_chart" class="text-2xl mb-1" />
<span class="text-xs text-center">Doble clic para editar tabla</span>
</div>
</div>
<!-- Controles del elemento --> <!-- Controles del elemento -->
<div <div
@ -613,7 +713,7 @@ const updateSmartAlign = (align) => {
class="absolute -top-2 right-2 w-0 h-0 border-l-4 border-r-4 border-b-4 border-l-transparent border-r-transparent border-b-gray-800" class="absolute -top-2 right-2 w-0 h-0 border-l-4 border-r-4 border-b-4 border-l-transparent border-r-transparent border-b-gray-800"
></div> ></div>
<!-- Botón para cargar imagen (solo para elementos de imagen) --> <!-- Botón para cargar imagen -->
<button <button
v-if="element.type === 'image'" v-if="element.type === 'image'"
@click.stop="() => fileInput.click()" @click.stop="() => fileInput.click()"
@ -640,7 +740,10 @@ const updateSmartAlign = (align) => {
</div> </div>
<!-- Controles de redimensionamiento --> <!-- Controles de redimensionamiento -->
<div v-if="isSelected && !isEditing" class="absolute inset-0 pointer-events-none z-[55]"> <div
v-if="isSelected && !isEditing"
class="absolute inset-0 pointer-events-none z-[55]"
>
<!-- Esquina inferior derecha --> <!-- Esquina inferior derecha -->
<div <div
@mousedown.stop="startResize" @mousedown.stop="startResize"
@ -656,7 +759,9 @@ const updateSmartAlign = (align) => {
class="absolute top-3 bottom-3 -right-1 w-2 bg-blue-500/80 cursor-e-resize pointer-events-auto rounded-full shadow-sm hover:bg-blue-600 hover:w-3 transition-all" class="absolute top-3 bottom-3 -right-1 w-2 bg-blue-500/80 cursor-e-resize pointer-events-auto rounded-full shadow-sm hover:bg-blue-600 hover:w-3 transition-all"
title="Redimensionar ancho" title="Redimensionar ancho"
> >
<div class="absolute top-1/2 left-1/2 w-0.5 h-6 bg-white/60 -translate-x-1/2 -translate-y-1/2 rounded-full"></div> <div
class="absolute top-1/2 left-1/2 w-0.5 h-6 bg-white/60 -translate-x-1/2 -translate-y-1/2 rounded-full"
></div>
</div> </div>
<!-- Lado inferior --> <!-- Lado inferior -->
@ -665,30 +770,28 @@ const updateSmartAlign = (align) => {
class="absolute -bottom-1 left-3 right-3 h-2 bg-blue-500/80 cursor-s-resize pointer-events-auto rounded-full shadow-sm hover:bg-blue-600 hover:h-3 transition-all" class="absolute -bottom-1 left-3 right-3 h-2 bg-blue-500/80 cursor-s-resize pointer-events-auto rounded-full shadow-sm hover:bg-blue-600 hover:h-3 transition-all"
title="Redimensionar alto" title="Redimensionar alto"
> >
<div class="absolute top-1/2 left-1/2 w-6 h-0.5 bg-white/60 -translate-x-1/2 -translate-y-1/2 rounded-full"></div> <div
class="absolute top-1/2 left-1/2 w-6 h-0.5 bg-white/60 -translate-x-1/2 -translate-y-1/2 rounded-full"
></div>
</div> </div>
</div> </div>
<!-- Tooltips adaptativos --> <!-- Tooltips adaptativos -->
<div <div
v-if="isSelected && !element.content && element.type !== 'image' && !isResizing" v-if="
isSelected && !element.content && element.type === 'text' && !isResizing
"
class="absolute right-0 bg-gray-900 text-white text-xs px-2 py-1 rounded whitespace-nowrap z-[60]" class="absolute right-0 bg-gray-900 text-white text-xs px-2 py-1 rounded whitespace-nowrap z-[60]"
:style="element.y < 50 ? { top: '100%', marginTop: '8px' } : { bottom: '100%', marginBottom: '8px' }" :style="{
...tooltipPosition.styles,
[tooltipPosition.position === 'top' ? 'bottom' : 'top']: '100%',
[tooltipPosition.position === 'top' ? 'marginBottom' : 'marginTop']:
'8px',
}"
> >
{{ element.type === 'text' ? 'Doble clic para editar texto' : 'Doble clic para editar código' }} Doble clic para escribir párrafos
{{ element.type === 'code' ? ' (Ctrl+Enter para guardar)' : '' }}
</div> </div>
<!-- Tooltip para imagen -->
<div
v-if="isSelected && !isEditing && element.type === 'image' && !element.content && !isResizing"
class="absolute right-0 bg-gray-900 text-white text-xs px-2 py-1 rounded whitespace-nowrap z-[60]"
:style="element.y < 50 ? { top: '100%', marginTop: '8px' } : { bottom: '100%', marginBottom: '8px' }"
>
Arrastra las esquinas para redimensionar
</div>
<!-- Resto de elementos sin cambios... -->
<!-- Indicador de arrastre --> <!-- Indicador de arrastre -->
<div <div
v-if="isDragging" v-if="isDragging"
@ -700,26 +803,6 @@ const updateSmartAlign = (align) => {
v-if="isResizing" v-if="isResizing"
class="absolute inset-0 bg-green-500 opacity-20 rounded pointer-events-none" class="absolute inset-0 bg-green-500 opacity-20 rounded pointer-events-none"
></div> ></div>
<!-- Botón para terminar edición de tabla -->
<div
v-if="isEditing && element.type === 'table'"
class="absolute left-0 flex gap-2 z-[60]"
:style="element.y < 100 ? { top: '100%', marginTop: '8px' } : { bottom: '100%', marginBottom: '8px' }"
>
<button
@click="finishEditing"
class="px-3 py-1 bg-green-600 hover:bg-green-700 text-white text-xs rounded shadow-sm transition-colors"
>
Guardar
</button>
<button
@click="() => { isEditing = false; editValue = JSON.parse(JSON.stringify(element.content)); }"
class="px-3 py-1 bg-gray-600 hover:bg-gray-700 text-white text-xs rounded shadow-sm transition-colors"
>
Cancelar
</button>
</div>
</div> </div>
</template> </template>
@ -730,4 +813,15 @@ const updateSmartAlign = (align) => {
-moz-user-select: none; -moz-user-select: none;
-ms-user-select: none; -ms-user-select: none;
} }
/* Estilos para textarea */
textarea {
overflow: hidden;
scrollbar-width: none;
-ms-overflow-style: none;
}
textarea::-webkit-scrollbar {
display: none;
}
</style> </style>

10
src/components/Holos/PDF/Draggable.vue
View File

@ -39,24 +39,24 @@ const handleDragEnd = () => {
draggable="true" draggable="true"
@dragstart="handleDragStart" @dragstart="handleDragStart"
@dragend="handleDragEnd" @dragend="handleDragEnd"
class="flex items-center gap-3 p-3 rounded-lg border border-gray-200 bg-white cursor-grab hover:bg-gray-50 hover:border-blue-300 transition-colors dark:bg-primary-d dark:border-primary/20 dark:hover:bg-primary/10" class="flex items-center gap-2 sm:gap-3 p-2 sm:p-3 rounded-lg border border-gray-200 bg-white cursor-grab hover:bg-gray-50 hover:border-blue-300 transition-colors"
:class="{ :class="{
'opacity-50 cursor-grabbing': isDragging, 'opacity-50 cursor-grabbing': isDragging,
'shadow-sm hover:shadow-md': !isDragging 'shadow-sm hover:shadow-md': !isDragging
}" }"
> >
<div class="flex-shrink-0 w-8 h-8 rounded-md bg-blue-100 flex items-center justify-center dark:bg-blue-900/30"> <div class="flex-shrink-0 w-6 h-6 sm:w-8 sm:h-8 rounded-md bg-blue-100 flex items-center justify-center">
<GoogleIcon <GoogleIcon
:name="icon" :name="icon"
class="text-blue-600 dark:text-blue-400 text-lg" class="text-blue-600 text-sm sm:text-lg"
/> />
</div> </div>
<div class="flex-1 min-w-0"> <div class="flex-1 min-w-0">
<div class="text-sm font-medium text-gray-900 dark:text-primary-dt"> <div class="text-xs sm:text-sm font-medium text-gray-900">
{{ title }} {{ title }}
</div> </div>
<div class="text-xs text-gray-500 dark:text-primary-dt/70 truncate"> <div class="text-xs text-gray-500 truncate hidden sm:block">
{{ description }} {{ description }}
</div> </div>
</div> </div>

201
src/components/Holos/PDF/TableEditor.vue Normal file
View File

@ -0,0 +1,201 @@
<script setup>
import { ref, computed, watch } from 'vue';
import GoogleIcon from '@Shared/GoogleIcon.vue';
const props = defineProps({
element: {
type: Object,
required: true
},
isEditing: {
type: Boolean,
default: false
}
});
const emit = defineEmits(['update', 'finish-editing']);
// Estructura simple: empezar con una celda
const tableData = ref([]);
// Watcher para sincronizar datos
watch(() => props.element.content, (newContent) => {
if (newContent && newContent.data && Array.isArray(newContent.data)) {
tableData.value = JSON.parse(JSON.stringify(newContent.data));
} else {
// Inicializar con una sola celda
tableData.value = [['']];
}
}, { immediate: true });
const rows = computed(() => tableData.value.length);
const cols = computed(() => tableData.value[0]?.length || 1);
// Agregar fila
const addRow = () => {
const newRow = new Array(cols.value).fill('');
tableData.value.push(newRow);
updateTable();
};
// Agregar columna
const addColumn = () => {
tableData.value.forEach(row => {
row.push('');
});
updateTable();
};
// Eliminar fila (no permitir si solo hay una)
const removeRow = (rowIndex) => {
if (tableData.value.length > 1) {
tableData.value.splice(rowIndex, 1);
updateTable();
}
};
// Eliminar columna (no permitir si solo hay una)
const removeColumn = (colIndex) => {
if (tableData.value[0]?.length > 1) {
tableData.value.forEach(row => {
row.splice(colIndex, 1);
});
updateTable();
}
};
// Actualizar celda
const updateCell = (rowIndex, colIndex, value) => {
if (tableData.value[rowIndex]) {
tableData.value[rowIndex][colIndex] = value;
updateTable();
}
};
// Actualizar tabla
const updateTable = () => {
const updatedContent = {
data: JSON.parse(JSON.stringify(tableData.value)),
rows: tableData.value.length,
cols: tableData.value[0]?.length || 1
};
// Calcular dimensiones dinámicas basadas en contenido
const cellWidth = 120;
const cellHeight = 35;
const newWidth = Math.max(120, updatedContent.cols * cellWidth);
const newHeight = Math.max(40, updatedContent.rows * cellHeight);
emit('update', {
id: props.element.id,
content: updatedContent,
width: newWidth,
height: newHeight
});
};
const finishEditing = () => {
emit('finish-editing');
};
</script>
<template>
<div class="w-full h-full bg-white rounded border border-gray-300 overflow-hidden">
<!-- Controles de tabla (solo cuando está editando) -->
<div
v-if="isEditing"
class="flex items-center gap-2 p-2 bg-gray-50 border-b"
>
<button
@click="addRow"
class="px-2 py-1 text-xs bg-green-500 hover:bg-green-600 text-white rounded flex items-center gap-1"
title="Agregar fila"
>
<GoogleIcon name="add" class="text-xs" />
+
</button>
<button
@click="addColumn"
class="px-2 py-1 text-xs bg-blue-500 hover:bg-blue-600 text-white rounded flex items-center gap-1"
title="Agregar columna"
>
<GoogleIcon name="add" class="text-xs" />
+
</button>
<div class="flex-1"></div>
<span class="text-xs text-gray-500">
{{ rows }}x{{ cols }}
</span>
<button
@click="finishEditing"
class="px-2 py-1 text-xs bg-gray-600 hover:bg-gray-700 text-white rounded"
>
Cerrar
</button>
</div>
<!-- Tabla -->
<div class="w-full h-full">
<table class="w-full h-full border-collapse text-sm">
<tbody>
<tr
v-for="(row, rowIndex) in tableData"
:key="`row-${rowIndex}`"
class="group"
:style="{ height: `${100/rows}%` }"
>
<td
v-for="(cell, colIndex) in row"
:key="`cell-${rowIndex}-${colIndex}`"
class="border border-gray-300 p-1 relative group/cell"
:style="{ width: `${100/cols}%` }"
>
<!-- Controles de celda (solo cuando está editando) -->
<div
v-if="isEditing && (rows > 1 || cols > 1)"
class="absolute -top-2 -right-2 opacity-0 group-hover/cell:opacity-100 transition-opacity z-10"
>
<!-- Eliminar fila -->
<button
v-if="rows > 1 && colIndex === 0"
@click="removeRow(rowIndex)"
class="w-4 h-4 bg-red-500 text-white rounded-full text-xs flex items-center justify-center mr-1"
title="Eliminar fila"
>
×
</button>
<!-- Eliminar columna -->
<button
v-if="cols > 1 && rowIndex === 0"
@click="removeColumn(colIndex)"
class="w-4 h-4 bg-red-500 text-white rounded-full text-xs flex items-center justify-center"
title="Eliminar columna"
>
×
</button>
</div>
<!-- Input de celda -->
<input
v-if="isEditing"
:value="cell"
@input="updateCell(rowIndex, colIndex, $event.target.value)"
class="w-full h-full bg-transparent outline-none text-center text-sm resize-none"
@click.stop
:placeholder="rowIndex === 0 && colIndex === 0 && !cell ? 'Escribe aquí...' : ''"
/>
<!-- Vista de solo lectura -->
<div v-else class="w-full h-full flex items-center justify-center text-center text-sm p-1">
{{ cell || (rowIndex === 0 && colIndex === 0 ? 'Tabla' : '') }}
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</template>

174
src/components/Holos/PDF/TextFormatter.vue
View File

@ -2,111 +2,153 @@
import { ref, computed, watch } from 'vue'; import { ref, computed, watch } from 'vue';
import GoogleIcon from '@Shared/GoogleIcon.vue'; import GoogleIcon from '@Shared/GoogleIcon.vue';
/** Propiedades */
const props = defineProps({ const props = defineProps({
element: { selectedElement: {
type: Object, type: Object,
default: null default: null
}, },
visible: { visible: {
type: Boolean, type: Boolean,
default: false default: false
},
activeTextElement: {
type: Object,
default: null
} }
}); });
/** Eventos */ const emit = defineEmits(['update', 'smart-align']);
const emit = defineEmits(['update']);
/** Propiedades computadas */ // Determinar si hay un elemento de texto activo (puede ser texto directo o celda de tabla)
const formatting = computed(() => props.element?.formatting || {}); const hasActiveText = computed(() => {
const hasTextElement = computed(() => props.element?.type === 'text'); return props.visible && (
props.selectedElement?.type === 'text' ||
props.activeTextElement?.type === 'text' ||
(props.selectedElement?.type === 'table' && props.activeTextElement)
);
});
/** Métodos */ // Obtener formato del elemento activo
const formatting = computed(() => {
if (props.activeTextElement) {
return props.activeTextElement.formatting || {};
}
if (props.selectedElement?.type === 'text') {
return props.selectedElement.formatting || {};
}
return {};
});
// Obtener información del elemento activo
const activeElementInfo = computed(() => {
if (props.activeTextElement) {
return {
type: 'text',
context: props.selectedElement?.type === 'table' ? 'table-cell' : 'text-element'
};
}
if (props.selectedElement?.type === 'text') {
return {
type: 'text',
context: 'text-element'
};
}
return null;
});
/** Métodos de formato */
const toggleBold = () => { const toggleBold = () => {
if (!hasTextElement.value) return; if (!hasActiveText.value) return;
updateFormatting('bold', !formatting.value.bold); updateFormatting('bold', !formatting.value.bold);
}; };
const toggleItalic = () => { const toggleItalic = () => {
if (!hasTextElement.value) return; if (!hasActiveText.value) return;
updateFormatting('italic', !formatting.value.italic); updateFormatting('italic', !formatting.value.italic);
}; };
const toggleUnderline = () => { const toggleUnderline = () => {
if (!hasTextElement.value) return; if (!hasActiveText.value) return;
updateFormatting('underline', !formatting.value.underline); updateFormatting('underline', !formatting.value.underline);
}; };
const updateFontSize = (size) => { const updateFontSize = (size) => {
if (!hasTextElement.value) return; if (!hasActiveText.value) return;
updateFormatting('fontSize', size); updateFormatting('fontSize', size);
}; };
const updateTextAlign = (align) => { const updateTextAlign = (align) => {
if (!hasTextElement.value) return; if (!hasActiveText.value) return;
updateFormatting('textAlign', align); updateFormatting('textAlign', align);
}; };
const updateColor = (color) => { const updateColor = (color) => {
if (!hasTextElement.value) return; if (!hasActiveText.value) return;
updateFormatting('color', color); updateFormatting('color', color);
}; };
const updateFormatting = (key, value) => { const updateFormatting = (key, value) => {
const newFormatting = { ...formatting.value, [key]: value }; const newFormatting = { ...formatting.value, [key]: value };
emit('update', {
id: props.element.id,
formatting: newFormatting
});
};
const updateContainerAlign = (align) => { // Determinar qué elemento actualizar
if (!hasTextElement.value) return; let targetId = null;
updateFormatting('containerAlign', align); if (props.activeTextElement) {
}; targetId = props.activeTextElement.id;
} else if (props.selectedElement?.type === 'text') {
const updateSmartAlign = (align) => { targetId = props.selectedElement.id;
if (!hasTextElement.value) return;
// Emitir tanto la alineación del texto como la posición del contenedor
emit('smart-align', {
id: props.element.id,
align: align,
formatting: {
...formatting.value,
textAlign: align,
containerAlign: align
} }
if (targetId) {
emit('update', {
id: targetId,
formatting: newFormatting,
context: activeElementInfo.value?.context
}); });
}
}; };
/** Colores predefinidos */ /** Colores y tamaños predefinidos */
const predefinedColors = [ const predefinedColors = [
'#000000', '#333333', '#666666', '#999999', '#000000', '#333333', '#666666', '#999999',
'#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#FF0000', '#00FF00', '#0000FF', '#FFFF00',
'#FF00FF', '#00FFFF', '#FFA500', '#800080' '#FF00FF', '#00FFFF', '#FFA500', '#800080'
]; ];
/** Tamaños de fuente */
const fontSizes = [8, 9, 10, 11, 12, 14, 16, 18, 20, 24, 28, 32, 36, 48, 72]; const fontSizes = [8, 9, 10, 11, 12, 14, 16, 18, 20, 24, 28, 32, 36, 48, 72];
</script> </script>
<template> <template>
<div <div
v-if="visible && hasTextElement" class="bg-gray-50 border-b border-gray-200 transition-all duration-300"
class="flex items-center gap-6 px-4 py-2 bg-gray-50 dark:bg-primary-d/50 border-b border-gray-200 dark:border-primary/20" :class="{
'h-12 opacity-100': visible && hasActiveText,
'h-0 opacity-0 overflow-hidden': !visible || !hasActiveText
}"
> >
<!-- Estilo de texto --> <div
<div class="flex items-center gap-2"> v-if="hasActiveText"
<span class="text-xs font-medium text-gray-600 dark:text-primary-dt/80">Estilo:</span> class="flex items-center gap-4 px-4 py-2 h-full"
<div class="flex gap-1"> >
<!-- Información del elemento activo -->
<div class="flex items-center gap-2 text-xs text-gray-600 border-r border-gray-300 pr-4">
<GoogleIcon
:name="activeElementInfo?.context === 'table-cell' ? 'table_chart' : 'text_fields'"
class="text-sm"
/>
<span>
{{ activeElementInfo?.context === 'table-cell' ? 'Celda de tabla' : 'Texto' }}
</span>
</div>
<!-- Controles de estilo -->
<div class="flex items-center gap-1">
<button <button
@click="toggleBold" @click="toggleBold"
:class="[ :class="[
'w-8 h-8 rounded flex items-center justify-center text-sm font-bold transition-colors', 'w-8 h-8 rounded flex items-center justify-center text-sm font-bold transition-colors',
formatting.bold formatting.bold
? 'bg-blue-500 text-white shadow-sm' ? 'bg-blue-500 text-white shadow-sm'
: 'bg-white text-gray-700 hover:bg-blue-50 border border-gray-200 dark:bg-primary-d dark:text-primary-dt dark:hover:bg-primary/10 dark:border-primary/20' : 'bg-white text-gray-700 hover:bg-blue-50 border border-gray-200'
]" ]"
title="Negrita (Ctrl+B)" title="Negrita (Ctrl+B)"
> >
@ -119,7 +161,7 @@ const fontSizes = [8, 9, 10, 11, 12, 14, 16, 18, 20, 24, 28, 32, 36, 48, 72];
'w-8 h-8 rounded flex items-center justify-center text-sm italic transition-colors', 'w-8 h-8 rounded flex items-center justify-center text-sm italic transition-colors',
formatting.italic formatting.italic
? 'bg-blue-500 text-white shadow-sm' ? 'bg-blue-500 text-white shadow-sm'
: 'bg-white text-gray-700 hover:bg-blue-50 border border-gray-200 dark:bg-primary-d dark:text-primary-dt dark:hover:bg-primary/10 dark:border-primary/20' : 'bg-white text-gray-700 hover:bg-blue-50 border border-gray-200'
]" ]"
title="Cursiva (Ctrl+I)" title="Cursiva (Ctrl+I)"
> >
@ -132,38 +174,32 @@ const fontSizes = [8, 9, 10, 11, 12, 14, 16, 18, 20, 24, 28, 32, 36, 48, 72];
'w-8 h-8 rounded flex items-center justify-center text-sm underline transition-colors', 'w-8 h-8 rounded flex items-center justify-center text-sm underline transition-colors',
formatting.underline formatting.underline
? 'bg-blue-500 text-white shadow-sm' ? 'bg-blue-500 text-white shadow-sm'
: 'bg-white text-gray-700 hover:bg-blue-50 border border-gray-200 dark:bg-primary-d dark:text-primary-dt dark:hover:bg-primary/10 dark:border-primary/20' : 'bg-white text-gray-700 hover:bg-blue-50 border border-gray-200'
]" ]"
title="Subrayado (Ctrl+U)" title="Subrayado (Ctrl+U)"
> >
U U
</button> </button>
</div> </div>
</div>
<!-- Separador --> <!-- Separador -->
<div class="w-px h-6 bg-gray-300 dark:bg-primary/30"></div> <div class="w-px h-6 bg-gray-300"></div>
<!-- Tamaño de fuente --> <!-- Tamaño de fuente -->
<div class="flex items-center gap-2">
<span class="text-xs font-medium text-gray-600 dark:text-primary-dt/80">Tamaño:</span>
<select <select
:value="formatting.fontSize || 12" :value="formatting.fontSize || 12"
@change="updateFontSize(parseInt($event.target.value))" @change="updateFontSize(parseInt($event.target.value))"
class="px-2 py-1 text-sm border border-gray-200 rounded bg-white dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt focus:ring-2 focus:ring-blue-500 focus:border-blue-500" class="px-2 py-1 text-sm border border-gray-200 rounded bg-white focus:ring-2 focus:ring-blue-500"
> >
<option v-for="size in fontSizes" :key="size" :value="size"> <option v-for="size in fontSizes" :key="size" :value="size">
{{ size }}px {{ size }}px
</option> </option>
</select> </select>
</div>
<!-- Separador --> <!-- Separador -->
<div class="w-px h-6 bg-gray-300 dark:bg-primary/30"></div> <div class="w-px h-6 bg-gray-300"></div>
<!-- Alineación --> <!-- Alineación -->
<div class="flex items-center gap-2">
<span class="text-xs font-medium text-gray-600 dark:text-primary-dt/80">Alinear:</span>
<div class="flex gap-1"> <div class="flex gap-1">
<button <button
@click="updateTextAlign('left')" @click="updateTextAlign('left')"
@ -171,7 +207,7 @@ const fontSizes = [8, 9, 10, 11, 12, 14, 16, 18, 20, 24, 28, 32, 36, 48, 72];
'w-8 h-8 rounded flex items-center justify-center transition-colors', 'w-8 h-8 rounded flex items-center justify-center transition-colors',
(formatting.textAlign || 'left') === 'left' (formatting.textAlign || 'left') === 'left'
? 'bg-blue-500 text-white shadow-sm' ? 'bg-blue-500 text-white shadow-sm'
: 'bg-white text-gray-700 hover:bg-blue-50 border border-gray-200 dark:bg-primary-d dark:text-primary-dt dark:hover:bg-primary/10 dark:border-primary/20' : 'bg-white text-gray-700 hover:bg-blue-50 border border-gray-200'
]" ]"
title="Alinear izquierda" title="Alinear izquierda"
> >
@ -184,7 +220,7 @@ const fontSizes = [8, 9, 10, 11, 12, 14, 16, 18, 20, 24, 28, 32, 36, 48, 72];
'w-8 h-8 rounded flex items-center justify-center transition-colors', 'w-8 h-8 rounded flex items-center justify-center transition-colors',
formatting.textAlign === 'center' formatting.textAlign === 'center'
? 'bg-blue-500 text-white shadow-sm' ? 'bg-blue-500 text-white shadow-sm'
: 'bg-white text-gray-700 hover:bg-blue-50 border border-gray-200 dark:bg-primary-d dark:text-primary-dt dark:hover:bg-primary/10 dark:border-primary/20' : 'bg-white text-gray-700 hover:bg-blue-50 border border-gray-200'
]" ]"
title="Centrar" title="Centrar"
> >
@ -197,27 +233,23 @@ const fontSizes = [8, 9, 10, 11, 12, 14, 16, 18, 20, 24, 28, 32, 36, 48, 72];
'w-8 h-8 rounded flex items-center justify-center transition-colors', 'w-8 h-8 rounded flex items-center justify-center transition-colors',
formatting.textAlign === 'right' formatting.textAlign === 'right'
? 'bg-blue-500 text-white shadow-sm' ? 'bg-blue-500 text-white shadow-sm'
: 'bg-white text-gray-700 hover:bg-blue-50 border border-gray-200 dark:bg-primary-d dark:text-primary-dt dark:hover:bg-primary/10 dark:border-primary/20' : 'bg-white text-gray-700 hover:bg-blue-50 border border-gray-200'
]" ]"
title="Alinear derecha" title="Alinear derecha"
> >
<GoogleIcon name="format_align_right" class="text-sm" /> <GoogleIcon name="format_align_right" class="text-sm" />
</button> </button>
</div> </div>
</div>
<!-- Separador --> <!-- Separador -->
<div class="w-px h-6 bg-gray-300 dark:bg-primary/30"></div> <div class="w-px h-6 bg-gray-300"></div>
<!-- Color de texto --> <!-- Color -->
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<span class="text-xs font-medium text-gray-600 dark:text-primary-dt/80">Color:</span>
<div class="flex items-center gap-2">
<!-- Color actual -->
<div <div
class="w-8 h-8 rounded border-2 border-gray-300 cursor-pointer relative overflow-hidden" class="w-8 h-8 rounded border-2 border-gray-300 cursor-pointer relative overflow-hidden"
:style="{ backgroundColor: formatting.color || '#000000' }" :style="{ backgroundColor: formatting.color || '#000000' }"
title="Color actual" title="Color de texto"
> >
<input <input
type="color" type="color"
@ -227,10 +259,9 @@ const fontSizes = [8, 9, 10, 11, 12, 14, 16, 18, 20, 24, 28, 32, 36, 48, 72];
/> />
</div> </div>
<!-- Colores rápidos -->
<div class="flex gap-1"> <div class="flex gap-1">
<button <button
v-for="color in predefinedColors.slice(0, 6)" v-for="color in predefinedColors.slice(0, 4)"
:key="color" :key="color"
@click="updateColor(color)" @click="updateColor(color)"
class="w-6 h-6 rounded border border-gray-300 hover:scale-110 transition-transform" class="w-6 h-6 rounded border border-gray-300 hover:scale-110 transition-transform"
@ -242,12 +273,11 @@ const fontSizes = [8, 9, 10, 11, 12, 14, 16, 18, 20, 24, 28, 32, 36, 48, 72];
></button> ></button>
</div> </div>
</div> </div>
</div>
<!-- Información del elemento --> <!-- Información de estado -->
<div class="ml-auto flex items-center gap-2 text-xs text-gray-500 dark:text-primary-dt/70"> <div class="ml-auto text-xs text-gray-500">
<GoogleIcon name="text_fields" class="text-sm" /> {{ activeElementInfo?.context === 'table-cell' ? 'Formateando celda de tabla' : 'Formateando texto' }}
<span>Elemento de texto seleccionado</span> </div>
</div> </div>
</div> </div>
</template> </template>

485
src/pages/Maquetador/Index.vue
View File

@ -1,10 +1,11 @@
<script setup> <script setup>
import { ref, nextTick, onMounted, computed } from 'vue'; import { ref, onMounted, computed } from 'vue';
import { PDFDocument, rgb, StandardFonts } from 'pdf-lib'; import { PDFDocument, rgb, StandardFonts } from 'pdf-lib';
import GoogleIcon from '@Shared/GoogleIcon.vue'; import GoogleIcon from '@Shared/GoogleIcon.vue';
import Draggable from '@Holos/Draggable.vue'; import Draggable from '@Holos/PDF/Draggable.vue';
import CanvasElement from '@Holos/Canvas.vue'; import CanvasElement from '@Holos/PDF/Canvas.vue';
import PDFViewport from '@Holos/PDFViewport.vue'; import PDFViewport from '@Holos/PDF/PDFViewport.vue';
import TextFormatter from '@Holos/PDF/TextFormatter.vue';
/** Estado reactivo */ /** Estado reactivo */
const pages = ref([{ id: 1, elements: [] }]); const pages = ref([{ id: 1, elements: [] }]);
@ -13,10 +14,75 @@ const elementCounter = ref(0);
const documentTitle = ref('Documento sin título'); const documentTitle = ref('Documento sin título');
const isExporting = ref(false); const isExporting = ref(false);
const currentPage = ref(1); 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 */ /** Referencias */
const viewportRef = ref(null); const viewportRef = ref(null);
/** Referencias adicionales para TextFormatter */
const selectedElement = ref(null);
const activeTextElement = ref(null);
const showTextFormatter = ref(false);
const selectElement = (elementId) => {
selectedElementId.value = elementId;
const selectedEl = allElements.value.find(el => el.id === elementId);
selectedElement.value = selectedEl;
// Mostrar TextFormatter si es texto o tabla
showTextFormatter.value = selectedEl?.type === 'text' || selectedEl?.type === 'table';
// Si es texto directo, activar como activeTextElement
if (selectedEl?.type === 'text') {
activeTextElement.value = selectedEl;
} else {
activeTextElement.value = null;
}
};
const updateElement = (update) => {
const element = allElements.value.find(el => el.id === update.id);
if (element) {
Object.assign(element, update);
// Actualizar referencias si es necesario
if (selectedElement.value?.id === update.id) {
selectedElement.value = { ...element };
}
if (activeTextElement.value?.id === update.id) {
activeTextElement.value = { ...element };
}
}
};
// Manejar selección de texto dentro de celdas de tabla
const handleTextSelected = (data) => {
activeTextElement.value = data.element;
showTextFormatter.value = true;
};
/** Tipos de elementos disponibles */ /** Tipos de elementos disponibles */
const availableElements = [ const availableElements = [
{ {
@ -109,14 +175,6 @@ const handleDragOver = (event) => {
event.preventDefault(); event.preventDefault();
}; };
const handleCanvasClick = (clickData) => {
selectedElementId.value = null;
};
const selectElement = (elementId) => {
selectedElementId.value = elementId;
};
const deleteElement = (elementId) => { const deleteElement = (elementId) => {
const index = allElements.value.findIndex(el => el.id === elementId); const index = allElements.value.findIndex(el => el.id === elementId);
if (index !== -1) { if (index !== -1) {
@ -128,26 +186,11 @@ const deleteElement = (elementId) => {
} }
}; };
const updateElement = (update) => {
const element = allElements.value.find(el => el.id === update.id);
if (element) {
Object.assign(element, update);
}
};
const moveElement = (moveData) => {
const element = allElements.value.find(el => el.id === moveData.id);
if (element) {
element.x = moveData.x;
element.y = moveData.y;
}
};
/** Paginación */ /** Paginación */
const addPage = () => { const addPage = () => {
const newPageId = Math.max(...pages.value.map(p => p.id)) + 1; pageIdCounter.value++; // <-- Incrementar contador independiente
pages.value.push({ pages.value.push({
id: newPageId, id: pageIdCounter.value,
elements: [] elements: []
}); });
}; };
@ -211,51 +254,86 @@ const exportPDF = async () => {
isExporting.value = true; isExporting.value = true;
window.Notify.info('Generando PDF...'); window.Notify.info('Generando PDF...');
// Crear un nuevo documento PDF // Crear un nuevo documento PDF con el tamaño de página seleccionado
const pdfDoc = await PDFDocument.create(); const pdfDoc = await PDFDocument.create();
let currentPage = pdfDoc.addPage([595.28, 841.89]); // A4 size in points
let currentPageHeight = 841.89; // Convertir dimensiones de pixels a puntos (1 px = 0.75 puntos)
let yOffset = 50; // Margen superior const pageWidthPoints = currentPageSize.value.width * 0.75;
const pageHeightPoints = currentPageSize.value.height * 0.75;
// Obtener fuentes // Obtener fuentes
const helveticaFont = await pdfDoc.embedFont(StandardFonts.Helvetica); const helveticaFont = await pdfDoc.embedFont(StandardFonts.Helvetica);
const helveticaBoldFont = await pdfDoc.embedFont(StandardFonts.HelveticaBold);
const courierFont = await pdfDoc.embedFont(StandardFonts.Courier); const courierFont = await pdfDoc.embedFont(StandardFonts.Courier);
// Ordenar elementos por posición (de arriba hacia abajo, de izquierda a derecha) // Procesar páginas del maquetador
const sortedElements = [...allElements.value].sort((a, b) => { for (let pageIndex = 0; pageIndex < pages.value.length; pageIndex++) {
const page = pages.value[pageIndex];
// Crear nueva página PDF
let currentPDFPage = pdfDoc.addPage([pageWidthPoints, pageHeightPoints]);
let 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) { if (Math.abs(a.y - b.y) < 20) {
return a.x - b.x; // Si están en la misma línea, ordenar por X return a.x - b.x;
} }
return a.y - b.y; // Ordenar por Y return a.y - b.y;
}); });
// Procesar elementos // Procesar elementos de la página
for (const element of sortedElements) { for (const element of sortedElements) {
// Calcular posición en el PDF // Calcular posición en el PDF manteniendo proporciones
const x = Math.max(50, Math.min(500, (element.x * 0.75) + 50)); // Convertir y limitar X const scaleX = pageWidthPoints / currentPageSize.value.width;
let y = currentPageHeight - yOffset - (element.y * 0.75); // Convertir Y const scaleY = pageHeightPoints / currentPageSize.value.height;
// Verificar si necesitamos una nueva página const x = Math.max(50, element.x * scaleX);
const elementHeight = getElementHeight(element); const y = currentPageHeight - (element.y * scaleY) - 50;
if (y - elementHeight < 50) {
currentPage = pdfDoc.addPage([595.28, 841.89]);
currentPageHeight = 841.89;
yOffset = 50;
y = currentPageHeight - yOffset;
}
switch (element.type) { switch (element.type) {
case 'text': case 'text':
if (element.content) { if (element.content && element.content.trim()) {
// Dividir texto largo en líneas // Obtener formato del elemento
const words = element.content.split(' '); const formatting = element.formatting || {};
const fontSize = Math.max(8, Math.min(72, formatting.fontSize || 12));
const isBold = formatting.bold || false;
const textAlign = formatting.textAlign || 'left';
// Convertir color hexadecimal a RGB
let textColor = rgb(0, 0, 0);
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 = isBold ? helveticaBoldFont : helveticaFont;
// NUEVO: Dividir por párrafos (saltos de línea)
const paragraphs = element.content.split('\n');
const maxWidth = Math.min(pageWidthPoints - 100, (element.width || 200) * scaleX);
const lineHeight = fontSize * 1.4;
let currentY = y;
paragraphs.forEach((paragraph, paragraphIndex) => {
if (paragraph.trim() === '') {
// Párrafo vacío - solo agregar espacio
currentY -= lineHeight;
return;
}
// Dividir párrafo en líneas que caben en el ancho
const words = paragraph.split(' ');
const lines = []; const lines = [];
let currentLine = ''; let currentLine = '';
const maxWidth = Math.min(400, (element.width || 200) * 0.75);
for (const word of words) { for (const word of words) {
const testLine = currentLine + (currentLine ? ' ' : '') + word; const testLine = currentLine + (currentLine ? ' ' : '') + word;
const testWidth = helveticaFont.widthOfTextAtSize(testLine, 12); const testWidth = font.widthOfTextAtSize(testLine, fontSize);
if (testWidth <= maxWidth) { if (testWidth <= maxWidth) {
currentLine = testLine; currentLine = testLine;
@ -266,65 +344,42 @@ const exportPDF = async () => {
} }
if (currentLine) lines.push(currentLine); if (currentLine) lines.push(currentLine);
// Dibujar cada línea // Dibujar cada línea del párrafo
lines.forEach((line, index) => { lines.forEach((line, lineIndex) => {
currentPage.drawText(line, { let lineX = x;
x: x, const lineWidth = font.widthOfTextAtSize(line, fontSize);
y: y - (index * 15),
size: 12,
font: helveticaFont,
color: rgb(0, 0, 0),
});
});
yOffset += lines.length * 15 + 10; // Calcular posición X según alineación
if (textAlign === 'center') {
lineX = x + (maxWidth - lineWidth) / 2;
} else if (textAlign === 'right') {
lineX = x + maxWidth - lineWidth;
} }
break;
case 'code': currentPDFPage.drawText(line, {
if (element.content) { x: Math.max(50, lineX),
// Dibujar fondo para el código y: currentY,
const codeLines = element.content.split('\n'); size: fontSize,
const codeWidth = Math.min(450, (element.width || 300) * 0.75); font: font,
const codeHeight = (codeLines.length * 12) + 20; color: textColor,
currentPage.drawRectangle({
x: x - 10,
y: y - codeHeight,
width: codeWidth,
height: codeHeight,
color: rgb(0.95, 0.95, 0.95),
}); });
// Dibujar código currentY -= lineHeight;
codeLines.forEach((line, index) => {
// Truncar líneas muy largas
const maxChars = Math.floor(codeWidth / 6);
const displayLine = line.length > maxChars ?
line.substring(0, maxChars - 3) + '...' : line;
currentPage.drawText(displayLine, {
x: x - 5,
y: y - 15 - (index * 12),
size: 9,
font: courierFont,
color: rgb(0, 0, 0),
});
}); });
yOffset += codeHeight + 20; // Agregar espacio extra entre párrafos
if (paragraphIndex < paragraphs.length - 1) {
currentY -= lineHeight * 0.3;
}
});
} }
break; break;
case 'image': case 'image':
if (element.content && element.content.startsWith('data:image')) { if (element.content && element.content.startsWith('data:image')) {
try { try {
// Convertir base64 a bytes
const base64Data = element.content.split(',')[1]; const base64Data = element.content.split(',')[1];
const imageBytes = Uint8Array.from( const imageBytes = Uint8Array.from(atob(base64Data), c => c.charCodeAt(0));
atob(base64Data),
c => c.charCodeAt(0)
);
let image; let image;
if (element.content.includes('image/jpeg') || element.content.includes('image/jpg')) { if (element.content.includes('image/jpeg') || element.content.includes('image/jpg')) {
@ -334,9 +389,8 @@ const exportPDF = async () => {
} }
if (image) { if (image) {
// Calcular dimensiones manteniendo proporción const maxWidth = Math.min(pageWidthPoints - 100, (element.width || 200) * scaleX);
const maxWidth = Math.min(400, (element.width || 200) * 0.75); const maxHeight = Math.min(300, (element.height || 150) * scaleY);
const maxHeight = Math.min(300, (element.height || 150) * 0.75);
const imageAspectRatio = image.width / image.height; const imageAspectRatio = image.width / image.height;
let displayWidth = maxWidth; let displayWidth = maxWidth;
@ -347,113 +401,123 @@ const exportPDF = async () => {
displayWidth = maxHeight * imageAspectRatio; displayWidth = maxHeight * imageAspectRatio;
} }
currentPage.drawImage(image, { currentPDFPage.drawImage(image, {
x: x, x: x,
y: y - displayHeight, y: y - displayHeight,
width: displayWidth, width: displayWidth,
height: displayHeight, height: displayHeight,
}); });
yOffset += displayHeight + 20;
} }
} catch (imageError) { } catch (imageError) {
console.warn('Error al procesar imagen:', imageError); console.warn('Error al procesar imagen:', imageError);
// Dibujar placeholder para imagen // Placeholder para imagen con error
currentPage.drawRectangle({ currentPDFPage.drawRectangle({
x: x, x: x,
y: y - 60, y: y - 60,
width: 100, width: 100 * scaleX,
height: 60, height: 60 * scaleY,
borderColor: rgb(0.7, 0.7, 0.7), borderColor: rgb(0.7, 0.7, 0.7),
borderWidth: 1, borderWidth: 1,
}); });
currentPage.drawText('[Imagen no disponible]', { currentPDFPage.drawText('[Error al cargar imagen]', {
x: x + 5, x: x + 5,
y: y - 35, y: y - 35,
size: 10, size: 10,
font: helveticaFont, font: helveticaFont,
color: rgb(0.7, 0.7, 0.7), color: rgb(0.7, 0.7, 0.7),
}); });
yOffset += 80;
} }
} else {
// Placeholder para imagen vacía
currentPage.drawRectangle({
x: x,
y: y - 60,
width: 100,
height: 60,
borderColor: rgb(0.7, 0.7, 0.7),
borderWidth: 1,
borderDashArray: [3, 3],
});
currentPage.drawText('[Imagen]', {
x: x + 25,
y: y - 35,
size: 10,
font: helveticaFont,
color: rgb(0.7, 0.7, 0.7),
});
yOffset += 80;
} }
break; break;
case 'table': case 'table':
if (element.content && element.content.data) { if (element.content && element.content.data && Array.isArray(element.content.data)) {
const tableData = element.content.data; const tableData = element.content.data;
const cellWidth = 80; const totalCols = tableData[0]?.length || 0;
const cellHeight = 20; const totalRows = tableData.length;
const tableWidth = tableData[0].length * cellWidth;
const tableHeight = tableData.length * cellHeight;
// Dibujar bordes de la tabla if (totalCols > 0 && totalRows > 0) {
currentPage.drawRectangle({ const availableWidth = Math.min(pageWidthPoints - 100, (element.width || 300) * scaleX);
const cellWidth = availableWidth / totalCols;
const cellHeight = 25;
const tableWidth = cellWidth * totalCols;
const tableHeight = cellHeight * totalRows;
// Dibujar borde exterior de la tabla
currentPDFPage.drawRectangle({
x: x, x: x,
y: y - tableHeight, y: y - tableHeight,
width: tableWidth, width: tableWidth,
height: tableHeight, height: tableHeight,
borderColor: rgb(0.3, 0.3, 0.3), borderColor: rgb(0.2, 0.2, 0.2),
borderWidth: 1, borderWidth: 1.5,
}); });
// Dibujar contenido de las celdas // Dibujar cada celda
tableData.forEach((row, rowIndex) => { tableData.forEach((row, rowIndex) => {
if (Array.isArray(row)) {
row.forEach((cell, colIndex) => { row.forEach((cell, colIndex) => {
const cellX = x + (colIndex * cellWidth); const cellX = x + (colIndex * cellWidth);
const cellY = y - (rowIndex * cellHeight) - 15; const cellY = y - (rowIndex * cellHeight);
// Dibujar borde de celda // Dibujar borde de celda
currentPage.drawRectangle({ currentPDFPage.drawRectangle({
x: cellX, x: cellX,
y: y - ((rowIndex + 1) * cellHeight), y: cellY - cellHeight,
width: cellWidth, width: cellWidth,
height: cellHeight, height: cellHeight,
borderColor: rgb(0.7, 0.7, 0.7), borderColor: rgb(0.7, 0.7, 0.7),
borderWidth: 0.5, borderWidth: 0.5,
}); });
// Dibujar texto de la celda (truncar si es muy largo) // Fondo especial para headers
const maxChars = 10; if (rowIndex === 0) {
const displayText = cell.length > maxChars ? currentPDFPage.drawRectangle({
cell.substring(0, maxChars - 3) + '...' : cell; x: cellX,
y: cellY - cellHeight,
width: cellWidth,
height: cellHeight,
color: rgb(0.95, 0.95, 1),
});
}
currentPage.drawText(displayText, { // Dibujar texto de la celda
x: cellX + 5, if (cell && typeof cell === 'string' && cell.trim()) {
y: cellY, const maxChars = Math.max(1, Math.floor(cellWidth / 6));
size: 8, let displayText = cell.trim();
font: helveticaFont,
color: rowIndex === 0 ? rgb(0.2, 0.2, 0.8) : rgb(0, 0, 0), // Encabezados en azul
});
});
});
yOffset += tableHeight + 20; if (displayText.length > maxChars) {
displayText = displayText.substring(0, maxChars - 3) + '...';
}
const fontSize = Math.max(8, Math.min(12, cellWidth / 8));
const font = rowIndex === 0 ? helveticaBoldFont : helveticaFont;
const textColor = rowIndex === 0 ? rgb(0.1, 0.1, 0.6) : rgb(0, 0, 0);
const textWidth = font.widthOfTextAtSize(displayText, fontSize);
const textX = cellX + (cellWidth - textWidth) / 2;
const textY = cellY - cellHeight/2 - fontSize/2;
currentPDFPage.drawText(displayText, {
x: Math.max(cellX + 2, textX),
y: Math.max(cellY - cellHeight + 5, textY),
size: fontSize,
font: font,
color: textColor,
});
}
});
}
});
}
} }
break; break;
default:
console.warn(`Tipo de elemento no soportado: ${element.type}`);
break;
}
} }
} }
@ -475,7 +539,7 @@ const exportPDF = async () => {
} catch (error) { } catch (error) {
console.error('Error al generar PDF:', error); console.error('Error al generar PDF:', error);
window.Notify.error('Error al generar el PDF'); window.Notify.error('Error al generar el PDF: ' + error.message);
} finally { } finally {
isExporting.value = false; isExporting.value = false;
} }
@ -504,6 +568,8 @@ const clearCanvas = () => {
pages.value = [{ id: 1, elements: [] }]; pages.value = [{ id: 1, elements: [] }];
selectedElementId.value = null; selectedElementId.value = null;
elementCounter.value = 0; elementCounter.value = 0;
pageIdCounter.value = 1; // <-- Resetear también el contador de páginas
currentPage.value = 1;
} }
}; };
@ -525,14 +591,14 @@ onMounted(() => {
</script> </script>
<template> <template>
<div class="flex h-screen bg-gray-50 dark:bg-primary-d/50"> <div class="flex flex-col lg:flex-row h-screen bg-gray-50">
<!-- Panel Izquierdo - Elementos --> <!-- Panel Izquierdo - Responsive -->
<div class="w-64 bg-white dark:bg-primary-d border-r border-gray-200 dark:border-primary/20 flex flex-col"> <div class="w-full lg:w-64 bg-white border-r border-gray-200 flex flex-col">
<!-- Header del panel --> <!-- Header del panel -->
<div class="p-4 border-b border-gray-200 dark:border-primary/20"> <div class="p-3 lg:p-4 border-b border-gray-200">
<div class="flex items-center gap-2 mb-4"> <div class="flex items-center gap-2 mb-3 lg:mb-4">
<GoogleIcon name="text_snippet" class="text-blue-600 dark:text-blue-400 text-xl" /> <GoogleIcon name="text_snippet" class="text-blue-600 text-lg lg:text-xl" />
<h2 class="font-semibold text-gray-900 dark:text-primary-dt text-sm"> <h2 class="font-semibold text-gray-900 text-sm">
Diseñador de Documentos Diseñador de Documentos
</h2> </h2>
</div> </div>
@ -540,7 +606,7 @@ onMounted(() => {
<!-- Título del documento --> <!-- Título del documento -->
<input <input
v-model="documentTitle" 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" class="w-full px-2 py-1 text-xs border border-gray-200 rounded mb-3"
placeholder="Título del documento" placeholder="Título del documento"
/> />
@ -548,12 +614,8 @@ onMounted(() => {
<button <button
@click="exportPDF" @click="exportPDF"
:disabled="isExporting" :disabled="isExporting"
:class="[ class="w-full flex items-center justify-center gap-2 px-3 py-2 text-sm rounded transition-colors"
'w-full flex items-center justify-center gap-2 px-3 py-2 text-sm rounded transition-colors', :class="isExporting ? 'bg-gray-400 text-white cursor-not-allowed' : 'bg-red-600 hover:bg-red-700 text-white'"
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" /> <GoogleIcon :name="isExporting ? 'hourglass_empty' : 'picture_as_pdf'" class="text-sm" />
{{ isExporting ? 'Generando PDF...' : 'Exportar PDF' }} {{ isExporting ? 'Generando PDF...' : 'Exportar PDF' }}
@ -561,15 +623,16 @@ onMounted(() => {
</div> </div>
<!-- Sección Elementos --> <!-- Sección Elementos -->
<div class="p-4 flex-1 overflow-y-auto"> <div class="p-3 lg: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"> <h3 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3">
Elementos Elementos
</h3> </h3>
<p class="text-xs text-gray-400 dark:text-primary-dt/70 mb-4"> <p class="text-xs text-gray-400 mb-4 hidden lg:block">
Arrastra elementos al canvas para crear tu documento Arrastra elementos al canvas para crear tu documento
</p> </p>
<div class="space-y-3"> <!-- Grid responsive de elementos -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-1 gap-2 lg:gap-3">
<Draggable <Draggable
v-for="element in availableElements" v-for="element in availableElements"
:key="element.type" :key="element.type"
@ -580,8 +643,9 @@ onMounted(() => {
/> />
</div> </div>
<!-- Agregar rápido --> <!-- Agregar rápido - Solo en desktop -->
<h3 class="text-xs font-semibold text-gray-500 dark:text-primary-dt/70 uppercase tracking-wider mt-6 mb-3"> <div class="hidden lg:block">
<h3 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mt-6 mb-3">
Agregar rápido Agregar rápido
</h3> </h3>
@ -591,47 +655,54 @@ onMounted(() => {
:key="`quick-${element.type}`" :key="`quick-${element.type}`"
@click="addQuickElement(element.type)" @click="addQuickElement(element.type)"
:disabled="isExporting" :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" class="w-full flex items-center gap-2 px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded transition-colors disabled:opacity-50"
> >
<GoogleIcon name="add" class="text-gray-400 dark:text-primary-dt/70 text-sm" /> <GoogleIcon name="add" class="text-gray-400 text-sm" />
{{ element.title }} {{ element.title }}
</button> </button>
</div> </div>
</div> </div>
</div>
<!-- Área Principal con Viewport -->
<div class="flex-1 flex flex-col">
<!-- Toolbar superior -->
<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">
<!-- Herramientas de formato (simuladas) -->
<div class="flex items-center gap-1 text-sm">
<button class="p-1 hover:bg-gray-100 dark:hover:bg-primary/10 rounded" :disabled="isExporting">
<GoogleIcon name="format_bold" class="text-gray-600 dark:text-primary-dt" />
</button>
<button class="p-1 hover:bg-gray-100 dark:hover:bg-primary/10 rounded" :disabled="isExporting">
<GoogleIcon name="format_italic" class="text-gray-600 dark:text-primary-dt" />
</button>
</div>
</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>
<!-- Limpiar todo -->
<div class="pt-4 mt-4 border-t border-gray-200">
<button <button
v-if="totalElements > 0" v-if="totalElements > 0"
@click="clearCanvas" @click="clearCanvas"
:disabled="isExporting" :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" class="w-full flex items-center justify-center gap-1 px-2 py-1 text-xs text-red-600 hover:text-red-700 hover:bg-red-50 rounded transition-colors disabled:opacity-50"
> >
<GoogleIcon name="delete" class="text-sm" /> <GoogleIcon name="delete" class="text-sm" />
Limpiar Todo Limpiar Todo
</button> </button>
</div> </div>
</div> </div>
</div>
<!-- Área Principal con Viewport -->
<div class="flex-1 flex flex-col min-h-0">
<!-- Toolbar superior básico -->
<div class="h-12 lg:h-14 bg-white border-b border-gray-200 flex items-center justify-between px-3 lg:px-4">
<div class="flex items-center gap-2 lg:gap-4">
<h2 class="font-semibold text-gray-900 text-sm truncate max-w-32 lg:max-w-none">
{{ documentTitle }}
</h2>
</div>
<div class="flex items-center gap-2 lg:gap-4">
<span class="text-xs text-gray-500 hidden sm:block">
{{ totalElements }} elemento{{ totalElements !== 1 ? 's' : '' }} • {{ pages.length }} página{{ pages.length !== 1 ? 's' : '' }}
</span>
</div>
</div>
<!-- TextFormatter estático y universal -->
<TextFormatter
:selected-element="selectedElement"
:active-text-element="activeTextElement"
:visible="showTextFormatter"
@update="updateElement"
@smart-align="handleSmartAlign"
/>
<!-- PDFViewport --> <!-- PDFViewport -->
<PDFViewport <PDFViewport
@ -644,6 +715,7 @@ onMounted(() => {
@add-page="addPage" @add-page="addPage"
@delete-page="deletePage" @delete-page="deletePage"
@page-change="(page) => currentPage = page" @page-change="(page) => currentPage = page"
@page-size-change="handlePageSizeChange"
> >
<template #elements="{ page, pageIndex }"> <template #elements="{ page, pageIndex }">
<CanvasElement <CanvasElement
@ -655,6 +727,7 @@ onMounted(() => {
@delete="deleteElement" @delete="deleteElement"
@update="updateElement" @update="updateElement"
@move="moveElement" @move="moveElement"
@text-selected="handleTextSelected"
/> />
</template> </template>
</PDFViewport> </PDFViewport>