ADD: Se arregló el toolbar para cambios al texto así como la selección de hoja
This commit is contained in:
Juan Felipe Zapata Moreno
parent
d6bc7d7914
commit
5e56c71bca
@ -30,19 +30,32 @@ const dragStart = ref({ x: 0, y: 0 });
|
||||
const resizeStart = ref({ x: 0, y: 0, width: 0, height: 0 });
|
||||
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 = {
|
||||
left: `${props.element.x}px`,
|
||||
top: `${props.element.y}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
|
||||
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) {
|
||||
const formatting = props.element.formatting;
|
||||
|
||||
// Aplicar tamaño de fuente con factor de corrección
|
||||
if (formatting.fontSize) {
|
||||
baseStyles.fontSize = `${formatting.fontSize}px`;
|
||||
}
|
||||
@ -50,6 +63,24 @@ const elementStyles = computed(() => {
|
||||
if (formatting.color) {
|
||||
baseStyles.color = formatting.color;
|
||||
}
|
||||
|
||||
// Alineación del contenedor en la página
|
||||
if (formatting.containerAlign) {
|
||||
const pageWidth = 794; // A4 width por defecto
|
||||
const elementWidth = props.element.width || 200;
|
||||
|
||||
switch (formatting.containerAlign) {
|
||||
case 'center':
|
||||
baseStyles.left = `${(pageWidth - elementWidth) / 2}px`;
|
||||
break;
|
||||
case 'right':
|
||||
baseStyles.left = `${pageWidth - elementWidth - 50}px`; // 50px margen
|
||||
break;
|
||||
case 'left':
|
||||
default:
|
||||
baseStyles.left = `${props.element.x}px`;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return baseStyles;
|
||||
@ -106,6 +137,25 @@ const inputStyles = computed(() => {
|
||||
return styles;
|
||||
});
|
||||
|
||||
/** Propiedades computadas para posicionamiento dinámico */
|
||||
const controlsPosition = computed(() => {
|
||||
if (!props.isSelected || isEditing.value) return {};
|
||||
|
||||
// Si el elemento está muy cerca del borde superior (menos de 50px)
|
||||
const isNearTop = props.element.y < 50;
|
||||
|
||||
return {
|
||||
position: isNearTop ? 'bottom' : 'top',
|
||||
styles: isNearTop ? {
|
||||
top: '100%',
|
||||
marginTop: '8px'
|
||||
} : {
|
||||
bottom: '100%',
|
||||
marginBottom: '8px'
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
/** Watchers */
|
||||
watch(() => props.isSelected, (selected) => {
|
||||
if (selected && isEditing.value) {
|
||||
@ -356,6 +406,44 @@ const getMaxWidth = () => {
|
||||
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
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const updateSmartAlign = (align) => {
|
||||
const pageWidth = 794; // Obtener dinámicamente del viewport
|
||||
const elementWidth = props.element.width || 200;
|
||||
let newX = props.element.x;
|
||||
|
||||
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
|
||||
}
|
||||
|
||||
emit('update', {
|
||||
id: props.element.id,
|
||||
x: newX,
|
||||
formatting: {
|
||||
...props.element.formatting,
|
||||
textAlign: align
|
||||
}
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -386,14 +474,21 @@ const getMaxHeight = () => {
|
||||
class="hidden"
|
||||
/>
|
||||
|
||||
<!-- Elemento de Texto con formato aplicado -->
|
||||
<!-- 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="textContainerClasses"
|
||||
:style="{
|
||||
fontSize: element.formatting?.fontSize ? `${element.formatting.fontSize}px` : '14px',
|
||||
color: element.formatting?.color || '#374151'
|
||||
color: element.formatting?.color || '#374151',
|
||||
fontFamily: 'Helvetica, Arial, sans-serif',
|
||||
lineHeight: '1.2',
|
||||
letterSpacing: 'normal',
|
||||
// Simular exactamente como se verá en el PDF
|
||||
textRendering: 'geometricPrecision',
|
||||
fontSmooth: 'always',
|
||||
WebkitFontSmoothing: 'antialiased'
|
||||
}"
|
||||
>
|
||||
<input
|
||||
@ -404,7 +499,12 @@ const getMaxHeight = () => {
|
||||
@keydown="handleKeydown"
|
||||
class="w-full bg-transparent outline-none cursor-text"
|
||||
:class="inputClasses"
|
||||
:style="inputStyles"
|
||||
:style="{
|
||||
...inputStyles,
|
||||
fontFamily: 'Helvetica, Arial, sans-serif',
|
||||
lineHeight: '1.2',
|
||||
letterSpacing: 'normal'
|
||||
}"
|
||||
@mousedown.stop
|
||||
/>
|
||||
<span
|
||||
@ -413,14 +513,17 @@ const getMaxHeight = () => {
|
||||
:class="textContainerClasses"
|
||||
:style="{
|
||||
fontSize: element.formatting?.fontSize ? `${element.formatting.fontSize}px` : '14px',
|
||||
color: element.formatting?.color || '#374151'
|
||||
color: element.formatting?.color || '#374151',
|
||||
fontFamily: 'Helvetica, Arial, sans-serif',
|
||||
lineHeight: '1.2',
|
||||
letterSpacing: 'normal'
|
||||
}"
|
||||
>
|
||||
{{ element.content || 'Nuevo texto' }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Elemento de Imagen (sin cambios) -->
|
||||
<!-- 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"
|
||||
@ -439,7 +542,7 @@ const getMaxHeight = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Elemento de Tabla (sin cambios en esta parte) -->
|
||||
<!-- Elemento de Tabla -->
|
||||
<div
|
||||
v-else-if="element.type === 'table'"
|
||||
class="w-full h-full bg-white rounded border overflow-hidden"
|
||||
@ -497,93 +600,95 @@ const getMaxHeight = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Controles del elemento con z-index más alto -->
|
||||
<!-- Controles del elemento -->
|
||||
<div
|
||||
v-if="isSelected && !isEditing"
|
||||
class="absolute -top-8 right-0 flex gap-1 opacity-100 transition-opacity z-[60]"
|
||||
ref="controlsRef"
|
||||
class="absolute right-0 flex gap-1 opacity-100 transition-opacity z-[60]"
|
||||
:style="controlsPosition.styles"
|
||||
>
|
||||
<!-- Indicador de tamaño -->
|
||||
<div class="px-2 py-1 bg-gray-800 text-white text-xs rounded shadow-sm pointer-events-none">
|
||||
{{ Math.round(element.width || 200) }} × {{ Math.round(element.height || 40) }}
|
||||
</div>
|
||||
<!-- Flecha indicadora cuando está abajo -->
|
||||
<div
|
||||
v-if="controlsPosition.position === 'bottom'"
|
||||
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) -->
|
||||
<button
|
||||
v-if="element.type === 'image'"
|
||||
@click.stop="() => fileInput.click()"
|
||||
class="w-6 h-6 bg-blue-500 hover:bg-blue-600 text-white rounded text-xs flex items-center justify-center transition-colors shadow-sm"
|
||||
class="w-7 h-7 bg-blue-500 hover:bg-blue-600 text-white rounded-md text-xs flex items-center justify-center transition-colors shadow-md"
|
||||
title="Cargar imagen"
|
||||
>
|
||||
<GoogleIcon name="upload" class="text-xs" />
|
||||
<GoogleIcon name="upload" class="text-sm" />
|
||||
</button>
|
||||
|
||||
<!-- Botón eliminar -->
|
||||
<button
|
||||
@click.stop="handleDelete"
|
||||
class="w-6 h-6 bg-red-500 hover:bg-red-600 text-white rounded text-xs flex items-center justify-center transition-colors shadow-sm"
|
||||
title="Eliminar"
|
||||
class="w-7 h-7 bg-red-500 hover:bg-red-600 text-white rounded-md text-xs flex items-center justify-center transition-colors shadow-md"
|
||||
title="Eliminar elemento"
|
||||
>
|
||||
<GoogleIcon name="close" class="text-xs" />
|
||||
<GoogleIcon name="close" class="text-sm" />
|
||||
</button>
|
||||
|
||||
<!-- Flecha indicadora cuando está arriba -->
|
||||
<div
|
||||
v-if="controlsPosition.position === 'top'"
|
||||
class="absolute -bottom-2 right-2 w-0 h-0 border-l-4 border-r-4 border-t-4 border-l-transparent border-r-transparent border-t-gray-800"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<!-- Controles de redimensionamiento mejorados -->
|
||||
<!-- Controles de redimensionamiento -->
|
||||
<div v-if="isSelected && !isEditing" class="absolute inset-0 pointer-events-none z-[55]">
|
||||
<!-- Esquina inferior derecha - MÁS GRANDE Y VISIBLE -->
|
||||
<!-- Esquina inferior derecha -->
|
||||
<div
|
||||
@mousedown.stop="startResize"
|
||||
class="absolute -bottom-2 -right-2 w-4 h-4 bg-blue-500 border-2 border-white cursor-se-resize pointer-events-auto rounded-sm shadow-md hover:bg-blue-600 transition-all"
|
||||
class="absolute -bottom-2 -right-2 w-5 h-5 bg-blue-500 border-2 border-white cursor-se-resize pointer-events-auto rounded-md shadow-lg hover:bg-blue-600 hover:scale-110 transition-all"
|
||||
title="Redimensionar"
|
||||
>
|
||||
<div class="absolute inset-0.5 bg-white/30 rounded-sm"></div>
|
||||
<div class="absolute inset-1 border border-white/40 rounded-sm"></div>
|
||||
</div>
|
||||
|
||||
<!-- Lado derecho - MÁS VISIBLE -->
|
||||
<!-- Lado derecho -->
|
||||
<div
|
||||
@mousedown.stop="(event) => startResizeEdge(event, 'right')"
|
||||
class="absolute top-2 bottom-2 -right-1 w-2 bg-blue-500 cursor-e-resize pointer-events-auto rounded-sm shadow-sm hover:bg-blue-600 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"
|
||||
>
|
||||
<!-- Indicador visual en el centro -->
|
||||
<div class="absolute top-1/2 left-1/2 w-0.5 h-4 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 - MÁS VISIBLE -->
|
||||
<!-- Lado inferior -->
|
||||
<div
|
||||
@mousedown.stop="(event) => startResizeEdge(event, 'bottom')"
|
||||
class="absolute -bottom-1 left-2 right-2 h-2 bg-blue-500 cursor-s-resize pointer-events-auto rounded-sm shadow-sm hover:bg-blue-600 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"
|
||||
>
|
||||
<!-- Indicador visual en el centro -->
|
||||
<div class="absolute top-1/2 left-1/2 w-4 h-0.5 bg-white/60 -translate-x-1/2 -translate-y-1/2 rounded-full"></div>
|
||||
</div>
|
||||
|
||||
<!-- Esquinas adicionales para mejor UX -->
|
||||
<div
|
||||
@mousedown.stop="startResize"
|
||||
class="absolute -top-2 -left-2 w-4 h-4 bg-blue-500 border-2 border-white cursor-nw-resize pointer-events-auto rounded-sm shadow-md hover:bg-blue-600 transition-all"
|
||||
title="Redimensionar"
|
||||
>
|
||||
<div class="absolute inset-0.5 bg-white/30 rounded-sm"></div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
@mousedown.stop="startResize"
|
||||
class="absolute -top-2 -right-2 w-4 h-4 bg-blue-500 border-2 border-white cursor-ne-resize pointer-events-auto rounded-sm shadow-md hover:bg-blue-600 transition-all"
|
||||
title="Redimensionar"
|
||||
>
|
||||
<div class="absolute inset-0.5 bg-white/30 rounded-sm"></div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
@mousedown.stop="startResize"
|
||||
class="absolute -bottom-2 -left-2 w-4 h-4 bg-blue-500 border-2 border-white cursor-sw-resize pointer-events-auto rounded-sm shadow-md hover:bg-blue-600 transition-all"
|
||||
title="Redimensionar"
|
||||
>
|
||||
<div class="absolute inset-0.5 bg-white/30 rounded-sm"></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"
|
||||
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' }"
|
||||
>
|
||||
{{ element.type === 'text' ? 'Doble clic para editar texto' : 'Doble clic para editar código' }}
|
||||
{{ element.type === 'code' ? ' (Ctrl+Enter para guardar)' : '' }}
|
||||
</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"
|
||||
@ -599,7 +704,8 @@ const getMaxHeight = () => {
|
||||
<!-- Botón para terminar edición de tabla -->
|
||||
<div
|
||||
v-if="isEditing && element.type === 'table'"
|
||||
class="absolute -bottom-10 left-0 flex gap-2 z-[60]"
|
||||
class="absolute left-0 flex gap-2 z-[60]"
|
||||
:style="element.y < 100 ? { top: '100%', marginTop: '8px' } : { bottom: '100%', marginBottom: '8px' }"
|
||||
>
|
||||
<button
|
||||
@click="finishEditing"
|
||||
@ -618,29 +724,6 @@ const getMaxHeight = () => {
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* Estilos existentes sin cambios... */
|
||||
.resize-handle-corner {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.resize-handle-corner:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.resize-handle-edge {
|
||||
transition: all 0.2s ease;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.resize-handle-edge:hover {
|
||||
opacity: 1;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.group:hover .resize-handle-edge {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.select-none {
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
|
||||
@ -148,25 +148,26 @@ defineExpose({
|
||||
<button
|
||||
@click="setCurrentPage(Math.max(1, currentPage - 1))"
|
||||
:disabled="currentPage <= 1"
|
||||
class="p-1.5 text-gray-400 hover:text-gray-600 disabled:opacity-50 disabled:cursor-not-allowed dark:text-primary-dt/70 dark:hover:text-primary-dt rounded hover:bg-gray-100 dark:hover:bg-primary/10"
|
||||
class="p-2 text-gray-400 hover:text-gray-600 disabled:opacity-50 disabled:cursor-not-allowed dark:text-primary-dt/70 dark:hover:text-primary-dt rounded-md hover:bg-gray-100 dark:hover:bg-primary/10 transition-colors"
|
||||
title="Página anterior"
|
||||
>
|
||||
<GoogleIcon name="keyboard_arrow_left" class="text-lg" />
|
||||
<GoogleIcon name="keyboard_arrow_left" class="text-xl" />
|
||||
</button>
|
||||
|
||||
<button
|
||||
@click="handleNextPage"
|
||||
:disabled="isExporting"
|
||||
class="p-1.5 text-gray-400 hover:text-gray-600 disabled:opacity-50 disabled:cursor-not-allowed dark:text-primary-dt/70 dark:hover:text-primary-dt rounded hover:bg-gray-100 dark:hover:bg-primary/10 relative"
|
||||
class="p-2 text-gray-400 hover:text-gray-600 disabled:opacity-50 disabled:cursor-not-allowed dark:text-primary-dt/70 dark:hover:text-primary-dt rounded-md hover:bg-gray-100 dark:hover:bg-primary/10 relative transition-colors"
|
||||
:title="currentPage >= totalPages ? 'Crear nueva página' : 'Página siguiente'"
|
||||
>
|
||||
<GoogleIcon name="keyboard_arrow_right" class="text-lg" />
|
||||
<!-- Indicador solo cuando estamos en la última página -->
|
||||
<GoogleIcon
|
||||
<GoogleIcon name="keyboard_arrow_right" class="text-xl" />
|
||||
<!-- Indicador mejorado -->
|
||||
<div
|
||||
v-if="currentPage >= totalPages"
|
||||
name="add"
|
||||
class="absolute -top-1 -right-1 text-xs text-green-500 bg-white rounded-full"
|
||||
/>
|
||||
class="absolute -top-1 -right-1 w-3 h-3 bg-green-500 rounded-full flex items-center justify-center"
|
||||
>
|
||||
<GoogleIcon name="add" class="text-white text-xs" />
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -175,14 +176,15 @@ defineExpose({
|
||||
<!-- Selector de tamaño de página -->
|
||||
<PageSizeSelector v-model="pageSize" />
|
||||
|
||||
<span class="text-xs text-gray-500 dark:text-primary-dt/70 bg-gray-50 dark:bg-primary/10 px-2 py-1 rounded">
|
||||
{{ Math.round(ZOOM_LEVEL * 100) }}% • {{ currentPageSize.label }}
|
||||
<!-- Info de página -->
|
||||
<span class="text-xs text-gray-500 dark:text-primary-dt/70 bg-gray-50 dark:bg-primary/10 px-3 py-1.5 rounded-md border border-gray-200 dark:border-primary/20">
|
||||
{{ currentPageSize.label }}
|
||||
</span>
|
||||
|
||||
<button
|
||||
@click="addPage"
|
||||
:disabled="isExporting"
|
||||
class="flex items-center gap-1.5 px-3 py-1.5 text-sm bg-blue-600 hover:bg-blue-700 text-white rounded-md transition-colors disabled:opacity-50 font-medium"
|
||||
class="flex items-center gap-2 px-4 py-2 text-sm bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors disabled:opacity-50 font-medium shadow-sm"
|
||||
>
|
||||
<GoogleIcon name="add" class="text-sm" />
|
||||
Nueva Página
|
||||
@ -190,16 +192,16 @@ defineExpose({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Viewport de páginas horizontal -->
|
||||
<!-- Resto del viewport -->
|
||||
<div
|
||||
ref="viewportRef"
|
||||
class="flex-1 overflow-auto"
|
||||
style="background-color: #f8fafc; background-image: radial-gradient(circle, #e2e8f0 1px, transparent 1px); background-size: 24px 24px;"
|
||||
style="background-color: #f8fafc; background-image: radial-gradient(circle, #e2e8f0 1px, transparent 1px); background-size: 20px 20px;"
|
||||
>
|
||||
<!-- Contenedor horizontal centrado -->
|
||||
<div class="flex items-center justify-center min-h-full p-6">
|
||||
<div class="flex items-center gap-8">
|
||||
<!-- Páginas -->
|
||||
<div class="flex items-center justify-center min-h-full p-8">
|
||||
<div class="flex items-center gap-10">
|
||||
<!-- Páginas MEJORADAS -->
|
||||
<div
|
||||
v-for="(page, pageIndex) in pages"
|
||||
:key="page.id"
|
||||
@ -207,38 +209,38 @@ defineExpose({
|
||||
class="relative group flex-shrink-0"
|
||||
>
|
||||
<!-- Header de página -->
|
||||
<div class="flex flex-col items-center mb-3">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-sm font-medium text-gray-600 dark:text-primary-dt/80">
|
||||
<div class="flex flex-col items-center mb-4">
|
||||
<div class="flex items-center gap-3 mb-1">
|
||||
<span class="text-sm font-semibold text-gray-700 dark:text-primary-dt/90 bg-white dark:bg-primary-d px-3 py-1 rounded-full shadow-sm border border-gray-200 dark:border-primary/20">
|
||||
Página {{ pageIndex + 1 }}
|
||||
</span>
|
||||
<button
|
||||
v-if="totalPages > 1"
|
||||
@click="deletePage(pageIndex)"
|
||||
:disabled="isExporting"
|
||||
class="opacity-0 group-hover:opacity-100 text-red-500 hover:text-red-700 disabled:opacity-50 p-1 rounded hover:bg-red-50 transition-all"
|
||||
class="opacity-0 group-hover:opacity-100 w-7 h-7 text-red-500 hover:text-white hover:bg-red-500 disabled:opacity-50 rounded-full flex items-center justify-center transition-all duration-200"
|
||||
title="Eliminar página"
|
||||
>
|
||||
<GoogleIcon name="delete" class="text-sm" />
|
||||
</button>
|
||||
</div>
|
||||
<span class="text-xs text-gray-400 dark:text-primary-dt/50">
|
||||
<span class="text-xs text-gray-500 dark:text-primary-dt/60">
|
||||
{{ currentPageSize.label }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Contenedor de página con sombra -->
|
||||
<!-- Contenedor de página -->
|
||||
<div class="relative">
|
||||
<!-- Sombra de página -->
|
||||
<div class="absolute top-2 left-2 w-full h-full bg-gray-400/30 rounded-lg"></div>
|
||||
<!-- Sombra mejorada -->
|
||||
<div class="absolute top-3 left-3 w-full h-full bg-gray-400/20 rounded-xl blur-sm"></div>
|
||||
|
||||
<!-- Página PDF -->
|
||||
<div
|
||||
class="pdf-page relative bg-white rounded-lg border border-gray-300 dark:border-primary/20 overflow-hidden"
|
||||
class="pdf-page relative bg-white rounded-xl border border-gray-300 dark:border-primary/30 overflow-hidden transition-all duration-300"
|
||||
:class="{
|
||||
'ring-2 ring-blue-500 ring-opacity-50 shadow-lg': currentPage === pageIndex + 1,
|
||||
'shadow-md hover:shadow-lg': currentPage !== pageIndex + 1,
|
||||
'opacity-50': isExporting
|
||||
'ring-3 ring-blue-500/50 shadow-2xl scale-105': currentPage === pageIndex + 1,
|
||||
'shadow-lg hover:shadow-xl hover:scale-102': currentPage !== pageIndex + 1,
|
||||
'opacity-60': isExporting
|
||||
}"
|
||||
:style="{
|
||||
width: `${scaledPageWidth}px`,
|
||||
@ -248,11 +250,11 @@ defineExpose({
|
||||
@dragover="handleDragOver"
|
||||
@click="(e) => handleClick(e, pageIndex)"
|
||||
>
|
||||
<!-- Área de contenido con márgenes visuales -->
|
||||
<!-- Área de contenido -->
|
||||
<div class="relative w-full h-full">
|
||||
<!-- Guías de margen -->
|
||||
<!-- Guías de margen SUTILES -->
|
||||
<div
|
||||
class="absolute border border-dashed border-blue-300/40 pointer-events-none"
|
||||
class="absolute border border-dashed border-blue-300/30 pointer-events-none rounded-lg"
|
||||
:style="{
|
||||
top: `${PAGE_MARGIN * ZOOM_LEVEL}px`,
|
||||
left: `${PAGE_MARGIN * ZOOM_LEVEL}px`,
|
||||
@ -261,7 +263,7 @@ defineExpose({
|
||||
}"
|
||||
></div>
|
||||
|
||||
<!-- Elementos de la página con transformación -->
|
||||
<!-- Elementos de la página -->
|
||||
<div
|
||||
class="absolute inset-0"
|
||||
:style="{
|
||||
@ -288,10 +290,10 @@ defineExpose({
|
||||
class="absolute inset-0 flex items-center justify-center pointer-events-none z-10"
|
||||
:style="{ transform: `scale(${1/ZOOM_LEVEL})` }"
|
||||
>
|
||||
<div class="text-center text-gray-400 dark:text-primary-dt/50">
|
||||
<GoogleIcon name="description" class="text-4xl mb-2" />
|
||||
<p class="text-sm font-medium">Página {{ pageIndex + 1 }}</p>
|
||||
<p class="text-xs">Arrastra elementos aquí</p>
|
||||
<div class="text-center text-gray-400 dark:text-primary-dt/50 p-6 bg-gray-50/80 dark:bg-primary/5 rounded-xl border-2 border-dashed border-gray-300/50 dark:border-primary/20">
|
||||
<GoogleIcon name="description" class="text-5xl mb-3 opacity-60" />
|
||||
<p class="text-base font-medium mb-1">Página {{ pageIndex + 1 }}</p>
|
||||
<p class="text-sm opacity-75">Arrastra elementos aquí</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -304,12 +306,18 @@ defineExpose({
|
||||
<!-- Overlay durante exportación -->
|
||||
<div
|
||||
v-if="isExporting"
|
||||
class="absolute inset-0 bg-white/90 dark:bg-primary-d/90 flex items-center justify-center z-50 backdrop-blur-sm"
|
||||
class="absolute inset-0 bg-white/95 dark:bg-primary-d/95 flex items-center justify-center z-50 backdrop-blur-sm"
|
||||
>
|
||||
<div class="text-center bg-white dark:bg-primary-d rounded-lg p-6 shadow-lg border border-gray-200 dark:border-primary/20">
|
||||
<GoogleIcon name="picture_as_pdf" class="text-5xl text-red-600 dark:text-red-400 animate-pulse mb-3" />
|
||||
<p class="text-lg font-semibold text-gray-900 dark:text-primary-dt mb-1">Generando PDF...</p>
|
||||
<p class="text-sm text-gray-500 dark:text-primary-dt/70">Procesando {{ totalPages }} página{{ totalPages !== 1 ? 's' : '' }}</p>
|
||||
<div class="text-center bg-white dark:bg-primary-d rounded-2xl p-8 shadow-2xl border border-gray-200 dark:border-primary/20 max-w-sm w-full mx-4">
|
||||
<div class="relative mb-4">
|
||||
<GoogleIcon name="picture_as_pdf" class="text-6xl text-red-600 dark:text-red-400 animate-pulse" />
|
||||
<div class="absolute inset-0 bg-red-100 dark:bg-red-900/20 rounded-full animate-ping opacity-20"></div>
|
||||
</div>
|
||||
<p class="text-xl font-semibold text-gray-900 dark:text-primary-dt mb-2">Generando PDF</p>
|
||||
<p class="text-sm text-gray-600 dark:text-primary-dt/70 mb-4">Procesando {{ totalPages }} página{{ totalPages !== 1 ? 's' : '' }}</p>
|
||||
<div class="w-full bg-gray-200 dark:bg-primary/20 rounded-full h-1">
|
||||
<div class="bg-red-600 dark:bg-red-400 h-1 rounded-full animate-pulse" style="width: 100%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -317,20 +325,16 @@ defineExpose({
|
||||
|
||||
<style scoped>
|
||||
.pdf-page {
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
.pdf-page:hover {
|
||||
transform: translateY(-2px);
|
||||
.scale-102 {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
.pdf-page.ring-2 {
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
|
||||
.overflow-auto {
|
||||
scroll-behavior: smooth;
|
||||
.overflow-auto::-webkit-scrollbar {
|
||||
height: 6px;
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.overflow-auto::-webkit-scrollbar-track {
|
||||
@ -339,15 +343,10 @@ defineExpose({
|
||||
|
||||
.overflow-auto::-webkit-scrollbar-thumb {
|
||||
background: #cbd5e1;
|
||||
border-radius: 4px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.overflow-auto::-webkit-scrollbar-thumb:hover {
|
||||
background: #94a3b8;
|
||||
}
|
||||
|
||||
.overflow-auto::-webkit-scrollbar {
|
||||
height: 8px;
|
||||
width: 8px;
|
||||
}
|
||||
</style>
|
||||
@ -69,13 +69,13 @@ const selectSize = (size) => {
|
||||
|
||||
<template>
|
||||
<div class="relative">
|
||||
<!-- Selector principal -->
|
||||
<!-- Selector principal MEJORADO -->
|
||||
<button
|
||||
@click="isOpen = !isOpen"
|
||||
class="flex items-center gap-2 px-3 py-2 text-sm bg-white dark:bg-primary-d border border-gray-200 dark:border-primary/20 rounded-md hover:bg-gray-50 dark:hover:bg-primary/10 transition-colors"
|
||||
class="flex items-center gap-2 px-3 py-2 text-sm bg-white dark:bg-primary-d border border-gray-200 dark:border-primary/20 rounded-lg hover:bg-gray-50 dark:hover:bg-primary/10 transition-colors shadow-sm"
|
||||
>
|
||||
<GoogleIcon name="aspect_ratio" class="text-gray-500 dark:text-primary-dt/70" />
|
||||
<span class="text-gray-700 dark:text-primary-dt">{{ selectedSize.name }}</span>
|
||||
<span class="text-gray-700 dark:text-primary-dt font-medium">{{ selectedSize.name }}</span>
|
||||
<GoogleIcon
|
||||
name="expand_more"
|
||||
class="text-gray-400 dark:text-primary-dt/50 transition-transform"
|
||||
@ -87,34 +87,34 @@ const selectSize = (size) => {
|
||||
<div
|
||||
v-if="isOpen"
|
||||
@click.away="isOpen = false"
|
||||
class="absolute top-full left-0 mt-1 w-72 bg-white dark:bg-primary-d border border-gray-200 dark:border-primary/20 rounded-lg shadow-lg z-50 py-2"
|
||||
class="absolute top-full left-0 mt-2 w-80 bg-white dark:bg-primary-d border border-gray-200 dark:border-primary/20 rounded-xl shadow-xl z-50 py-3"
|
||||
>
|
||||
<div class="px-3 py-2 text-xs font-semibold text-gray-500 dark:text-primary-dt/70 uppercase tracking-wider border-b border-gray-100 dark:border-primary/20">
|
||||
<div class="px-4 py-2 text-xs font-semibold text-gray-500 dark:text-primary-dt/70 uppercase tracking-wider border-b border-gray-100 dark:border-primary/20 mb-2">
|
||||
Tamaños de página
|
||||
</div>
|
||||
|
||||
<div class="max-h-64 overflow-y-auto">
|
||||
<div class="max-h-72 overflow-y-auto">
|
||||
<button
|
||||
v-for="size in pageSizes"
|
||||
:key="size.name"
|
||||
@click="selectSize(size)"
|
||||
class="w-full flex items-center gap-3 px-3 py-3 hover:bg-gray-50 dark:hover:bg-primary/10 transition-colors text-left"
|
||||
class="w-full flex items-center gap-4 px-4 py-3 hover:bg-gray-50 dark:hover:bg-primary/10 transition-colors text-left"
|
||||
:class="{
|
||||
'bg-blue-50 dark:bg-blue-900/20': selectedSize.name === size.name
|
||||
'bg-blue-50 dark:bg-blue-900/20 border-l-4 border-blue-500': selectedSize.name === size.name
|
||||
}"
|
||||
>
|
||||
<div class="flex-shrink-0">
|
||||
<div
|
||||
class="w-8 h-10 border border-gray-300 dark:border-primary/30 rounded-sm bg-white dark:bg-primary-d flex items-center justify-center"
|
||||
class="w-10 h-12 border-2 border-gray-300 dark:border-primary/30 rounded-md bg-white dark:bg-primary-d flex items-center justify-center shadow-sm"
|
||||
:class="{
|
||||
'border-blue-500 dark:border-blue-400': selectedSize.name === size.name
|
||||
'border-blue-500 dark:border-blue-400 shadow-blue-200': selectedSize.name === size.name
|
||||
}"
|
||||
>
|
||||
<div
|
||||
class="bg-gray-200 dark:bg-primary/20 rounded-sm"
|
||||
:style="{
|
||||
width: `${Math.min(20, (size.width / size.height) * 32)}px`,
|
||||
height: `${Math.min(32, (size.height / size.width) * 20)}px`
|
||||
width: `${Math.min(24, (size.width / size.height) * 36)}px`,
|
||||
height: `${Math.min(36, (size.height / size.width) * 24)}px`
|
||||
}"
|
||||
:class="{
|
||||
'bg-blue-200 dark:bg-blue-800': selectedSize.name === size.name
|
||||
@ -124,15 +124,17 @@ const selectSize = (size) => {
|
||||
</div>
|
||||
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="font-medium text-gray-900 dark:text-primary-dt">{{ size.label }}</div>
|
||||
<div class="text-xs text-gray-500 dark:text-primary-dt/70">{{ size.description }}</div>
|
||||
<div class="text-xs text-gray-400 dark:text-primary-dt/50 mt-1">
|
||||
{{ size.width }} x {{ size.height }} px
|
||||
<div class="font-semibold text-gray-900 dark:text-primary-dt text-base">{{ size.name }}</div>
|
||||
<div class="text-sm text-gray-600 dark:text-primary-dt/80">{{ size.label.split('(')[1]?.replace(')', '') || size.label }}</div>
|
||||
<div class="text-xs text-gray-500 dark:text-primary-dt/60 mt-1">
|
||||
{{ size.description }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="selectedSize.name === size.name" class="flex-shrink-0">
|
||||
<GoogleIcon name="check" class="text-blue-500 dark:text-blue-400" />
|
||||
<div class="w-6 h-6 bg-blue-500 rounded-full flex items-center justify-center">
|
||||
<GoogleIcon name="check" class="text-white text-sm" />
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -60,6 +60,26 @@ const updateFormatting = (key, value) => {
|
||||
});
|
||||
};
|
||||
|
||||
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
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/** Colores predefinidos */
|
||||
const predefinedColors = [
|
||||
'#000000', '#333333', '#666666', '#999999',
|
||||
|
||||
@ -56,6 +56,7 @@ const updateElement = (update) => {
|
||||
const element = allElements.value.find(el => el.id === update.id);
|
||||
if (element) {
|
||||
Object.assign(element, update);
|
||||
|
||||
// Si se actualiza el formato, actualizar la referencia
|
||||
if (update.formatting && textFormatterElement.value?.id === update.id) {
|
||||
textFormatterElement.value = { ...element };
|
||||
@ -63,10 +64,33 @@ const updateElement = (update) => {
|
||||
}
|
||||
};
|
||||
|
||||
const handleCanvasClick = (clickData) => {
|
||||
selectedElementId.value = null;
|
||||
showTextFormatter.value = false;
|
||||
textFormatterElement.value = null;
|
||||
const handleSmartAlign = (alignData) => {
|
||||
const element = allElements.value.find(el => el.id === alignData.id);
|
||||
if (element && element.type === 'text') {
|
||||
const pageWidth = currentPageSize.value.width;
|
||||
const elementWidth = element.width || 200;
|
||||
|
||||
let newX = element.x;
|
||||
switch (alignData.align) {
|
||||
case 'center':
|
||||
newX = (pageWidth - elementWidth) / 2;
|
||||
break;
|
||||
case 'right':
|
||||
newX = pageWidth - elementWidth - 50;
|
||||
break;
|
||||
case 'left':
|
||||
default:
|
||||
newX = 50;
|
||||
}
|
||||
|
||||
// Actualizar posición y formato
|
||||
Object.assign(element, {
|
||||
x: newX,
|
||||
formatting: alignData.formatting
|
||||
});
|
||||
|
||||
textFormatterElement.value = { ...element };
|
||||
}
|
||||
};
|
||||
|
||||
/** Tipos de elementos disponibles */
|
||||
@ -249,10 +273,10 @@ const exportPDF = async () => {
|
||||
|
||||
let currentPDFPage = pdfDoc.addPage([pageWidthPoints, pageHeightPoints]);
|
||||
let currentPageHeight = pageHeightPoints;
|
||||
let yOffset = 50; // Margen superior
|
||||
|
||||
// Obtener fuentes
|
||||
const helveticaFont = await pdfDoc.embedFont(StandardFonts.Helvetica);
|
||||
const helveticaBoldFont = await pdfDoc.embedFont(StandardFonts.HelveticaBold);
|
||||
const courierFont = await pdfDoc.embedFont(StandardFonts.Courier);
|
||||
|
||||
// Procesar páginas del maquetador
|
||||
@ -263,15 +287,14 @@ const exportPDF = async () => {
|
||||
if (pageIndex > 0) {
|
||||
currentPDFPage = pdfDoc.addPage([pageWidthPoints, pageHeightPoints]);
|
||||
currentPageHeight = pageHeightPoints;
|
||||
yOffset = 50;
|
||||
}
|
||||
|
||||
// Ordenar elementos de esta página por posición
|
||||
const sortedElements = [...page.elements].sort((a, b) => {
|
||||
if (Math.abs(a.y - b.y) < 20) {
|
||||
return a.x - b.x; // 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 de la página
|
||||
@ -281,11 +304,37 @@ const exportPDF = async () => {
|
||||
const scaleY = pageHeightPoints / currentPageSize.value.height;
|
||||
|
||||
const x = Math.max(50, element.x * scaleX);
|
||||
const y = currentPageHeight - (element.y * scaleY) - 50; // Margen superior
|
||||
const y = currentPageHeight - (element.y * scaleY) - 50;
|
||||
|
||||
switch (element.type) {
|
||||
case 'text':
|
||||
if (element.content) {
|
||||
// Obtener formato del elemento
|
||||
const formatting = element.formatting || {};
|
||||
const fontSize = formatting.fontSize || 12;
|
||||
const isBold = formatting.bold || false;
|
||||
const isItalic = formatting.italic || false;
|
||||
const textAlign = formatting.textAlign || 'left';
|
||||
|
||||
// Convertir color hexadecimal a RGB
|
||||
let textColor = rgb(0, 0, 0); // Negro por defecto
|
||||
if (formatting.color) {
|
||||
const hex = formatting.color.replace('#', '');
|
||||
const r = parseInt(hex.substr(0, 2), 16) / 255;
|
||||
const g = parseInt(hex.substr(2, 2), 16) / 255;
|
||||
const b = parseInt(hex.substr(4, 2), 16) / 255;
|
||||
textColor = rgb(r, g, b);
|
||||
}
|
||||
|
||||
// Seleccionar fuente
|
||||
let font = helveticaFont;
|
||||
if (isBold && !isItalic) {
|
||||
font = helveticaBoldFont;
|
||||
} else if (isBold && isItalic) {
|
||||
// Para negrita + cursiva, usar negrita (limitación de PDF-lib)
|
||||
font = helveticaBoldFont;
|
||||
}
|
||||
|
||||
// Dividir texto largo en líneas
|
||||
const words = element.content.split(' ');
|
||||
const lines = [];
|
||||
@ -294,7 +343,7 @@ const exportPDF = async () => {
|
||||
|
||||
for (const word of words) {
|
||||
const testLine = currentLine + (currentLine ? ' ' : '') + word;
|
||||
const testWidth = helveticaFont.widthOfTextAtSize(testLine, 12);
|
||||
const testWidth = font.widthOfTextAtSize(testLine, fontSize);
|
||||
|
||||
if (testWidth <= maxWidth) {
|
||||
currentLine = testLine;
|
||||
@ -305,14 +354,23 @@ const exportPDF = async () => {
|
||||
}
|
||||
if (currentLine) lines.push(currentLine);
|
||||
|
||||
// Dibujar cada línea
|
||||
// Calcular posición X según alineación
|
||||
lines.forEach((line, index) => {
|
||||
let lineX = x;
|
||||
const lineWidth = font.widthOfTextAtSize(line, fontSize);
|
||||
|
||||
if (textAlign === 'center') {
|
||||
lineX = x + (maxWidth - lineWidth) / 2;
|
||||
} else if (textAlign === 'right') {
|
||||
lineX = x + maxWidth - lineWidth;
|
||||
}
|
||||
|
||||
currentPDFPage.drawText(line, {
|
||||
x: x,
|
||||
y: y - (index * 15),
|
||||
size: 12,
|
||||
font: helveticaFont,
|
||||
color: rgb(0, 0, 0),
|
||||
x: Math.max(50, lineX),
|
||||
y: y - (index * (fontSize + 3)),
|
||||
size: fontSize,
|
||||
font: font,
|
||||
color: textColor,
|
||||
});
|
||||
});
|
||||
}
|
||||
@ -321,7 +379,6 @@ const exportPDF = async () => {
|
||||
case 'image':
|
||||
if (element.content && element.content.startsWith('data:image')) {
|
||||
try {
|
||||
// Convertir base64 a bytes
|
||||
const base64Data = element.content.split(',')[1];
|
||||
const imageBytes = Uint8Array.from(
|
||||
atob(base64Data),
|
||||
@ -336,7 +393,6 @@ const exportPDF = async () => {
|
||||
}
|
||||
|
||||
if (image) {
|
||||
// Calcular dimensiones manteniendo proporción y escala
|
||||
const maxWidth = Math.min(pageWidthPoints - 100, (element.width || 200) * scaleX);
|
||||
const maxHeight = Math.min(300, (element.height || 150) * scaleY);
|
||||
|
||||
@ -358,7 +414,7 @@ const exportPDF = async () => {
|
||||
}
|
||||
} catch (imageError) {
|
||||
console.warn('Error al procesar imagen:', imageError);
|
||||
// Dibujar placeholder para imagen
|
||||
// Placeholder para imagen con error
|
||||
currentPDFPage.drawRectangle({
|
||||
x: x,
|
||||
y: y - 60,
|
||||
@ -406,7 +462,6 @@ const exportPDF = async () => {
|
||||
const tableWidth = tableData[0].length * cellWidth;
|
||||
const tableHeight = tableData.length * cellHeight;
|
||||
|
||||
// Dibujar bordes de la tabla
|
||||
currentPDFPage.drawRectangle({
|
||||
x: x,
|
||||
y: y - tableHeight,
|
||||
@ -416,13 +471,11 @@ const exportPDF = async () => {
|
||||
borderWidth: 1,
|
||||
});
|
||||
|
||||
// Dibujar contenido de las celdas
|
||||
tableData.forEach((row, rowIndex) => {
|
||||
row.forEach((cell, colIndex) => {
|
||||
const cellX = x + (colIndex * cellWidth);
|
||||
const cellY = y - (rowIndex * cellHeight) - 15;
|
||||
|
||||
// Dibujar borde de celda
|
||||
currentPDFPage.drawRectangle({
|
||||
x: cellX,
|
||||
y: y - ((rowIndex + 1) * cellHeight),
|
||||
@ -432,7 +485,6 @@ const exportPDF = async () => {
|
||||
borderWidth: 0.5,
|
||||
});
|
||||
|
||||
// Dibujar texto de la celda (truncar si es muy largo)
|
||||
const maxChars = Math.floor(cellWidth / 8);
|
||||
const displayText = cell.length > maxChars ?
|
||||
cell.substring(0, maxChars - 3) + '...' : cell;
|
||||
@ -629,6 +681,7 @@ onMounted(() => {
|
||||
:element="textFormatterElement"
|
||||
:visible="showTextFormatter"
|
||||
@update="updateElement"
|
||||
@smart-align="handleSmartAlign"
|
||||
/>
|
||||
|
||||
<!-- PDFViewport -->
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user