Cambios al maquetador
This commit is contained in:
Juan Felipe Zapata Moreno
parent
5e56c71bca
commit
a6abe2de40
@ -1,25 +1,26 @@
|
||||
<script setup>
|
||||
import { ref, computed, nextTick, watch } from 'vue';
|
||||
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||
import { ref, computed, nextTick, watch } from "vue";
|
||||
import GoogleIcon from "@Shared/GoogleIcon.vue";
|
||||
import SimpleTable from "./TableEditor.vue";
|
||||
|
||||
/** Propiedades */
|
||||
const props = defineProps({
|
||||
element: {
|
||||
type: Object,
|
||||
required: true
|
||||
required: true,
|
||||
},
|
||||
isSelected: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
/** Eventos */
|
||||
const emit = defineEmits(['select', 'delete', 'update', 'move']);
|
||||
const emit = defineEmits(["select", "delete", "update", "move"]);
|
||||
|
||||
/** Referencias */
|
||||
const isEditing = ref(false);
|
||||
const editValue = ref('');
|
||||
const editValue = ref("");
|
||||
const editInput = ref(null);
|
||||
const editTextarea = ref(null);
|
||||
const elementRef = ref(null);
|
||||
@ -33,11 +34,6 @@ const fileInput = ref(null);
|
||||
/** Referencias adicionales para auto-posicionamiento */
|
||||
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 */
|
||||
const elementStyles = computed(() => {
|
||||
const baseStyles = {
|
||||
@ -46,13 +42,13 @@ const elementStyles = computed(() => {
|
||||
width: `${props.element.width || 200}px`,
|
||||
height: `${props.element.height || 40}px`,
|
||||
// Asegurar que la fuente se renderice con la misma métrica que el PDF
|
||||
fontFamily: 'Helvetica, Arial, sans-serif',
|
||||
lineHeight: '1.2',
|
||||
letterSpacing: 'normal'
|
||||
fontFamily: "Helvetica, Arial, sans-serif",
|
||||
lineHeight: "1.2",
|
||||
letterSpacing: "normal",
|
||||
};
|
||||
|
||||
// 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;
|
||||
|
||||
// Aplicar tamaño de fuente con factor de corrección
|
||||
@ -70,13 +66,13 @@ const elementStyles = computed(() => {
|
||||
const elementWidth = props.element.width || 200;
|
||||
|
||||
switch (formatting.containerAlign) {
|
||||
case 'center':
|
||||
case "center":
|
||||
baseStyles.left = `${(pageWidth - elementWidth) / 2}px`;
|
||||
break;
|
||||
case 'right':
|
||||
case "right":
|
||||
baseStyles.left = `${pageWidth - elementWidth - 50}px`; // 50px margen
|
||||
break;
|
||||
case 'left':
|
||||
case "left":
|
||||
default:
|
||||
baseStyles.left = `${props.element.x}px`;
|
||||
}
|
||||
@ -88,40 +84,40 @@ const elementStyles = computed(() => {
|
||||
|
||||
// Propiedades computadas para clases CSS dinámicas
|
||||
const textContainerClasses = computed(() => {
|
||||
if (props.element.type !== 'text') return {};
|
||||
if (props.element.type !== "text") return {};
|
||||
|
||||
const formatting = props.element.formatting || {};
|
||||
|
||||
return {
|
||||
'font-bold': formatting.bold,
|
||||
'italic': formatting.italic,
|
||||
'underline': formatting.underline,
|
||||
'text-left': !formatting.textAlign || formatting.textAlign === 'left',
|
||||
'text-center': formatting.textAlign === 'center',
|
||||
'text-right': formatting.textAlign === 'right',
|
||||
'justify-start': !formatting.textAlign || formatting.textAlign === 'left',
|
||||
'justify-center': formatting.textAlign === 'center',
|
||||
'justify-end': formatting.textAlign === 'right'
|
||||
"font-bold": formatting.bold,
|
||||
italic: formatting.italic,
|
||||
underline: formatting.underline,
|
||||
"text-left": !formatting.textAlign || formatting.textAlign === "left",
|
||||
"text-center": formatting.textAlign === "center",
|
||||
"text-right": formatting.textAlign === "right",
|
||||
"justify-start": !formatting.textAlign || formatting.textAlign === "left",
|
||||
"justify-center": formatting.textAlign === "center",
|
||||
"justify-end": formatting.textAlign === "right",
|
||||
};
|
||||
});
|
||||
|
||||
const inputClasses = computed(() => {
|
||||
if (props.element.type !== 'text') return {};
|
||||
if (props.element.type !== "text") return {};
|
||||
|
||||
const formatting = props.element.formatting || {};
|
||||
|
||||
return {
|
||||
'font-bold': formatting.bold,
|
||||
'italic': formatting.italic,
|
||||
'underline': formatting.underline,
|
||||
'text-left': !formatting.textAlign || formatting.textAlign === 'left',
|
||||
'text-center': formatting.textAlign === 'center',
|
||||
'text-right': formatting.textAlign === 'right'
|
||||
"font-bold": formatting.bold,
|
||||
italic: formatting.italic,
|
||||
underline: formatting.underline,
|
||||
"text-left": !formatting.textAlign || formatting.textAlign === "left",
|
||||
"text-center": formatting.textAlign === "center",
|
||||
"text-right": formatting.textAlign === "right",
|
||||
};
|
||||
});
|
||||
|
||||
const inputStyles = computed(() => {
|
||||
if (props.element.type !== 'text') return {};
|
||||
if (props.element.type !== "text") return {};
|
||||
|
||||
const formatting = props.element.formatting || {};
|
||||
const styles = {};
|
||||
@ -141,51 +137,69 @@ const inputStyles = computed(() => {
|
||||
const controlsPosition = computed(() => {
|
||||
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;
|
||||
|
||||
return {
|
||||
position: isNearTop ? 'bottom' : 'top',
|
||||
styles: isNearTop ? {
|
||||
top: '100%',
|
||||
marginTop: '8px'
|
||||
} : {
|
||||
bottom: '100%',
|
||||
marginBottom: '8px'
|
||||
styles: isNearTop
|
||||
? {
|
||||
top: "100%",
|
||||
marginTop: "8px",
|
||||
}
|
||||
: {
|
||||
bottom: "100%",
|
||||
marginBottom: "8px",
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
/** Watchers */
|
||||
watch(() => props.isSelected, (selected) => {
|
||||
if (selected && isEditing.value) {
|
||||
nextTick(() => {
|
||||
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();
|
||||
const tooltipPosition = computed(() => {
|
||||
if (!props.isSelected || isEditing.value) return {};
|
||||
|
||||
const isNearTop = props.element.y < 50;
|
||||
const hasControlButtons = props.element.type === "image";
|
||||
|
||||
const rightOffset = hasControlButtons ? "60px" : "0px";
|
||||
|
||||
return {
|
||||
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 */
|
||||
const handleSelect = (event) => {
|
||||
event.stopPropagation();
|
||||
emit('select', props.element.id);
|
||||
emit("select", props.element.id);
|
||||
};
|
||||
|
||||
const handleDelete = () => {
|
||||
emit('delete', props.element.id);
|
||||
emit("delete", props.element.id);
|
||||
};
|
||||
|
||||
const startEditing = () => {
|
||||
if (props.element.type === 'table' && props.element.content) {
|
||||
if (props.element.type === "table" && props.element.content) {
|
||||
// Deep copy para evitar mutaciones directas
|
||||
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");';
|
||||
} else {
|
||||
editValue.value = props.element.content || getDefaultEditValue();
|
||||
@ -202,52 +216,102 @@ const finishEditing = () => {
|
||||
if (isEditing.value) {
|
||||
isEditing.value = false;
|
||||
|
||||
// Para tablas, emitir el objeto completo
|
||||
if (props.element.type === 'table') {
|
||||
emit('update', {
|
||||
// Para tablas, los datos ya se actualizaron en tiempo real
|
||||
// Solo necesitamos confirmar que se guardaron
|
||||
if (props.element.type === "table" && editValue.value) {
|
||||
emit("update", {
|
||||
id: props.element.id,
|
||||
content: editValue.value
|
||||
content: editValue.value,
|
||||
});
|
||||
} else {
|
||||
emit('update', {
|
||||
} else if (props.element.type !== "table") {
|
||||
emit("update", {
|
||||
id: props.element.id,
|
||||
content: editValue.value
|
||||
content: editValue.value,
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleKeydown = (event) => {
|
||||
if (props.element.type === 'text') {
|
||||
if (event.key === 'Enter' && !event.shiftKey) {
|
||||
if (props.element.type === "text") {
|
||||
// Permitir Enter para salto de línea
|
||||
if (event.key === "Enter") {
|
||||
if (event.shiftKey || event.ctrlKey) {
|
||||
event.preventDefault();
|
||||
finishEditing();
|
||||
} else if (event.key === 'Escape') {
|
||||
isEditing.value = false;
|
||||
editValue.value = props.element.content || 'Nuevo texto';
|
||||
}
|
||||
} else if (props.element.type === 'code') {
|
||||
if (event.key === 'Escape') {
|
||||
// Si es solo Enter, permitir el salto de línea normal
|
||||
} 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;
|
||||
editValue.value = props.element.content || 'console.log("Hola mundo");';
|
||||
}
|
||||
// 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();
|
||||
finishEditing();
|
||||
}
|
||||
} else if (props.element.type === 'table') {
|
||||
if (event.key === 'Escape') {
|
||||
} else if (props.element.type === "table") {
|
||||
if (event.key === "Escape") {
|
||||
isEditing.value = false;
|
||||
// Restaurar el contenido original de la tabla
|
||||
editValue.value = props.element.content ?
|
||||
JSON.parse(JSON.stringify(props.element.content)) :
|
||||
getDefaultEditValue();
|
||||
editValue.value = props.element.content
|
||||
? JSON.parse(JSON.stringify(props.element.content))
|
||||
: 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
|
||||
const handleFileSelect = (event) => {
|
||||
const file = event.target.files[0];
|
||||
if (file && file.type.startsWith('image/')) {
|
||||
if (file && file.type.startsWith("image/")) {
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
emit('update', {
|
||||
emit("update", {
|
||||
id: props.element.id,
|
||||
content: e.target.result,
|
||||
fileName: file.name
|
||||
fileName: file.name,
|
||||
});
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
// Limpiar el input
|
||||
event.target.value = '';
|
||||
event.target.value = "";
|
||||
};
|
||||
|
||||
// Funcionalidad de arrastre
|
||||
@ -277,11 +341,11 @@ const handleMouseDown = (event) => {
|
||||
isDragging.value = true;
|
||||
dragStart.value = {
|
||||
x: event.clientX - props.element.x,
|
||||
y: event.clientY - props.element.y
|
||||
y: event.clientY - props.element.y,
|
||||
};
|
||||
|
||||
document.addEventListener('mousemove', handleMouseMove);
|
||||
document.addEventListener('mouseup', handleMouseUp);
|
||||
document.addEventListener("mousemove", handleMouseMove);
|
||||
document.addEventListener("mouseup", handleMouseUp);
|
||||
|
||||
event.preventDefault();
|
||||
};
|
||||
@ -291,10 +355,10 @@ const handleMouseMove = (event) => {
|
||||
const newX = event.clientX - dragStart.value.x;
|
||||
const newY = event.clientY - dragStart.value.y;
|
||||
|
||||
emit('move', {
|
||||
emit("move", {
|
||||
id: props.element.id,
|
||||
x: Math.max(0, newX),
|
||||
y: Math.max(0, newY)
|
||||
y: Math.max(0, newY),
|
||||
});
|
||||
} else if (isResizing.value && !isDragging.value) {
|
||||
handleResizeMove(event);
|
||||
@ -305,8 +369,8 @@ const handleMouseUp = () => {
|
||||
isDragging.value = false;
|
||||
isResizing.value = false;
|
||||
resizeDirection.value = null;
|
||||
document.removeEventListener('mousemove', handleMouseMove);
|
||||
document.removeEventListener('mouseup', handleMouseUp);
|
||||
document.removeEventListener("mousemove", handleMouseMove);
|
||||
document.removeEventListener("mouseup", handleMouseUp);
|
||||
};
|
||||
|
||||
// Funcionalidad de redimensionamiento por esquina
|
||||
@ -315,16 +379,16 @@ const startResize = (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
isResizing.value = true;
|
||||
resizeDirection.value = 'corner';
|
||||
resizeDirection.value = "corner";
|
||||
resizeStart.value = {
|
||||
x: event.clientX,
|
||||
y: event.clientY,
|
||||
width: props.element.width || 200,
|
||||
height: props.element.height || 40
|
||||
height: props.element.height || 40,
|
||||
};
|
||||
|
||||
document.addEventListener('mousemove', handleMouseMove);
|
||||
document.addEventListener('mouseup', handleMouseUp);
|
||||
document.addEventListener("mousemove", handleMouseMove);
|
||||
document.addEventListener("mouseup", handleMouseUp);
|
||||
};
|
||||
|
||||
// Funcionalidad de redimensionamiento por bordes
|
||||
@ -338,11 +402,11 @@ const startResizeEdge = (event, direction) => {
|
||||
x: event.clientX,
|
||||
y: event.clientY,
|
||||
width: props.element.width || 200,
|
||||
height: props.element.height || 40
|
||||
height: props.element.height || 40,
|
||||
};
|
||||
|
||||
document.addEventListener('mousemove', handleMouseMove);
|
||||
document.addEventListener('mouseup', handleMouseUp);
|
||||
document.addEventListener("mousemove", handleMouseMove);
|
||||
document.addEventListener("mouseup", handleMouseUp);
|
||||
};
|
||||
|
||||
const handleResizeMove = (event) => {
|
||||
@ -355,30 +419,42 @@ const handleResizeMove = (event) => {
|
||||
let newHeight = resizeStart.value.height;
|
||||
|
||||
// Calcular nuevas dimensiones según la dirección
|
||||
if (resizeDirection.value === 'corner') {
|
||||
newWidth = Math.max(getMinWidth(), Math.min(getMaxWidth(), resizeStart.value.width + deltaX));
|
||||
newHeight = Math.max(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));
|
||||
if (resizeDirection.value === "corner") {
|
||||
newWidth = Math.max(
|
||||
getMinWidth(),
|
||||
Math.min(getMaxWidth(), resizeStart.value.width + deltaX)
|
||||
);
|
||||
newHeight = Math.max(
|
||||
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,
|
||||
width: newWidth,
|
||||
height: newHeight
|
||||
height: newHeight,
|
||||
});
|
||||
};
|
||||
|
||||
// Obtener tamaños mínimos según el tipo de elemento
|
||||
const getMinWidth = () => {
|
||||
switch (props.element.type) {
|
||||
case 'text':
|
||||
case "text":
|
||||
return 100;
|
||||
case 'image':
|
||||
case "image":
|
||||
return 100;
|
||||
case 'table':
|
||||
case "table":
|
||||
return 200;
|
||||
default:
|
||||
return 100;
|
||||
@ -387,11 +463,11 @@ const getMinWidth = () => {
|
||||
|
||||
const getMinHeight = () => {
|
||||
switch (props.element.type) {
|
||||
case 'text':
|
||||
case "text":
|
||||
return 30;
|
||||
case 'image':
|
||||
case "image":
|
||||
return 80;
|
||||
case 'table':
|
||||
case "table":
|
||||
return 80;
|
||||
default:
|
||||
return 30;
|
||||
@ -407,42 +483,99 @@ const getMaxHeight = () => {
|
||||
return 600; // Máximo general
|
||||
};
|
||||
|
||||
// Nuevos métodos para alineación
|
||||
const updateContainerAlign = (align) => {
|
||||
emit('update', {
|
||||
id: props.element.id,
|
||||
formatting: {
|
||||
...props.element.formatting,
|
||||
containerAlign: align
|
||||
/** Watchers */
|
||||
watch(
|
||||
() => props.isSelected,
|
||||
(selected) => {
|
||||
if (selected && isEditing.value) {
|
||||
nextTick(() => {
|
||||
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) => {
|
||||
const pageWidth = 794; // Obtener dinámicamente del viewport
|
||||
const elementWidth = props.element.width || 200;
|
||||
let newX = props.element.x;
|
||||
// Nuevas variables reactivas para selección de texto
|
||||
const selectedTextRange = ref(null);
|
||||
const isSelectingText = ref(false);
|
||||
|
||||
switch (align) {
|
||||
case 'center':
|
||||
newX = (pageWidth - elementWidth) / 2;
|
||||
break;
|
||||
case 'right':
|
||||
newX = pageWidth - elementWidth - 50; // margen derecho
|
||||
break;
|
||||
case 'left':
|
||||
default:
|
||||
newX = 50; // margen izquierdo
|
||||
// Método para capturar selección de texto
|
||||
const handleTextSelection = () => {
|
||||
if (props.element.type === 'text' && !isEditing.value) {
|
||||
const selection = window.getSelection();
|
||||
if (selection.rangeCount > 0 && selection.toString().length > 0) {
|
||||
const range = selection.getRangeAt(0);
|
||||
selectedTextRange.value = {
|
||||
start: range.startOffset,
|
||||
end: range.endOffset,
|
||||
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', {
|
||||
id: props.element.id,
|
||||
x: newX,
|
||||
formatting: {
|
||||
...props.element.formatting,
|
||||
textAlign: align
|
||||
}
|
||||
formatting: formatting
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -457,12 +590,12 @@ const updateSmartAlign = (align) => {
|
||||
:class="{
|
||||
'ring-2 ring-blue-500 ring-opacity-50': isSelected,
|
||||
'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-e-resize': isResizing && resizeDirection === 'right',
|
||||
'cursor-s-resize': isResizing && resizeDirection === 'bottom',
|
||||
'z-50': isSelected,
|
||||
'z-10': !isSelected
|
||||
'z-10': !isSelected,
|
||||
}"
|
||||
>
|
||||
<!-- Input oculto para selección de archivos -->
|
||||
@ -477,56 +610,67 @@ const updateSmartAlign = (align) => {
|
||||
<!-- Elemento de Texto MEJORADO -->
|
||||
<div
|
||||
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"
|
||||
:style="{
|
||||
fontSize: element.formatting?.fontSize ? `${element.formatting.fontSize}px` : '14px',
|
||||
color: element.formatting?.color || '#374151',
|
||||
fontFamily: 'Helvetica, Arial, sans-serif',
|
||||
lineHeight: '1.2',
|
||||
lineHeight: '1.4',
|
||||
letterSpacing: 'normal',
|
||||
// Simular exactamente como se verá en el PDF
|
||||
textRendering: 'geometricPrecision',
|
||||
fontSmooth: 'always',
|
||||
WebkitFontSmoothing: 'antialiased'
|
||||
WebkitFontSmoothing: 'antialiased',
|
||||
}"
|
||||
>
|
||||
<input
|
||||
<!-- Textarea para edición -->
|
||||
<textarea
|
||||
v-if="isEditing"
|
||||
ref="editInput"
|
||||
ref="editTextarea"
|
||||
v-model="editValue"
|
||||
@blur="finishEditing"
|
||||
@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"
|
||||
:style="{
|
||||
...inputStyles,
|
||||
fontFamily: 'Helvetica, Arial, sans-serif',
|
||||
lineHeight: '1.2',
|
||||
letterSpacing: 'normal'
|
||||
lineHeight: '1.4',
|
||||
letterSpacing: 'normal',
|
||||
minHeight: '20px',
|
||||
height: 'auto',
|
||||
}"
|
||||
@mousedown.stop
|
||||
/>
|
||||
<span
|
||||
placeholder="Escribe tu texto aquí... (Shift+Enter o Ctrl+Enter para terminar)"
|
||||
></textarea>
|
||||
|
||||
<!-- Vista de solo lectura con selección de texto -->
|
||||
<div
|
||||
v-else
|
||||
class="truncate pointer-events-none w-full"
|
||||
class="w-full h-full overflow-hidden cursor-text"
|
||||
:class="textContainerClasses"
|
||||
:style="{
|
||||
fontSize: element.formatting?.fontSize ? `${element.formatting.fontSize}px` : '14px',
|
||||
color: element.formatting?.color || '#374151',
|
||||
fontFamily: 'Helvetica, Arial, sans-serif',
|
||||
lineHeight: '1.2',
|
||||
letterSpacing: 'normal'
|
||||
lineHeight: '1.4',
|
||||
letterSpacing: 'normal',
|
||||
whiteSpace: 'pre-wrap',
|
||||
wordWrap: 'break-word',
|
||||
}"
|
||||
@mouseup="handleTextSelection"
|
||||
@selectstart="() => isSelectingText = true"
|
||||
>
|
||||
{{ element.content || 'Nuevo texto' }}
|
||||
</span>
|
||||
{{ element.content || "Nuevo texto" }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Elemento de Imagen -->
|
||||
<div
|
||||
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"
|
||||
@dblclick.stop="handleImageDoubleClick"
|
||||
>
|
||||
<!-- Si hay imagen cargada -->
|
||||
<img
|
||||
@ -536,69 +680,25 @@ const updateSmartAlign = (align) => {
|
||||
class="w-full h-full object-cover pointer-events-none"
|
||||
/>
|
||||
<!-- 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" />
|
||||
<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>
|
||||
|
||||
<!-- Elemento de Tabla -->
|
||||
<div
|
||||
v-else-if="element.type === 'table'"
|
||||
class="w-full h-full bg-white rounded border overflow-hidden"
|
||||
>
|
||||
<div v-if="element.content && element.content.data" class="w-full h-full">
|
||||
<table class="w-full h-full text-xs border-collapse">
|
||||
<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
|
||||
<!-- Elemento de Tabla SIMPLE -->
|
||||
<SimpleTable
|
||||
v-if="element.type === 'table'"
|
||||
:element="element"
|
||||
:is-editing="isEditing"
|
||||
@update="(data) => emit('update', data)"
|
||||
@finish-editing="() => { isEditing = false; }"
|
||||
/>
|
||||
<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 -->
|
||||
<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"
|
||||
></div>
|
||||
|
||||
<!-- Botón para cargar imagen (solo para elementos de imagen) -->
|
||||
<!-- Botón para cargar imagen -->
|
||||
<button
|
||||
v-if="element.type === 'image'"
|
||||
@click.stop="() => fileInput.click()"
|
||||
@ -640,7 +740,10 @@ const updateSmartAlign = (align) => {
|
||||
</div>
|
||||
|
||||
<!-- 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 -->
|
||||
<div
|
||||
@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"
|
||||
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>
|
||||
|
||||
<!-- 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"
|
||||
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>
|
||||
|
||||
<!-- Tooltips adaptativos -->
|
||||
<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]"
|
||||
: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' }}
|
||||
{{ element.type === 'code' ? ' (Ctrl+Enter para guardar)' : '' }}
|
||||
Doble clic para escribir párrafos
|
||||
</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 -->
|
||||
<div
|
||||
v-if="isDragging"
|
||||
@ -700,26 +803,6 @@ const updateSmartAlign = (align) => {
|
||||
v-if="isResizing"
|
||||
class="absolute inset-0 bg-green-500 opacity-20 rounded pointer-events-none"
|
||||
></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>
|
||||
</template>
|
||||
|
||||
@ -730,4 +813,15 @@ const updateSmartAlign = (align) => {
|
||||
-moz-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>
|
||||
@ -39,24 +39,24 @@ const handleDragEnd = () => {
|
||||
draggable="true"
|
||||
@dragstart="handleDragStart"
|
||||
@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="{
|
||||
'opacity-50 cursor-grabbing': 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
|
||||
:name="icon"
|
||||
class="text-blue-600 dark:text-blue-400 text-lg"
|
||||
class="text-blue-600 text-sm sm:text-lg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<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 }}
|
||||
</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 }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
201
src/components/Holos/PDF/TableEditor.vue
Normal file
201
src/components/Holos/PDF/TableEditor.vue
Normal 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>
|
||||
@ -2,111 +2,153 @@
|
||||
import { ref, computed, watch } from 'vue';
|
||||
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||
|
||||
/** Propiedades */
|
||||
const props = defineProps({
|
||||
element: {
|
||||
selectedElement: {
|
||||
type: Object,
|
||||
default: null
|
||||
},
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
activeTextElement: {
|
||||
type: Object,
|
||||
default: null
|
||||
}
|
||||
});
|
||||
|
||||
/** Eventos */
|
||||
const emit = defineEmits(['update']);
|
||||
const emit = defineEmits(['update', 'smart-align']);
|
||||
|
||||
/** Propiedades computadas */
|
||||
const formatting = computed(() => props.element?.formatting || {});
|
||||
const hasTextElement = computed(() => props.element?.type === 'text');
|
||||
// Determinar si hay un elemento de texto activo (puede ser texto directo o celda de tabla)
|
||||
const hasActiveText = computed(() => {
|
||||
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 = () => {
|
||||
if (!hasTextElement.value) return;
|
||||
if (!hasActiveText.value) return;
|
||||
updateFormatting('bold', !formatting.value.bold);
|
||||
};
|
||||
|
||||
const toggleItalic = () => {
|
||||
if (!hasTextElement.value) return;
|
||||
if (!hasActiveText.value) return;
|
||||
updateFormatting('italic', !formatting.value.italic);
|
||||
};
|
||||
|
||||
const toggleUnderline = () => {
|
||||
if (!hasTextElement.value) return;
|
||||
if (!hasActiveText.value) return;
|
||||
updateFormatting('underline', !formatting.value.underline);
|
||||
};
|
||||
|
||||
const updateFontSize = (size) => {
|
||||
if (!hasTextElement.value) return;
|
||||
if (!hasActiveText.value) return;
|
||||
updateFormatting('fontSize', size);
|
||||
};
|
||||
|
||||
const updateTextAlign = (align) => {
|
||||
if (!hasTextElement.value) return;
|
||||
if (!hasActiveText.value) return;
|
||||
updateFormatting('textAlign', align);
|
||||
};
|
||||
|
||||
const updateColor = (color) => {
|
||||
if (!hasTextElement.value) return;
|
||||
if (!hasActiveText.value) return;
|
||||
updateFormatting('color', color);
|
||||
};
|
||||
|
||||
const updateFormatting = (key, value) => {
|
||||
const newFormatting = { ...formatting.value, [key]: value };
|
||||
emit('update', {
|
||||
id: props.element.id,
|
||||
formatting: newFormatting
|
||||
});
|
||||
};
|
||||
|
||||
const updateContainerAlign = (align) => {
|
||||
if (!hasTextElement.value) return;
|
||||
updateFormatting('containerAlign', align);
|
||||
};
|
||||
|
||||
const updateSmartAlign = (align) => {
|
||||
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
|
||||
// Determinar qué elemento actualizar
|
||||
let targetId = null;
|
||||
if (props.activeTextElement) {
|
||||
targetId = props.activeTextElement.id;
|
||||
} else if (props.selectedElement?.type === 'text') {
|
||||
targetId = props.selectedElement.id;
|
||||
}
|
||||
|
||||
if (targetId) {
|
||||
emit('update', {
|
||||
id: targetId,
|
||||
formatting: newFormatting,
|
||||
context: activeElementInfo.value?.context
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
/** Colores predefinidos */
|
||||
/** Colores y tamaños predefinidos */
|
||||
const predefinedColors = [
|
||||
'#000000', '#333333', '#666666', '#999999',
|
||||
'#FF0000', '#00FF00', '#0000FF', '#FFFF00',
|
||||
'#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];
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
v-if="visible && hasTextElement"
|
||||
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="bg-gray-50 border-b border-gray-200 transition-all duration-300"
|
||||
:class="{
|
||||
'h-12 opacity-100': visible && hasActiveText,
|
||||
'h-0 opacity-0 overflow-hidden': !visible || !hasActiveText
|
||||
}"
|
||||
>
|
||||
<!-- Estilo de texto -->
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-xs font-medium text-gray-600 dark:text-primary-dt/80">Estilo:</span>
|
||||
<div class="flex gap-1">
|
||||
<div
|
||||
v-if="hasActiveText"
|
||||
class="flex items-center gap-4 px-4 py-2 h-full"
|
||||
>
|
||||
<!-- 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
|
||||
@click="toggleBold"
|
||||
:class="[
|
||||
'w-8 h-8 rounded flex items-center justify-center text-sm font-bold transition-colors',
|
||||
formatting.bold
|
||||
? '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)"
|
||||
>
|
||||
@ -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',
|
||||
formatting.italic
|
||||
? '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)"
|
||||
>
|
||||
@ -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',
|
||||
formatting.underline
|
||||
? '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)"
|
||||
>
|
||||
U
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 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 -->
|
||||
<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
|
||||
:value="formatting.fontSize || 12"
|
||||
@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">
|
||||
{{ size }}px
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- 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 -->
|
||||
<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">
|
||||
<button
|
||||
@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',
|
||||
(formatting.textAlign || 'left') === 'left'
|
||||
? '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"
|
||||
>
|
||||
@ -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',
|
||||
formatting.textAlign === 'center'
|
||||
? '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"
|
||||
>
|
||||
@ -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',
|
||||
formatting.textAlign === 'right'
|
||||
? '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"
|
||||
>
|
||||
<GoogleIcon name="format_align_right" class="text-sm" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 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">
|
||||
<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
|
||||
class="w-8 h-8 rounded border-2 border-gray-300 cursor-pointer relative overflow-hidden"
|
||||
:style="{ backgroundColor: formatting.color || '#000000' }"
|
||||
title="Color actual"
|
||||
title="Color de texto"
|
||||
>
|
||||
<input
|
||||
type="color"
|
||||
@ -227,10 +259,9 @@ const fontSizes = [8, 9, 10, 11, 12, 14, 16, 18, 20, 24, 28, 32, 36, 48, 72];
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Colores rápidos -->
|
||||
<div class="flex gap-1">
|
||||
<button
|
||||
v-for="color in predefinedColors.slice(0, 6)"
|
||||
v-for="color in predefinedColors.slice(0, 4)"
|
||||
:key="color"
|
||||
@click="updateColor(color)"
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Información del elemento -->
|
||||
<div class="ml-auto flex items-center gap-2 text-xs text-gray-500 dark:text-primary-dt/70">
|
||||
<GoogleIcon name="text_fields" class="text-sm" />
|
||||
<span>Elemento de texto seleccionado</span>
|
||||
<!-- Información de estado -->
|
||||
<div class="ml-auto text-xs text-gray-500">
|
||||
{{ activeElementInfo?.context === 'table-cell' ? 'Formateando celda de tabla' : 'Formateando texto' }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -41,15 +41,25 @@ const moveElement = (moveData) => {
|
||||
/** Referencias */
|
||||
const viewportRef = ref(null);
|
||||
|
||||
/** Referencias adicionales */
|
||||
const textFormatterElement = 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);
|
||||
showTextFormatter.value = selectedEl?.type === 'text';
|
||||
textFormatterElement.value = selectedEl;
|
||||
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) => {
|
||||
@ -57,40 +67,20 @@ const updateElement = (update) => {
|
||||
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 };
|
||||
// Actualizar referencias si es necesario
|
||||
if (selectedElement.value?.id === update.id) {
|
||||
selectedElement.value = { ...element };
|
||||
}
|
||||
if (activeTextElement.value?.id === update.id) {
|
||||
activeTextElement.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 };
|
||||
}
|
||||
// Manejar selección de texto dentro de celdas de tabla
|
||||
const handleTextSelected = (data) => {
|
||||
activeTextElement.value = data.element;
|
||||
showTextFormatter.value = true;
|
||||
};
|
||||
|
||||
/** Tipos de elementos disponibles */
|
||||
@ -271,9 +261,6 @@ const exportPDF = async () => {
|
||||
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);
|
||||
@ -283,11 +270,9 @@ const exportPDF = async () => {
|
||||
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;
|
||||
}
|
||||
// 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) => {
|
||||
@ -308,16 +293,15 @@ const exportPDF = async () => {
|
||||
|
||||
switch (element.type) {
|
||||
case 'text':
|
||||
if (element.content) {
|
||||
if (element.content && element.content.trim()) {
|
||||
// Obtener formato del elemento
|
||||
const formatting = element.formatting || {};
|
||||
const fontSize = formatting.fontSize || 12;
|
||||
const fontSize = Math.max(8, Math.min(72, 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
|
||||
let textColor = rgb(0, 0, 0);
|
||||
if (formatting.color) {
|
||||
const hex = formatting.color.replace('#', '');
|
||||
const r = parseInt(hex.substr(0, 2), 16) / 255;
|
||||
@ -327,19 +311,25 @@ const exportPDF = async () => {
|
||||
}
|
||||
|
||||
// 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;
|
||||
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 texto largo en líneas
|
||||
const words = element.content.split(' ');
|
||||
// Dividir párrafo en líneas que caben en el ancho
|
||||
const words = paragraph.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;
|
||||
@ -354,11 +344,12 @@ const exportPDF = async () => {
|
||||
}
|
||||
if (currentLine) lines.push(currentLine);
|
||||
|
||||
// Calcular posición X según alineación
|
||||
lines.forEach((line, index) => {
|
||||
// Dibujar cada línea del párrafo
|
||||
lines.forEach((line, lineIndex) => {
|
||||
let lineX = x;
|
||||
const lineWidth = font.widthOfTextAtSize(line, fontSize);
|
||||
|
||||
// Calcular posición X según alineación
|
||||
if (textAlign === 'center') {
|
||||
lineX = x + (maxWidth - lineWidth) / 2;
|
||||
} else if (textAlign === 'right') {
|
||||
@ -367,11 +358,19 @@ const exportPDF = async () => {
|
||||
|
||||
currentPDFPage.drawText(line, {
|
||||
x: Math.max(50, lineX),
|
||||
y: y - (index * (fontSize + 3)),
|
||||
y: currentY,
|
||||
size: fontSize,
|
||||
font: font,
|
||||
color: textColor,
|
||||
});
|
||||
|
||||
currentY -= lineHeight;
|
||||
});
|
||||
|
||||
// Agregar espacio extra entre párrafos
|
||||
if (paragraphIndex < paragraphs.length - 1) {
|
||||
currentY -= lineHeight * 0.3;
|
||||
}
|
||||
});
|
||||
}
|
||||
break;
|
||||
@ -380,10 +379,7 @@ const exportPDF = async () => {
|
||||
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)
|
||||
);
|
||||
const imageBytes = Uint8Array.from(atob(base64Data), c => c.charCodeAt(0));
|
||||
|
||||
let image;
|
||||
if (element.content.includes('image/jpeg') || element.content.includes('image/jpg')) {
|
||||
@ -424,7 +420,7 @@ const exportPDF = async () => {
|
||||
borderWidth: 1,
|
||||
});
|
||||
|
||||
currentPDFPage.drawText('[Imagen no disponible]', {
|
||||
currentPDFPage.drawText('[Error al cargar imagen]', {
|
||||
x: x + 5,
|
||||
y: y - 35,
|
||||
size: 10,
|
||||
@ -432,73 +428,94 @@ const exportPDF = async () => {
|
||||
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) {
|
||||
if (element.content && element.content.data && Array.isArray(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;
|
||||
const totalCols = tableData[0]?.length || 0;
|
||||
const totalRows = tableData.length;
|
||||
|
||||
if (totalCols > 0 && totalRows > 0) {
|
||||
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,
|
||||
y: y - tableHeight,
|
||||
width: tableWidth,
|
||||
height: tableHeight,
|
||||
borderColor: rgb(0.3, 0.3, 0.3),
|
||||
borderWidth: 1,
|
||||
borderColor: rgb(0.2, 0.2, 0.2),
|
||||
borderWidth: 1.5,
|
||||
});
|
||||
|
||||
// Dibujar cada celda
|
||||
tableData.forEach((row, rowIndex) => {
|
||||
if (Array.isArray(row)) {
|
||||
row.forEach((cell, colIndex) => {
|
||||
const cellX = x + (colIndex * cellWidth);
|
||||
const cellY = y - (rowIndex * cellHeight) - 15;
|
||||
const cellY = y - (rowIndex * cellHeight);
|
||||
|
||||
// Dibujar borde de celda
|
||||
currentPDFPage.drawRectangle({
|
||||
x: cellX,
|
||||
y: y - ((rowIndex + 1) * cellHeight),
|
||||
y: cellY - 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),
|
||||
});
|
||||
});
|
||||
// Fondo especial para headers
|
||||
if (rowIndex === 0) {
|
||||
currentPDFPage.drawRectangle({
|
||||
x: cellX,
|
||||
y: cellY - cellHeight,
|
||||
width: cellWidth,
|
||||
height: cellHeight,
|
||||
color: rgb(0.95, 0.95, 1),
|
||||
});
|
||||
}
|
||||
|
||||
// Dibujar texto de la celda
|
||||
if (cell && typeof cell === 'string' && cell.trim()) {
|
||||
const maxChars = Math.max(1, Math.floor(cellWidth / 6));
|
||||
let displayText = cell.trim();
|
||||
|
||||
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;
|
||||
|
||||
default:
|
||||
console.warn(`Tipo de elemento no soportado: ${element.type}`);
|
||||
break;
|
||||
}
|
||||
}
|
||||
@ -522,7 +539,7 @@ const exportPDF = async () => {
|
||||
|
||||
} catch (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 {
|
||||
isExporting.value = false;
|
||||
}
|
||||
@ -574,14 +591,14 @@ onMounted(() => {
|
||||
</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">
|
||||
<div class="flex flex-col lg:flex-row h-screen bg-gray-50">
|
||||
<!-- Panel Izquierdo - Responsive -->
|
||||
<div class="w-full lg:w-64 bg-white border-r border-gray-200 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">
|
||||
<div class="p-3 lg:p-4 border-b border-gray-200">
|
||||
<div class="flex items-center gap-2 mb-3 lg:mb-4">
|
||||
<GoogleIcon name="text_snippet" class="text-blue-600 text-lg lg:text-xl" />
|
||||
<h2 class="font-semibold text-gray-900 text-sm">
|
||||
Diseñador de Documentos
|
||||
</h2>
|
||||
</div>
|
||||
@ -589,7 +606,7 @@ onMounted(() => {
|
||||
<!-- 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"
|
||||
class="w-full px-2 py-1 text-xs border border-gray-200 rounded mb-3"
|
||||
placeholder="Título del documento"
|
||||
/>
|
||||
|
||||
@ -597,12 +614,8 @@ onMounted(() => {
|
||||
<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'
|
||||
]"
|
||||
class="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'"
|
||||
>
|
||||
<GoogleIcon :name="isExporting ? 'hourglass_empty' : 'picture_as_pdf'" class="text-sm" />
|
||||
{{ isExporting ? 'Generando PDF...' : 'Exportar PDF' }}
|
||||
@ -610,15 +623,16 @@ onMounted(() => {
|
||||
</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">
|
||||
<div class="p-3 lg:p-4 flex-1 overflow-y-auto">
|
||||
<h3 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3">
|
||||
Elementos
|
||||
</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
|
||||
</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
|
||||
v-for="element in availableElements"
|
||||
:key="element.type"
|
||||
@ -629,8 +643,9 @@ onMounted(() => {
|
||||
/>
|
||||
</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 - Solo en desktop -->
|
||||
<div class="hidden lg:block">
|
||||
<h3 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mt-6 mb-3">
|
||||
Agregar rápido
|
||||
</h3>
|
||||
|
||||
@ -640,45 +655,50 @@ onMounted(() => {
|
||||
: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"
|
||||
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 }}
|
||||
</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>
|
||||
|
||||
<!-- Limpiar todo -->
|
||||
<div class="pt-4 mt-4 border-t border-gray-200">
|
||||
<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"
|
||||
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" />
|
||||
Limpiar Todo
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- TextFormatter como toolbar estático -->
|
||||
<!-- Á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
|
||||
:element="textFormatterElement"
|
||||
:selected-element="selectedElement"
|
||||
:active-text-element="activeTextElement"
|
||||
:visible="showTextFormatter"
|
||||
@update="updateElement"
|
||||
@smart-align="handleSmartAlign"
|
||||
@ -707,6 +727,7 @@ onMounted(() => {
|
||||
@delete="deleteElement"
|
||||
@update="updateElement"
|
||||
@move="moveElement"
|
||||
@text-selected="handleTextSelected"
|
||||
/>
|
||||
</template>
|
||||
</PDFViewport>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user