ADD: Tamaño de páginas, Toolbar diseño de texto
This commit is contained in:
Juan Felipe Zapata Moreno
parent
38f46cef84
commit
d6bc7d7914
@ -31,12 +31,80 @@ const resizeStart = ref({ x: 0, y: 0, width: 0, height: 0 });
|
|||||||
const fileInput = ref(null);
|
const fileInput = ref(null);
|
||||||
|
|
||||||
/** Propiedades computadas */
|
/** Propiedades computadas */
|
||||||
const elementStyles = computed(() => ({
|
const elementStyles = computed(() => {
|
||||||
left: `${props.element.x}px`,
|
const baseStyles = {
|
||||||
top: `${props.element.y}px`,
|
left: `${props.element.x}px`,
|
||||||
width: `${props.element.width || 200}px`,
|
top: `${props.element.y}px`,
|
||||||
height: `${props.element.height || 40}px`
|
width: `${props.element.width || 200}px`,
|
||||||
}));
|
height: `${props.element.height || 40}px`
|
||||||
|
};
|
||||||
|
|
||||||
|
// Aplicar estilos de formato para elementos de texto
|
||||||
|
if (props.element.type === 'text' && props.element.formatting) {
|
||||||
|
const formatting = props.element.formatting;
|
||||||
|
|
||||||
|
if (formatting.fontSize) {
|
||||||
|
baseStyles.fontSize = `${formatting.fontSize}px`;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (formatting.color) {
|
||||||
|
baseStyles.color = formatting.color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return baseStyles;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Propiedades computadas para clases CSS dinámicas
|
||||||
|
const textContainerClasses = computed(() => {
|
||||||
|
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'
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
const inputClasses = computed(() => {
|
||||||
|
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'
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
const inputStyles = computed(() => {
|
||||||
|
if (props.element.type !== 'text') return {};
|
||||||
|
|
||||||
|
const formatting = props.element.formatting || {};
|
||||||
|
const styles = {};
|
||||||
|
|
||||||
|
if (formatting.fontSize) {
|
||||||
|
styles.fontSize = `${formatting.fontSize}px`;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (formatting.color) {
|
||||||
|
styles.color = formatting.color;
|
||||||
|
}
|
||||||
|
|
||||||
|
return styles;
|
||||||
|
});
|
||||||
|
|
||||||
/** Watchers */
|
/** Watchers */
|
||||||
watch(() => props.isSelected, (selected) => {
|
watch(() => props.isSelected, (selected) => {
|
||||||
@ -304,7 +372,9 @@ const getMaxHeight = () => {
|
|||||||
'cursor-text': isEditing && (element.type === 'text' || element.type === 'code'),
|
'cursor-text': isEditing && (element.type === 'text' || element.type === 'code'),
|
||||||
'cursor-se-resize': isResizing && resizeDirection === 'corner',
|
'cursor-se-resize': isResizing && resizeDirection === 'corner',
|
||||||
'cursor-e-resize': isResizing && resizeDirection === 'right',
|
'cursor-e-resize': isResizing && resizeDirection === 'right',
|
||||||
'cursor-s-resize': isResizing && resizeDirection === 'bottom'
|
'cursor-s-resize': isResizing && resizeDirection === 'bottom',
|
||||||
|
'z-50': isSelected,
|
||||||
|
'z-10': !isSelected
|
||||||
}"
|
}"
|
||||||
>
|
>
|
||||||
<!-- Input oculto para selección de archivos -->
|
<!-- Input oculto para selección de archivos -->
|
||||||
@ -316,10 +386,15 @@ const getMaxHeight = () => {
|
|||||||
class="hidden"
|
class="hidden"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<!-- Elemento de Texto -->
|
<!-- Elemento de Texto con formato aplicado -->
|
||||||
<div
|
<div
|
||||||
v-if="element.type === 'text'"
|
v-if="element.type === 'text'"
|
||||||
class="w-full h-full flex items-center px-3 py-2 bg-blue-100 rounded border border-blue-300 text-blue-800 text-sm font-medium dark:bg-blue-900/30 dark:border-blue-600 dark:text-blue-300"
|
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'
|
||||||
|
}"
|
||||||
>
|
>
|
||||||
<input
|
<input
|
||||||
v-if="isEditing"
|
v-if="isEditing"
|
||||||
@ -328,14 +403,24 @@ const getMaxHeight = () => {
|
|||||||
@blur="finishEditing"
|
@blur="finishEditing"
|
||||||
@keydown="handleKeydown"
|
@keydown="handleKeydown"
|
||||||
class="w-full bg-transparent outline-none cursor-text"
|
class="w-full bg-transparent outline-none cursor-text"
|
||||||
|
:class="inputClasses"
|
||||||
|
:style="inputStyles"
|
||||||
@mousedown.stop
|
@mousedown.stop
|
||||||
/>
|
/>
|
||||||
<span v-else class="truncate pointer-events-none">
|
<span
|
||||||
|
v-else
|
||||||
|
class="truncate pointer-events-none w-full"
|
||||||
|
:class="textContainerClasses"
|
||||||
|
:style="{
|
||||||
|
fontSize: element.formatting?.fontSize ? `${element.formatting.fontSize}px` : '14px',
|
||||||
|
color: element.formatting?.color || '#374151'
|
||||||
|
}"
|
||||||
|
>
|
||||||
{{ element.content || 'Nuevo texto' }}
|
{{ element.content || 'Nuevo texto' }}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Elemento de Imagen -->
|
<!-- Elemento de Imagen (sin cambios) -->
|
||||||
<div
|
<div
|
||||||
v-else-if="element.type === 'image'"
|
v-else-if="element.type === 'image'"
|
||||||
class="w-full h-full flex items-center justify-center bg-gray-100 rounded border border-gray-300 dark:bg-primary/10 dark:border-primary/20 overflow-hidden"
|
class="w-full h-full flex items-center justify-center bg-gray-100 rounded border border-gray-300 dark:bg-primary/10 dark:border-primary/20 overflow-hidden"
|
||||||
@ -354,34 +439,7 @@ const getMaxHeight = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Elemento de Código -->
|
<!-- Elemento de Tabla (sin cambios en esta parte) -->
|
||||||
<div
|
|
||||||
v-else-if="element.type === 'code'"
|
|
||||||
class="w-full h-full bg-gray-900 rounded border overflow-hidden"
|
|
||||||
>
|
|
||||||
<div class="w-full h-6 bg-gray-800 flex items-center px-2 text-xs text-gray-400 border-b border-gray-700">
|
|
||||||
<div class="flex gap-1">
|
|
||||||
<div class="w-2 h-2 bg-red-500 rounded-full"></div>
|
|
||||||
<div class="w-2 h-2 bg-yellow-500 rounded-full"></div>
|
|
||||||
<div class="w-2 h-2 bg-green-500 rounded-full"></div>
|
|
||||||
</div>
|
|
||||||
<span class="ml-2">{{ element.fileName || 'script.js' }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="p-2 h-[calc(100%-24px)]">
|
|
||||||
<textarea
|
|
||||||
v-if="isEditing"
|
|
||||||
ref="editTextarea"
|
|
||||||
v-model="editValue"
|
|
||||||
@blur="finishEditing"
|
|
||||||
@keydown="handleKeydown"
|
|
||||||
class="w-full h-full bg-transparent text-green-400 text-xs font-mono outline-none resize-none cursor-text"
|
|
||||||
@mousedown.stop
|
|
||||||
/>
|
|
||||||
<pre v-else class="text-green-400 text-xs font-mono overflow-auto h-full pointer-events-none whitespace-pre-wrap">{{ element.content || 'console.log("Hola mundo");' }}</pre>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Elemento de Tabla -->
|
|
||||||
<div
|
<div
|
||||||
v-else-if="element.type === 'table'"
|
v-else-if="element.type === 'table'"
|
||||||
class="w-full h-full bg-white rounded border overflow-hidden"
|
class="w-full h-full bg-white rounded border overflow-hidden"
|
||||||
@ -439,10 +497,10 @@ const getMaxHeight = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Controles del elemento -->
|
<!-- Controles del elemento con z-index más alto -->
|
||||||
<div
|
<div
|
||||||
v-if="isSelected && !isEditing"
|
v-if="isSelected && !isEditing"
|
||||||
class="absolute -top-8 right-0 flex gap-1 opacity-100 transition-opacity z-10"
|
class="absolute -top-8 right-0 flex gap-1 opacity-100 transition-opacity z-[60]"
|
||||||
>
|
>
|
||||||
<!-- Indicador de tamaño -->
|
<!-- Indicador de tamaño -->
|
||||||
<div class="px-2 py-1 bg-gray-800 text-white text-xs rounded shadow-sm pointer-events-none">
|
<div class="px-2 py-1 bg-gray-800 text-white text-xs rounded shadow-sm pointer-events-none">
|
||||||
@ -470,31 +528,60 @@ const getMaxHeight = () => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Controles de redimensionamiento mejorados -->
|
<!-- Controles de redimensionamiento mejorados -->
|
||||||
<div v-if="isSelected && !isEditing" class="absolute inset-0 pointer-events-none">
|
<div v-if="isSelected && !isEditing" class="absolute inset-0 pointer-events-none z-[55]">
|
||||||
<!-- Esquina inferior derecha -->
|
<!-- Esquina inferior derecha - MÁS GRANDE Y VISIBLE -->
|
||||||
<div
|
<div
|
||||||
@mousedown.stop="startResize"
|
@mousedown.stop="startResize"
|
||||||
class="absolute -bottom-1 -right-1 w-2 h-2 bg-blue-500 border border-white cursor-se-resize pointer-events-auto rounded-sm resize-handle-corner"
|
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"
|
||||||
title="Redimensionar"
|
title="Redimensionar"
|
||||||
></div>
|
>
|
||||||
|
<div class="absolute inset-0.5 bg-white/30 rounded-sm"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Lado derecho -->
|
<!-- Lado derecho - MÁS VISIBLE -->
|
||||||
<div
|
<div
|
||||||
@mousedown.stop="(event) => startResizeEdge(event, 'right')"
|
@mousedown.stop="(event) => startResizeEdge(event, 'right')"
|
||||||
class="absolute top-1 bottom-1 -right-0.5 w-1 bg-blue-500 opacity-0 cursor-e-resize pointer-events-auto resize-handle-edge"
|
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"
|
||||||
title="Redimensionar ancho"
|
title="Redimensionar ancho"
|
||||||
></div>
|
>
|
||||||
|
<!-- 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>
|
||||||
|
|
||||||
<!-- Lado inferior -->
|
<!-- Lado inferior - MÁS VISIBLE -->
|
||||||
<div
|
<div
|
||||||
@mousedown.stop="(event) => startResizeEdge(event, 'bottom')"
|
@mousedown.stop="(event) => startResizeEdge(event, 'bottom')"
|
||||||
class="absolute -bottom-0.5 left-1 right-1 h-1 bg-blue-500 opacity-0 cursor-s-resize pointer-events-auto resize-handle-edge"
|
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"
|
||||||
title="Redimensionar alto"
|
title="Redimensionar alto"
|
||||||
></div>
|
>
|
||||||
|
<!-- 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>
|
||||||
|
|
||||||
<!-- Puntos de agarre visuales en los bordes (solo visuales) -->
|
<!-- Esquinas adicionales para mejor UX -->
|
||||||
<div class="absolute top-1/2 -right-0.5 w-1 h-6 -translate-y-1/2 bg-blue-500 opacity-30 rounded-full pointer-events-none resize-handle-visual"></div>
|
<div
|
||||||
<div class="absolute -bottom-0.5 left-1/2 w-6 h-1 -translate-x-1/2 bg-blue-500 opacity-30 rounded-full pointer-events-none resize-handle-visual"></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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Indicador de arrastre -->
|
<!-- Indicador de arrastre -->
|
||||||
@ -509,98 +596,55 @@ const getMaxHeight = () => {
|
|||||||
class="absolute inset-0 bg-green-500 opacity-20 rounded pointer-events-none"
|
class="absolute inset-0 bg-green-500 opacity-20 rounded pointer-events-none"
|
||||||
></div>
|
></div>
|
||||||
|
|
||||||
<!-- Tooltip con instrucciones -->
|
|
||||||
<div
|
|
||||||
v-if="isSelected && !element.content && element.type !== 'image' && !isResizing"
|
|
||||||
class="absolute -bottom-8 left-0 bg-gray-900 text-white text-xs px-2 py-1 rounded whitespace-nowrap z-10"
|
|
||||||
>
|
|
||||||
{{ element.type === 'text' ? 'Doble clic para editar texto' : 'Doble clic para editar código' }}
|
|
||||||
{{ element.type === 'code' ? ' (Ctrl+Enter para guardar)' : '' }}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Tooltip con instrucciones de redimensionamiento -->
|
|
||||||
<div
|
|
||||||
v-if="isSelected && !isEditing && element.type === 'image' && !element.content && !isResizing"
|
|
||||||
class="absolute -bottom-8 left-0 bg-gray-900 text-white text-xs px-2 py-1 rounded whitespace-nowrap z-10"
|
|
||||||
>
|
|
||||||
Arrastra las esquinas para redimensionar
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Botón para terminar edición de tabla -->
|
<!-- Botón para terminar edición de tabla -->
|
||||||
<div
|
<div
|
||||||
v-if="isEditing && element.type === 'table'"
|
v-if="isEditing && element.type === 'table'"
|
||||||
class="absolute -bottom-10 left-0 flex gap-2 z-20"
|
class="absolute -bottom-10 left-0 flex gap-2 z-[60]"
|
||||||
>
|
>
|
||||||
<button
|
<button
|
||||||
@click="finishEditing"
|
@click="finishEditing"
|
||||||
class="px-3 py-1 bg-green-600 hover:bg-green-700 text-white text-xs rounded shadow-sm transition-colors"
|
class="px-3 py-1 bg-green-600 hover:bg-green-700 text-white text-xs rounded shadow-sm transition-colors"
|
||||||
>
|
>
|
||||||
Guardar (Ctrl+Enter)
|
Guardar
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
@click="() => { isEditing = false; editValue = JSON.parse(JSON.stringify(element.content)); }"
|
@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"
|
class="px-3 py-1 bg-gray-600 hover:bg-gray-700 text-white text-xs rounded shadow-sm transition-colors"
|
||||||
>
|
>
|
||||||
Cancelar (Esc)
|
Cancelar
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
/* Estilos para los controles de redimensionamiento mejorados */
|
/* Estilos existentes sin cambios... */
|
||||||
.resize-handle-corner {
|
.resize-handle-corner {
|
||||||
transition: all 0.2s ease;
|
transition: all 0.2s ease;
|
||||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.resize-handle-corner:hover {
|
.resize-handle-corner:hover {
|
||||||
background-color: #2563eb;
|
|
||||||
transform: scale(1.1);
|
transform: scale(1.1);
|
||||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.resize-handle-edge {
|
.resize-handle-edge {
|
||||||
transition: all 0.2s ease;
|
transition: all 0.2s ease;
|
||||||
|
opacity: 0.7;
|
||||||
}
|
}
|
||||||
|
|
||||||
.resize-handle-edge:hover {
|
.resize-handle-edge:hover {
|
||||||
opacity: 0.7 !important;
|
opacity: 1;
|
||||||
background-color: #2563eb;
|
transform: scale(1.05);
|
||||||
}
|
|
||||||
|
|
||||||
.resize-handle-visual {
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Efecto hover para los indicadores visuales */
|
|
||||||
.group:hover .resize-handle-visual {
|
|
||||||
opacity: 0.6 !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.group:hover .resize-handle-edge {
|
.group:hover .resize-handle-edge {
|
||||||
opacity: 0.4 !important;
|
opacity: 0.8;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Prevenir selección de texto durante el redimensionamiento */
|
|
||||||
.select-none {
|
.select-none {
|
||||||
user-select: none;
|
user-select: none;
|
||||||
-webkit-user-select: none;
|
-webkit-user-select: none;
|
||||||
-moz-user-select: none;
|
-moz-user-select: none;
|
||||||
-ms-user-select: none;
|
-ms-user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Animación suave para los controles */
|
|
||||||
@keyframes pulse-resize {
|
|
||||||
0%, 100% {
|
|
||||||
opacity: 0.3;
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.group:hover .resize-handle-visual {
|
|
||||||
animation: pulse-resize 2s infinite;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
353
src/components/Holos/PDF/PDFViewport.vue
Normal file
353
src/components/Holos/PDF/PDFViewport.vue
Normal file
@ -0,0 +1,353 @@
|
|||||||
|
<script setup>
|
||||||
|
import { ref, computed, nextTick, watch } from 'vue';
|
||||||
|
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||||
|
import PageSizeSelector from '@Holos/PDF/PageSizeSelector.vue';
|
||||||
|
|
||||||
|
/** Propiedades */
|
||||||
|
const props = defineProps({
|
||||||
|
pages: {
|
||||||
|
type: Array,
|
||||||
|
default: () => [{ id: 1, elements: [] }]
|
||||||
|
},
|
||||||
|
selectedElementId: String,
|
||||||
|
isExporting: Boolean
|
||||||
|
});
|
||||||
|
|
||||||
|
/** Eventos */
|
||||||
|
const emit = defineEmits(['drop', 'dragover', 'click', 'add-page', 'delete-page', 'page-change', 'page-size-change']);
|
||||||
|
|
||||||
|
/** Referencias */
|
||||||
|
const viewportRef = ref(null);
|
||||||
|
const currentPage = ref(1);
|
||||||
|
const pageSize = ref('A4');
|
||||||
|
|
||||||
|
/** Tamaños de página */
|
||||||
|
const pageSizes = {
|
||||||
|
'A4': { width: 794, height: 1123, label: '210 × 297 mm' },
|
||||||
|
'A3': { width: 1123, height: 1587, label: '297 × 420 mm' },
|
||||||
|
'Letter': { width: 816, height: 1056, label: '216 × 279 mm' },
|
||||||
|
'Legal': { width: 816, height: 1344, label: '216 × 356 mm' },
|
||||||
|
'Tabloid': { width: 1056, height: 1632, label: '279 × 432 mm' }
|
||||||
|
};
|
||||||
|
|
||||||
|
/** Constantes de diseño ajustadas */
|
||||||
|
const PAGE_MARGIN = 50;
|
||||||
|
const ZOOM_LEVEL = 0.65;
|
||||||
|
|
||||||
|
/** Propiedades computadas */
|
||||||
|
const currentPageSize = computed(() => pageSizes[pageSize.value]);
|
||||||
|
const PAGE_WIDTH = computed(() => currentPageSize.value.width);
|
||||||
|
const PAGE_HEIGHT = computed(() => currentPageSize.value.height);
|
||||||
|
const scaledPageWidth = computed(() => PAGE_WIDTH.value * ZOOM_LEVEL);
|
||||||
|
const scaledPageHeight = computed(() => PAGE_HEIGHT.value * ZOOM_LEVEL);
|
||||||
|
const totalPages = computed(() => props.pages.length);
|
||||||
|
|
||||||
|
/** Watchers */
|
||||||
|
watch(pageSize, (newSize) => {
|
||||||
|
emit('page-size-change', {
|
||||||
|
size: newSize,
|
||||||
|
dimensions: pageSizes[newSize]
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
/** Métodos */
|
||||||
|
const handleDrop = (event, pageIndex) => {
|
||||||
|
event.preventDefault();
|
||||||
|
|
||||||
|
const pageElement = event.currentTarget;
|
||||||
|
const rect = pageElement.getBoundingClientRect();
|
||||||
|
|
||||||
|
const relativeX = (event.clientX - rect.left) / ZOOM_LEVEL;
|
||||||
|
const relativeY = (event.clientY - rect.top) / ZOOM_LEVEL;
|
||||||
|
|
||||||
|
emit('drop', {
|
||||||
|
originalEvent: event,
|
||||||
|
pageIndex,
|
||||||
|
x: Math.max(0, Math.min(PAGE_WIDTH.value, relativeX)),
|
||||||
|
y: Math.max(0, Math.min(PAGE_HEIGHT.value, relativeY))
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDragOver = (event) => {
|
||||||
|
event.preventDefault();
|
||||||
|
emit('dragover', event);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleClick = (event, pageIndex) => {
|
||||||
|
if (event.target.classList.contains('pdf-page')) {
|
||||||
|
emit('click', { originalEvent: event, pageIndex });
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleNextPage = () => {
|
||||||
|
if (currentPage.value >= totalPages.value) {
|
||||||
|
addPage();
|
||||||
|
} else {
|
||||||
|
setCurrentPage(currentPage.value + 1);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const addPage = () => {
|
||||||
|
emit('add-page');
|
||||||
|
// Solo cambiar a la nueva página cuando se agrega una
|
||||||
|
nextTick(() => {
|
||||||
|
const newPageNumber = totalPages.value + 1;
|
||||||
|
setCurrentPage(newPageNumber);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const deletePage = (pageIndex) => {
|
||||||
|
if (totalPages.value > 1) {
|
||||||
|
emit('delete-page', pageIndex);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const scrollToPage = (pageNumber) => {
|
||||||
|
if (viewportRef.value) {
|
||||||
|
const pageElement = viewportRef.value.querySelector(`[data-page="${pageNumber}"]`);
|
||||||
|
if (pageElement) {
|
||||||
|
pageElement.scrollIntoView({
|
||||||
|
behavior: 'smooth',
|
||||||
|
block: 'nearest',
|
||||||
|
inline: 'center'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const setCurrentPage = (pageNumber) => {
|
||||||
|
currentPage.value = pageNumber;
|
||||||
|
emit('page-change', pageNumber);
|
||||||
|
|
||||||
|
// Mantener la página actual centrada
|
||||||
|
nextTick(() => {
|
||||||
|
scrollToPage(pageNumber);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/** Métodos expuestos */
|
||||||
|
defineExpose({
|
||||||
|
scrollToPage,
|
||||||
|
setCurrentPage,
|
||||||
|
PAGE_WIDTH,
|
||||||
|
PAGE_HEIGHT,
|
||||||
|
ZOOM_LEVEL
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="flex-1 flex flex-col bg-gray-100 dark:bg-primary-d/20">
|
||||||
|
<!-- Toolbar de páginas -->
|
||||||
|
<div class="flex items-center justify-between px-4 py-3 bg-white dark:bg-primary-d border-b border-gray-200 dark:border-primary/20">
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<span class="text-sm font-medium text-gray-700 dark:text-primary-dt">
|
||||||
|
Página {{ currentPage }} de {{ totalPages }}
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<div class="flex items-center gap-1 border-l border-gray-200 dark:border-primary/20 pl-4">
|
||||||
|
<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"
|
||||||
|
title="Página anterior"
|
||||||
|
>
|
||||||
|
<GoogleIcon name="keyboard_arrow_left" class="text-lg" />
|
||||||
|
</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"
|
||||||
|
: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
|
||||||
|
v-if="currentPage >= totalPages"
|
||||||
|
name="add"
|
||||||
|
class="absolute -top-1 -right-1 text-xs text-green-500 bg-white rounded-full"
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<!-- 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 }}
|
||||||
|
</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"
|
||||||
|
>
|
||||||
|
<GoogleIcon name="add" class="text-sm" />
|
||||||
|
Nueva Página
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Viewport de páginas horizontal -->
|
||||||
|
<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;"
|
||||||
|
>
|
||||||
|
<!-- 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
|
||||||
|
v-for="(page, pageIndex) in pages"
|
||||||
|
:key="page.id"
|
||||||
|
:data-page="pageIndex + 1"
|
||||||
|
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">
|
||||||
|
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"
|
||||||
|
title="Eliminar página"
|
||||||
|
>
|
||||||
|
<GoogleIcon name="delete" class="text-sm" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<span class="text-xs text-gray-400 dark:text-primary-dt/50">
|
||||||
|
{{ currentPageSize.label }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Contenedor de página con sombra -->
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<!-- Página PDF -->
|
||||||
|
<div
|
||||||
|
class="pdf-page relative bg-white rounded-lg border border-gray-300 dark:border-primary/20 overflow-hidden"
|
||||||
|
: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
|
||||||
|
}"
|
||||||
|
:style="{
|
||||||
|
width: `${scaledPageWidth}px`,
|
||||||
|
height: `${scaledPageHeight}px`
|
||||||
|
}"
|
||||||
|
@drop="(e) => handleDrop(e, pageIndex)"
|
||||||
|
@dragover="handleDragOver"
|
||||||
|
@click="(e) => handleClick(e, pageIndex)"
|
||||||
|
>
|
||||||
|
<!-- Área de contenido con márgenes visuales -->
|
||||||
|
<div class="relative w-full h-full">
|
||||||
|
<!-- Guías de margen -->
|
||||||
|
<div
|
||||||
|
class="absolute border border-dashed border-blue-300/40 pointer-events-none"
|
||||||
|
:style="{
|
||||||
|
top: `${PAGE_MARGIN * ZOOM_LEVEL}px`,
|
||||||
|
left: `${PAGE_MARGIN * ZOOM_LEVEL}px`,
|
||||||
|
width: `${(PAGE_WIDTH - (PAGE_MARGIN * 2)) * ZOOM_LEVEL}px`,
|
||||||
|
height: `${(PAGE_HEIGHT - (PAGE_MARGIN * 2)) * ZOOM_LEVEL}px`
|
||||||
|
}"
|
||||||
|
></div>
|
||||||
|
|
||||||
|
<!-- Elementos de la página con transformación -->
|
||||||
|
<div
|
||||||
|
class="absolute inset-0"
|
||||||
|
:style="{
|
||||||
|
transform: `scale(${ZOOM_LEVEL})`,
|
||||||
|
transformOrigin: 'top left',
|
||||||
|
width: `${PAGE_WIDTH}px`,
|
||||||
|
height: `${PAGE_HEIGHT}px`
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<slot
|
||||||
|
name="elements"
|
||||||
|
:page="page"
|
||||||
|
:pageIndex="pageIndex"
|
||||||
|
:pageWidth="PAGE_WIDTH"
|
||||||
|
:pageHeight="PAGE_HEIGHT"
|
||||||
|
:zoomLevel="ZOOM_LEVEL"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Indicador de página vacía -->
|
||||||
|
<div
|
||||||
|
v-if="page.elements.length === 0"
|
||||||
|
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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 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"
|
||||||
|
>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.pdf-page {
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pdf-page:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.pdf-page.ring-2 {
|
||||||
|
transform: translateY(-4px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.overflow-auto {
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overflow-auto::-webkit-scrollbar-track {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overflow-auto::-webkit-scrollbar-thumb {
|
||||||
|
background: #cbd5e1;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overflow-auto::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: #94a3b8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overflow-auto::-webkit-scrollbar {
|
||||||
|
height: 8px;
|
||||||
|
width: 8px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
141
src/components/Holos/PDF/PageSizeSelector.vue
Normal file
141
src/components/Holos/PDF/PageSizeSelector.vue
Normal file
@ -0,0 +1,141 @@
|
|||||||
|
<script setup>
|
||||||
|
import { ref, computed } from 'vue';
|
||||||
|
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||||
|
|
||||||
|
/** Propiedades */
|
||||||
|
const props = defineProps({
|
||||||
|
modelValue: {
|
||||||
|
type: String,
|
||||||
|
default: 'A4'
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
/** Eventos */
|
||||||
|
const emit = defineEmits(['update:modelValue']);
|
||||||
|
|
||||||
|
/** Referencias */
|
||||||
|
const isOpen = ref(false);
|
||||||
|
|
||||||
|
/** Tamaños de página disponibles */
|
||||||
|
const pageSizes = [
|
||||||
|
{
|
||||||
|
name: 'A4',
|
||||||
|
label: 'A4 (210 x 297 mm)',
|
||||||
|
width: 794,
|
||||||
|
height: 1123,
|
||||||
|
description: 'Estándar internacional'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'A3',
|
||||||
|
label: 'A3 (297 x 420 mm)',
|
||||||
|
width: 1123,
|
||||||
|
height: 1587,
|
||||||
|
description: 'Doble de A4'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Letter',
|
||||||
|
label: 'Carta (216 x 279 mm)',
|
||||||
|
width: 816,
|
||||||
|
height: 1056,
|
||||||
|
description: 'Estándar US'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Legal',
|
||||||
|
label: 'Oficio (216 x 356 mm)',
|
||||||
|
width: 816,
|
||||||
|
height: 1344,
|
||||||
|
description: 'Legal US'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Tabloid',
|
||||||
|
label: 'Tabloide (279 x 432 mm)',
|
||||||
|
width: 1056,
|
||||||
|
height: 1632,
|
||||||
|
description: 'Doble carta'
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
/** Propiedades computadas */
|
||||||
|
const selectedSize = computed(() => {
|
||||||
|
return pageSizes.find(size => size.name === props.modelValue) || pageSizes[0];
|
||||||
|
});
|
||||||
|
|
||||||
|
/** Métodos */
|
||||||
|
const selectSize = (size) => {
|
||||||
|
emit('update:modelValue', size.name);
|
||||||
|
isOpen.value = false;
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="relative">
|
||||||
|
<!-- Selector principal -->
|
||||||
|
<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"
|
||||||
|
>
|
||||||
|
<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>
|
||||||
|
<GoogleIcon
|
||||||
|
name="expand_more"
|
||||||
|
class="text-gray-400 dark:text-primary-dt/50 transition-transform"
|
||||||
|
:class="{ 'rotate-180': isOpen }"
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- Dropdown -->
|
||||||
|
<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"
|
||||||
|
>
|
||||||
|
<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">
|
||||||
|
Tamaños de página
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="max-h-64 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="{
|
||||||
|
'bg-blue-50 dark:bg-blue-900/20': 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="{
|
||||||
|
'border-blue-500 dark:border-blue-400': 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`
|
||||||
|
}"
|
||||||
|
:class="{
|
||||||
|
'bg-blue-200 dark:bg-blue-800': selectedSize.name === size.name
|
||||||
|
}"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
</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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="selectedSize.name === size.name" class="flex-shrink-0">
|
||||||
|
<GoogleIcon name="check" class="text-blue-500 dark:text-blue-400" />
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
233
src/components/Holos/PDF/TextFormatter.vue
Normal file
233
src/components/Holos/PDF/TextFormatter.vue
Normal file
@ -0,0 +1,233 @@
|
|||||||
|
<script setup>
|
||||||
|
import { ref, computed, watch } from 'vue';
|
||||||
|
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||||
|
|
||||||
|
/** Propiedades */
|
||||||
|
const props = defineProps({
|
||||||
|
element: {
|
||||||
|
type: Object,
|
||||||
|
default: null
|
||||||
|
},
|
||||||
|
visible: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
/** Eventos */
|
||||||
|
const emit = defineEmits(['update']);
|
||||||
|
|
||||||
|
/** Propiedades computadas */
|
||||||
|
const formatting = computed(() => props.element?.formatting || {});
|
||||||
|
const hasTextElement = computed(() => props.element?.type === 'text');
|
||||||
|
|
||||||
|
/** Métodos */
|
||||||
|
const toggleBold = () => {
|
||||||
|
if (!hasTextElement.value) return;
|
||||||
|
updateFormatting('bold', !formatting.value.bold);
|
||||||
|
};
|
||||||
|
|
||||||
|
const toggleItalic = () => {
|
||||||
|
if (!hasTextElement.value) return;
|
||||||
|
updateFormatting('italic', !formatting.value.italic);
|
||||||
|
};
|
||||||
|
|
||||||
|
const toggleUnderline = () => {
|
||||||
|
if (!hasTextElement.value) return;
|
||||||
|
updateFormatting('underline', !formatting.value.underline);
|
||||||
|
};
|
||||||
|
|
||||||
|
const updateFontSize = (size) => {
|
||||||
|
if (!hasTextElement.value) return;
|
||||||
|
updateFormatting('fontSize', size);
|
||||||
|
};
|
||||||
|
|
||||||
|
const updateTextAlign = (align) => {
|
||||||
|
if (!hasTextElement.value) return;
|
||||||
|
updateFormatting('textAlign', align);
|
||||||
|
};
|
||||||
|
|
||||||
|
const updateColor = (color) => {
|
||||||
|
if (!hasTextElement.value) return;
|
||||||
|
updateFormatting('color', color);
|
||||||
|
};
|
||||||
|
|
||||||
|
const updateFormatting = (key, value) => {
|
||||||
|
const newFormatting = { ...formatting.value, [key]: value };
|
||||||
|
emit('update', {
|
||||||
|
id: props.element.id,
|
||||||
|
formatting: newFormatting
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/** Colores 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"
|
||||||
|
>
|
||||||
|
<!-- 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">
|
||||||
|
<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'
|
||||||
|
]"
|
||||||
|
title="Negrita (Ctrl+B)"
|
||||||
|
>
|
||||||
|
B
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
@click="toggleItalic"
|
||||||
|
:class="[
|
||||||
|
'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'
|
||||||
|
]"
|
||||||
|
title="Cursiva (Ctrl+I)"
|
||||||
|
>
|
||||||
|
I
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
@click="toggleUnderline"
|
||||||
|
:class="[
|
||||||
|
'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'
|
||||||
|
]"
|
||||||
|
title="Subrayado (Ctrl+U)"
|
||||||
|
>
|
||||||
|
U
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Separador -->
|
||||||
|
<div class="w-px h-6 bg-gray-300 dark:bg-primary/30"></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"
|
||||||
|
>
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<!-- 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')"
|
||||||
|
:class="[
|
||||||
|
'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'
|
||||||
|
]"
|
||||||
|
title="Alinear izquierda"
|
||||||
|
>
|
||||||
|
<GoogleIcon name="format_align_left" class="text-sm" />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
@click="updateTextAlign('center')"
|
||||||
|
:class="[
|
||||||
|
'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'
|
||||||
|
]"
|
||||||
|
title="Centrar"
|
||||||
|
>
|
||||||
|
<GoogleIcon name="format_align_center" class="text-sm" />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
@click="updateTextAlign('right')"
|
||||||
|
:class="[
|
||||||
|
'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'
|
||||||
|
]"
|
||||||
|
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>
|
||||||
|
|
||||||
|
<!-- Color de texto -->
|
||||||
|
<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"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type="color"
|
||||||
|
:value="formatting.color || '#000000'"
|
||||||
|
@input="updateColor($event.target.value)"
|
||||||
|
class="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Colores rápidos -->
|
||||||
|
<div class="flex gap-1">
|
||||||
|
<button
|
||||||
|
v-for="color in predefinedColors.slice(0, 6)"
|
||||||
|
:key="color"
|
||||||
|
@click="updateColor(color)"
|
||||||
|
class="w-6 h-6 rounded border border-gray-300 hover:scale-110 transition-transform"
|
||||||
|
:class="{
|
||||||
|
'ring-2 ring-blue-500': (formatting.color || '#000000') === color
|
||||||
|
}"
|
||||||
|
:style="{ backgroundColor: color }"
|
||||||
|
:title="color"
|
||||||
|
></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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
@ -1,261 +0,0 @@
|
|||||||
<script setup>
|
|
||||||
import { ref, computed, nextTick } from 'vue';
|
|
||||||
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
|
||||||
|
|
||||||
/** Propiedades */
|
|
||||||
const props = defineProps({
|
|
||||||
pages: {
|
|
||||||
type: Array,
|
|
||||||
default: () => [{ id: 1, elements: [] }]
|
|
||||||
},
|
|
||||||
selectedElementId: String,
|
|
||||||
isExporting: Boolean
|
|
||||||
});
|
|
||||||
|
|
||||||
/** Eventos */
|
|
||||||
const emit = defineEmits(['drop', 'dragover', 'click', 'add-page', 'delete-page', 'page-change']);
|
|
||||||
|
|
||||||
/** Referencias */
|
|
||||||
const viewportRef = ref(null);
|
|
||||||
const currentPage = ref(1);
|
|
||||||
|
|
||||||
/** Constantes de diseño */
|
|
||||||
const PAGE_WIDTH = 794; // A4 width in pixels (210mm @ 96dpi * 3.78)
|
|
||||||
const PAGE_HEIGHT = 1123; // A4 height in pixels (297mm @ 96dpi * 3.78)
|
|
||||||
const PAGE_MARGIN = 40;
|
|
||||||
const ZOOM_LEVEL = 0.8; // Factor de escala para visualización
|
|
||||||
|
|
||||||
/** Propiedades computadas */
|
|
||||||
const scaledPageWidth = computed(() => PAGE_WIDTH * ZOOM_LEVEL);
|
|
||||||
const scaledPageHeight = computed(() => PAGE_HEIGHT * ZOOM_LEVEL);
|
|
||||||
const totalPages = computed(() => props.pages.length);
|
|
||||||
|
|
||||||
/** Métodos */
|
|
||||||
const handleDrop = (event, pageIndex) => {
|
|
||||||
event.preventDefault();
|
|
||||||
|
|
||||||
const pageElement = event.currentTarget;
|
|
||||||
const rect = pageElement.getBoundingClientRect();
|
|
||||||
|
|
||||||
// Calcular posición relativa a la página específica
|
|
||||||
const relativeX = (event.clientX - rect.left) / ZOOM_LEVEL;
|
|
||||||
const relativeY = (event.clientY - rect.top) / ZOOM_LEVEL;
|
|
||||||
|
|
||||||
emit('drop', {
|
|
||||||
originalEvent: event,
|
|
||||||
pageIndex,
|
|
||||||
x: Math.max(PAGE_MARGIN, Math.min(PAGE_WIDTH - PAGE_MARGIN, relativeX)),
|
|
||||||
y: Math.max(PAGE_MARGIN, Math.min(PAGE_HEIGHT - PAGE_MARGIN, relativeY))
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleDragOver = (event) => {
|
|
||||||
event.preventDefault();
|
|
||||||
emit('dragover', event);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleClick = (event, pageIndex) => {
|
|
||||||
if (event.target.classList.contains('pdf-page')) {
|
|
||||||
emit('click', { originalEvent: event, pageIndex });
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const addPage = () => {
|
|
||||||
emit('add-page');
|
|
||||||
nextTick(() => {
|
|
||||||
scrollToPage(totalPages.value);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const deletePage = (pageIndex) => {
|
|
||||||
if (totalPages.value > 1) {
|
|
||||||
emit('delete-page', pageIndex);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const scrollToPage = (pageNumber) => {
|
|
||||||
if (viewportRef.value) {
|
|
||||||
const pageElement = viewportRef.value.querySelector(`[data-page="${pageNumber}"]`);
|
|
||||||
if (pageElement) {
|
|
||||||
pageElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const setCurrentPage = (pageNumber) => {
|
|
||||||
currentPage.value = pageNumber;
|
|
||||||
emit('page-change', pageNumber);
|
|
||||||
};
|
|
||||||
|
|
||||||
/** Métodos expuestos */
|
|
||||||
defineExpose({
|
|
||||||
scrollToPage,
|
|
||||||
setCurrentPage,
|
|
||||||
PAGE_WIDTH,
|
|
||||||
PAGE_HEIGHT,
|
|
||||||
ZOOM_LEVEL
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="flex-1 flex flex-col bg-gray-100 dark:bg-primary-d/20">
|
|
||||||
<!-- Toolbar de páginas -->
|
|
||||||
<div class="flex items-center justify-between px-4 py-2 bg-white dark:bg-primary-d border-b border-gray-200 dark:border-primary/20">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<span class="text-sm text-gray-600 dark:text-primary-dt">
|
|
||||||
Página {{ currentPage }} de {{ totalPages }}
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<div class="flex items-center gap-1">
|
|
||||||
<button
|
|
||||||
@click="setCurrentPage(Math.max(1, currentPage - 1))"
|
|
||||||
:disabled="currentPage <= 1"
|
|
||||||
class="p-1 text-gray-400 hover:text-gray-600 disabled:opacity-50 disabled:cursor-not-allowed dark:text-primary-dt/70 dark:hover:text-primary-dt"
|
|
||||||
>
|
|
||||||
<GoogleIcon name="keyboard_arrow_left" class="text-lg" />
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button
|
|
||||||
@click="setCurrentPage(Math.min(totalPages, currentPage + 1))"
|
|
||||||
:disabled="currentPage >= totalPages"
|
|
||||||
class="p-1 text-gray-400 hover:text-gray-600 disabled:opacity-50 disabled:cursor-not-allowed dark:text-primary-dt/70 dark:hover:text-primary-dt"
|
|
||||||
>
|
|
||||||
<GoogleIcon name="keyboard_arrow_right" class="text-lg" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
|
|
||||||
<button
|
|
||||||
@click="addPage"
|
|
||||||
:disabled="isExporting"
|
|
||||||
class="flex items-center gap-1 px-2 py-1 text-xs bg-blue-600 hover:bg-blue-700 text-white rounded transition-colors disabled:opacity-50"
|
|
||||||
>
|
|
||||||
<GoogleIcon name="add" class="text-sm" />
|
|
||||||
Nueva Página
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Viewport de páginas -->
|
|
||||||
<div
|
|
||||||
ref="viewportRef"
|
|
||||||
class="flex-1 overflow-auto p-8"
|
|
||||||
style="background: linear-gradient(45deg, #f0f0f0 25%, transparent 25%), linear-gradient(-45deg, #f0f0f0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #f0f0f0 75%), linear-gradient(-45deg, transparent 75%, #f0f0f0 75%); background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0px;"
|
|
||||||
>
|
|
||||||
<div class="flex flex-col items-center gap-8">
|
|
||||||
<!-- Páginas -->
|
|
||||||
<div
|
|
||||||
v-for="(page, pageIndex) in pages"
|
|
||||||
:key="page.id"
|
|
||||||
:data-page="pageIndex + 1"
|
|
||||||
class="relative"
|
|
||||||
@mouseenter="setCurrentPage(pageIndex + 1)"
|
|
||||||
>
|
|
||||||
<!-- Número de página -->
|
|
||||||
<div class="absolute -top-6 left-0 flex items-center gap-2 text-xs text-gray-500 dark:text-primary-dt/70">
|
|
||||||
<span>Página {{ pageIndex + 1 }}</span>
|
|
||||||
|
|
||||||
<button
|
|
||||||
v-if="totalPages > 1"
|
|
||||||
@click="deletePage(pageIndex)"
|
|
||||||
:disabled="isExporting"
|
|
||||||
class="text-red-500 hover:text-red-700 disabled:opacity-50"
|
|
||||||
title="Eliminar página"
|
|
||||||
>
|
|
||||||
<GoogleIcon name="delete" class="text-sm" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Página PDF -->
|
|
||||||
<div
|
|
||||||
class="pdf-page relative bg-white rounded-lg shadow-lg border border-gray-300 dark:border-primary/20"
|
|
||||||
:class="{
|
|
||||||
'ring-2 ring-blue-500': currentPage === pageIndex + 1,
|
|
||||||
'opacity-50': isExporting
|
|
||||||
}"
|
|
||||||
:style="{
|
|
||||||
width: `${scaledPageWidth}px`,
|
|
||||||
height: `${scaledPageHeight}px`,
|
|
||||||
transform: `scale(${ZOOM_LEVEL})`,
|
|
||||||
transformOrigin: 'top left'
|
|
||||||
}"
|
|
||||||
@drop="(e) => handleDrop(e, pageIndex)"
|
|
||||||
@dragover="handleDragOver"
|
|
||||||
@click="(e) => handleClick(e, pageIndex)"
|
|
||||||
>
|
|
||||||
<!-- Márgenes visuales -->
|
|
||||||
<div
|
|
||||||
class="absolute border border-dashed border-gray-300 dark:border-primary/30 pointer-events-none"
|
|
||||||
:style="{
|
|
||||||
top: `${PAGE_MARGIN}px`,
|
|
||||||
left: `${PAGE_MARGIN}px`,
|
|
||||||
width: `${PAGE_WIDTH - (PAGE_MARGIN * 2)}px`,
|
|
||||||
height: `${PAGE_HEIGHT - (PAGE_MARGIN * 2)}px`
|
|
||||||
}"
|
|
||||||
></div>
|
|
||||||
|
|
||||||
<!-- Elementos de la página -->
|
|
||||||
<slot
|
|
||||||
name="elements"
|
|
||||||
:page="page"
|
|
||||||
:pageIndex="pageIndex"
|
|
||||||
:pageWidth="PAGE_WIDTH"
|
|
||||||
:pageHeight="PAGE_HEIGHT"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<!-- Indicador de página vacía -->
|
|
||||||
<div
|
|
||||||
v-if="page.elements.length === 0"
|
|
||||||
class="absolute inset-0 flex items-center justify-center pointer-events-none"
|
|
||||||
>
|
|
||||||
<div class="text-center text-gray-400 dark:text-primary-dt/50">
|
|
||||||
<GoogleIcon name="description" class="text-4xl mb-2" />
|
|
||||||
<p class="text-sm">Página {{ pageIndex + 1 }}</p>
|
|
||||||
<p class="text-xs">Arrastra elementos aquí</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Regla inferior (tamaño de referencia) -->
|
|
||||||
<div class="mt-2 text-xs text-gray-400 dark:text-primary-dt/50 text-center">
|
|
||||||
210 × 297 mm (A4)
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Botón para agregar página al final -->
|
|
||||||
<button
|
|
||||||
@click="addPage"
|
|
||||||
:disabled="isExporting"
|
|
||||||
class="flex flex-col items-center justify-center w-40 h-20 border-2 border-dashed border-gray-300 dark:border-primary/30 rounded-lg hover:border-blue-500 hover:bg-blue-50 dark:hover:bg-blue-900/20 transition-colors disabled:opacity-50"
|
|
||||||
>
|
|
||||||
<GoogleIcon name="add" class="text-2xl text-gray-400 dark:text-primary-dt/50" />
|
|
||||||
<span class="text-xs text-gray-500 dark:text-primary-dt/70 mt-1">Nueva Página</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Overlay durante exportación -->
|
|
||||||
<div
|
|
||||||
v-if="isExporting"
|
|
||||||
class="absolute inset-0 bg-white/80 dark:bg-primary-d/80 flex items-center justify-center z-50"
|
|
||||||
>
|
|
||||||
<div class="text-center">
|
|
||||||
<GoogleIcon name="picture_as_pdf" class="text-4xl text-red-600 dark:text-red-400 animate-pulse mb-2" />
|
|
||||||
<p class="text-sm font-medium text-gray-900 dark:text-primary-dt">Generando PDF...</p>
|
|
||||||
<p class="text-xs text-gray-500 dark:text-primary-dt/70">Procesando {{ totalPages }} página{{ totalPages !== 1 ? 's' : '' }}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.pdf-page {
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pdf-page:hover {
|
|
||||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,10 +1,11 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import { ref, nextTick, onMounted, computed } from 'vue';
|
import { ref, onMounted, computed } from 'vue';
|
||||||
import { PDFDocument, rgb, StandardFonts } from 'pdf-lib';
|
import { PDFDocument, rgb, StandardFonts } from 'pdf-lib';
|
||||||
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||||
import Draggable from '@Holos/Draggable.vue';
|
import Draggable from '@Holos/PDF/Draggable.vue';
|
||||||
import CanvasElement from '@Holos/Canvas.vue';
|
import CanvasElement from '@Holos/PDF/Canvas.vue';
|
||||||
import PDFViewport from '@Holos/PDFViewport.vue';
|
import PDFViewport from '@Holos/PDF/PDFViewport.vue';
|
||||||
|
import TextFormatter from '@Holos/PDF/TextFormatter.vue';
|
||||||
|
|
||||||
/** Estado reactivo */
|
/** Estado reactivo */
|
||||||
const pages = ref([{ id: 1, elements: [] }]);
|
const pages = ref([{ id: 1, elements: [] }]);
|
||||||
@ -13,10 +14,61 @@ const elementCounter = ref(0);
|
|||||||
const documentTitle = ref('Documento sin título');
|
const documentTitle = ref('Documento sin título');
|
||||||
const isExporting = ref(false);
|
const isExporting = ref(false);
|
||||||
const currentPage = ref(1);
|
const currentPage = ref(1);
|
||||||
|
const pageIdCounter = ref(1); // <-- Agregar contador separado para páginas
|
||||||
|
|
||||||
|
/** Estado para tamaño de página */
|
||||||
|
const currentPageSize = ref({
|
||||||
|
width: 794, // A4 por defecto
|
||||||
|
height: 1123
|
||||||
|
});
|
||||||
|
|
||||||
|
/** Manejar cambio de tamaño de página */
|
||||||
|
const handlePageSizeChange = (sizeData) => {
|
||||||
|
currentPageSize.value = sizeData.dimensions;
|
||||||
|
// Aquí podrías ajustar elementos existentes si es necesario
|
||||||
|
window.Notify.info(`Tamaño de página cambiado a ${sizeData.size}`);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Actualizar el método moveElement para usar el tamaño dinámico
|
||||||
|
const moveElement = (moveData) => {
|
||||||
|
const element = allElements.value.find(el => el.id === moveData.id);
|
||||||
|
if (element) {
|
||||||
|
element.x = Math.max(0, Math.min(currentPageSize.value.width - (element.width || 200), moveData.x));
|
||||||
|
element.y = Math.max(0, Math.min(currentPageSize.value.height - (element.height || 40), moveData.y));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
/** Referencias */
|
/** Referencias */
|
||||||
const viewportRef = ref(null);
|
const viewportRef = ref(null);
|
||||||
|
|
||||||
|
/** Referencias adicionales */
|
||||||
|
const textFormatterElement = ref(null);
|
||||||
|
const showTextFormatter = ref(false);
|
||||||
|
|
||||||
|
const selectElement = (elementId) => {
|
||||||
|
selectedElementId.value = elementId;
|
||||||
|
const selectedEl = allElements.value.find(el => el.id === elementId);
|
||||||
|
showTextFormatter.value = selectedEl?.type === 'text';
|
||||||
|
textFormatterElement.value = selectedEl;
|
||||||
|
};
|
||||||
|
|
||||||
|
const updateElement = (update) => {
|
||||||
|
const element = allElements.value.find(el => el.id === update.id);
|
||||||
|
if (element) {
|
||||||
|
Object.assign(element, update);
|
||||||
|
// Si se actualiza el formato, actualizar la referencia
|
||||||
|
if (update.formatting && textFormatterElement.value?.id === update.id) {
|
||||||
|
textFormatterElement.value = { ...element };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCanvasClick = (clickData) => {
|
||||||
|
selectedElementId.value = null;
|
||||||
|
showTextFormatter.value = false;
|
||||||
|
textFormatterElement.value = null;
|
||||||
|
};
|
||||||
|
|
||||||
/** Tipos de elementos disponibles */
|
/** Tipos de elementos disponibles */
|
||||||
const availableElements = [
|
const availableElements = [
|
||||||
{
|
{
|
||||||
@ -109,14 +161,6 @@ const handleDragOver = (event) => {
|
|||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleCanvasClick = (clickData) => {
|
|
||||||
selectedElementId.value = null;
|
|
||||||
};
|
|
||||||
|
|
||||||
const selectElement = (elementId) => {
|
|
||||||
selectedElementId.value = elementId;
|
|
||||||
};
|
|
||||||
|
|
||||||
const deleteElement = (elementId) => {
|
const deleteElement = (elementId) => {
|
||||||
const index = allElements.value.findIndex(el => el.id === elementId);
|
const index = allElements.value.findIndex(el => el.id === elementId);
|
||||||
if (index !== -1) {
|
if (index !== -1) {
|
||||||
@ -128,26 +172,11 @@ const deleteElement = (elementId) => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const updateElement = (update) => {
|
|
||||||
const element = allElements.value.find(el => el.id === update.id);
|
|
||||||
if (element) {
|
|
||||||
Object.assign(element, update);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const moveElement = (moveData) => {
|
|
||||||
const element = allElements.value.find(el => el.id === moveData.id);
|
|
||||||
if (element) {
|
|
||||||
element.x = moveData.x;
|
|
||||||
element.y = moveData.y;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
/** Paginación */
|
/** Paginación */
|
||||||
const addPage = () => {
|
const addPage = () => {
|
||||||
const newPageId = Math.max(...pages.value.map(p => p.id)) + 1;
|
pageIdCounter.value++; // <-- Incrementar contador independiente
|
||||||
pages.value.push({
|
pages.value.push({
|
||||||
id: newPageId,
|
id: pageIdCounter.value,
|
||||||
elements: []
|
elements: []
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
@ -211,249 +240,215 @@ const exportPDF = async () => {
|
|||||||
isExporting.value = true;
|
isExporting.value = true;
|
||||||
window.Notify.info('Generando PDF...');
|
window.Notify.info('Generando PDF...');
|
||||||
|
|
||||||
// Crear un nuevo documento PDF
|
// Crear un nuevo documento PDF con el tamaño de página seleccionado
|
||||||
const pdfDoc = await PDFDocument.create();
|
const pdfDoc = await PDFDocument.create();
|
||||||
let currentPage = pdfDoc.addPage([595.28, 841.89]); // A4 size in points
|
|
||||||
let currentPageHeight = 841.89;
|
// Convertir dimensiones de pixels a puntos (1 px = 0.75 puntos)
|
||||||
|
const pageWidthPoints = currentPageSize.value.width * 0.75;
|
||||||
|
const pageHeightPoints = currentPageSize.value.height * 0.75;
|
||||||
|
|
||||||
|
let currentPDFPage = pdfDoc.addPage([pageWidthPoints, pageHeightPoints]);
|
||||||
|
let currentPageHeight = pageHeightPoints;
|
||||||
let yOffset = 50; // Margen superior
|
let yOffset = 50; // Margen superior
|
||||||
|
|
||||||
// Obtener fuentes
|
// Obtener fuentes
|
||||||
const helveticaFont = await pdfDoc.embedFont(StandardFonts.Helvetica);
|
const helveticaFont = await pdfDoc.embedFont(StandardFonts.Helvetica);
|
||||||
const courierFont = await pdfDoc.embedFont(StandardFonts.Courier);
|
const courierFont = await pdfDoc.embedFont(StandardFonts.Courier);
|
||||||
|
|
||||||
// Ordenar elementos por posición (de arriba hacia abajo, de izquierda a derecha)
|
// Procesar páginas del maquetador
|
||||||
const sortedElements = [...allElements.value].sort((a, b) => {
|
for (let pageIndex = 0; pageIndex < pages.value.length; pageIndex++) {
|
||||||
if (Math.abs(a.y - b.y) < 20) {
|
const page = pages.value[pageIndex];
|
||||||
return a.x - b.x; // Si están en la misma línea, ordenar por X
|
|
||||||
}
|
// Crear nueva página PDF si no es la primera
|
||||||
return a.y - b.y; // Ordenar por Y
|
if (pageIndex > 0) {
|
||||||
});
|
currentPDFPage = pdfDoc.addPage([pageWidthPoints, pageHeightPoints]);
|
||||||
|
currentPageHeight = pageHeightPoints;
|
||||||
// Procesar elementos
|
|
||||||
for (const element of sortedElements) {
|
|
||||||
// Calcular posición en el PDF
|
|
||||||
const x = Math.max(50, Math.min(500, (element.x * 0.75) + 50)); // Convertir y limitar X
|
|
||||||
let y = currentPageHeight - yOffset - (element.y * 0.75); // Convertir Y
|
|
||||||
|
|
||||||
// Verificar si necesitamos una nueva página
|
|
||||||
const elementHeight = getElementHeight(element);
|
|
||||||
if (y - elementHeight < 50) {
|
|
||||||
currentPage = pdfDoc.addPage([595.28, 841.89]);
|
|
||||||
currentPageHeight = 841.89;
|
|
||||||
yOffset = 50;
|
yOffset = 50;
|
||||||
y = currentPageHeight - yOffset;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
switch (element.type) {
|
// Ordenar elementos de esta página por posición
|
||||||
case 'text':
|
const sortedElements = [...page.elements].sort((a, b) => {
|
||||||
if (element.content) {
|
if (Math.abs(a.y - b.y) < 20) {
|
||||||
// Dividir texto largo en líneas
|
return a.x - b.x; // Si están en la misma línea, ordenar por X
|
||||||
const words = element.content.split(' ');
|
}
|
||||||
const lines = [];
|
return a.y - b.y; // Ordenar por Y
|
||||||
let currentLine = '';
|
});
|
||||||
const maxWidth = Math.min(400, (element.width || 200) * 0.75);
|
|
||||||
|
|
||||||
for (const word of words) {
|
// Procesar elementos de la página
|
||||||
const testLine = currentLine + (currentLine ? ' ' : '') + word;
|
for (const element of sortedElements) {
|
||||||
const testWidth = helveticaFont.widthOfTextAtSize(testLine, 12);
|
// Calcular posición en el PDF manteniendo proporciones
|
||||||
|
const scaleX = pageWidthPoints / currentPageSize.value.width;
|
||||||
if (testWidth <= maxWidth) {
|
const scaleY = pageHeightPoints / currentPageSize.value.height;
|
||||||
currentLine = testLine;
|
|
||||||
} else {
|
const x = Math.max(50, element.x * scaleX);
|
||||||
if (currentLine) lines.push(currentLine);
|
const y = currentPageHeight - (element.y * scaleY) - 50; // Margen superior
|
||||||
currentLine = word;
|
|
||||||
|
switch (element.type) {
|
||||||
|
case 'text':
|
||||||
|
if (element.content) {
|
||||||
|
// Dividir texto largo en líneas
|
||||||
|
const words = element.content.split(' ');
|
||||||
|
const lines = [];
|
||||||
|
let currentLine = '';
|
||||||
|
const maxWidth = Math.min(pageWidthPoints - 100, (element.width || 200) * scaleX);
|
||||||
|
|
||||||
|
for (const word of words) {
|
||||||
|
const testLine = currentLine + (currentLine ? ' ' : '') + word;
|
||||||
|
const testWidth = helveticaFont.widthOfTextAtSize(testLine, 12);
|
||||||
|
|
||||||
|
if (testWidth <= maxWidth) {
|
||||||
|
currentLine = testLine;
|
||||||
|
} else {
|
||||||
|
if (currentLine) lines.push(currentLine);
|
||||||
|
currentLine = word;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
if (currentLine) lines.push(currentLine);
|
||||||
|
|
||||||
|
// Dibujar cada línea
|
||||||
|
lines.forEach((line, index) => {
|
||||||
|
currentPDFPage.drawText(line, {
|
||||||
|
x: x,
|
||||||
|
y: y - (index * 15),
|
||||||
|
size: 12,
|
||||||
|
font: helveticaFont,
|
||||||
|
color: rgb(0, 0, 0),
|
||||||
|
});
|
||||||
|
});
|
||||||
}
|
}
|
||||||
if (currentLine) lines.push(currentLine);
|
break;
|
||||||
|
|
||||||
// Dibujar cada línea
|
case 'image':
|
||||||
lines.forEach((line, index) => {
|
if (element.content && element.content.startsWith('data:image')) {
|
||||||
currentPage.drawText(line, {
|
try {
|
||||||
x: x,
|
// Convertir base64 a bytes
|
||||||
y: y - (index * 15),
|
const base64Data = element.content.split(',')[1];
|
||||||
size: 12,
|
const imageBytes = Uint8Array.from(
|
||||||
font: helveticaFont,
|
atob(base64Data),
|
||||||
color: rgb(0, 0, 0),
|
c => c.charCodeAt(0)
|
||||||
});
|
);
|
||||||
});
|
|
||||||
|
|
||||||
yOffset += lines.length * 15 + 10;
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
|
|
||||||
case 'code':
|
|
||||||
if (element.content) {
|
|
||||||
// Dibujar fondo para el código
|
|
||||||
const codeLines = element.content.split('\n');
|
|
||||||
const codeWidth = Math.min(450, (element.width || 300) * 0.75);
|
|
||||||
const codeHeight = (codeLines.length * 12) + 20;
|
|
||||||
|
|
||||||
currentPage.drawRectangle({
|
|
||||||
x: x - 10,
|
|
||||||
y: y - codeHeight,
|
|
||||||
width: codeWidth,
|
|
||||||
height: codeHeight,
|
|
||||||
color: rgb(0.95, 0.95, 0.95),
|
|
||||||
});
|
|
||||||
|
|
||||||
// Dibujar código
|
|
||||||
codeLines.forEach((line, index) => {
|
|
||||||
// Truncar líneas muy largas
|
|
||||||
const maxChars = Math.floor(codeWidth / 6);
|
|
||||||
const displayLine = line.length > maxChars ?
|
|
||||||
line.substring(0, maxChars - 3) + '...' : line;
|
|
||||||
|
|
||||||
currentPage.drawText(displayLine, {
|
|
||||||
x: x - 5,
|
|
||||||
y: y - 15 - (index * 12),
|
|
||||||
size: 9,
|
|
||||||
font: courierFont,
|
|
||||||
color: rgb(0, 0, 0),
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
yOffset += codeHeight + 20;
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
|
|
||||||
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),
|
|
||||||
c => c.charCodeAt(0)
|
|
||||||
);
|
|
||||||
|
|
||||||
let image;
|
|
||||||
if (element.content.includes('image/jpeg') || element.content.includes('image/jpg')) {
|
|
||||||
image = await pdfDoc.embedJpg(imageBytes);
|
|
||||||
} else if (element.content.includes('image/png')) {
|
|
||||||
image = await pdfDoc.embedPng(imageBytes);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (image) {
|
|
||||||
// Calcular dimensiones manteniendo proporción
|
|
||||||
const maxWidth = Math.min(400, (element.width || 200) * 0.75);
|
|
||||||
const maxHeight = Math.min(300, (element.height || 150) * 0.75);
|
|
||||||
|
|
||||||
const imageAspectRatio = image.width / image.height;
|
let image;
|
||||||
let displayWidth = maxWidth;
|
if (element.content.includes('image/jpeg') || element.content.includes('image/jpg')) {
|
||||||
let displayHeight = maxWidth / imageAspectRatio;
|
image = await pdfDoc.embedJpg(imageBytes);
|
||||||
|
} else if (element.content.includes('image/png')) {
|
||||||
if (displayHeight > maxHeight) {
|
image = await pdfDoc.embedPng(imageBytes);
|
||||||
displayHeight = maxHeight;
|
|
||||||
displayWidth = maxHeight * imageAspectRatio;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
currentPage.drawImage(image, {
|
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);
|
||||||
|
|
||||||
|
const imageAspectRatio = image.width / image.height;
|
||||||
|
let displayWidth = maxWidth;
|
||||||
|
let displayHeight = maxWidth / imageAspectRatio;
|
||||||
|
|
||||||
|
if (displayHeight > maxHeight) {
|
||||||
|
displayHeight = maxHeight;
|
||||||
|
displayWidth = maxHeight * imageAspectRatio;
|
||||||
|
}
|
||||||
|
|
||||||
|
currentPDFPage.drawImage(image, {
|
||||||
|
x: x,
|
||||||
|
y: y - displayHeight,
|
||||||
|
width: displayWidth,
|
||||||
|
height: displayHeight,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} catch (imageError) {
|
||||||
|
console.warn('Error al procesar imagen:', imageError);
|
||||||
|
// Dibujar placeholder para imagen
|
||||||
|
currentPDFPage.drawRectangle({
|
||||||
x: x,
|
x: x,
|
||||||
y: y - displayHeight,
|
y: y - 60,
|
||||||
width: displayWidth,
|
width: 100 * scaleX,
|
||||||
height: displayHeight,
|
height: 60 * scaleY,
|
||||||
|
borderColor: rgb(0.7, 0.7, 0.7),
|
||||||
|
borderWidth: 1,
|
||||||
});
|
});
|
||||||
|
|
||||||
yOffset += displayHeight + 20;
|
currentPDFPage.drawText('[Imagen no disponible]', {
|
||||||
|
x: x + 5,
|
||||||
|
y: y - 35,
|
||||||
|
size: 10,
|
||||||
|
font: helveticaFont,
|
||||||
|
color: rgb(0.7, 0.7, 0.7),
|
||||||
|
});
|
||||||
}
|
}
|
||||||
} catch (imageError) {
|
} else {
|
||||||
console.warn('Error al procesar imagen:', imageError);
|
// Placeholder para imagen vacía
|
||||||
// Dibujar placeholder para imagen
|
currentPDFPage.drawRectangle({
|
||||||
currentPage.drawRectangle({
|
|
||||||
x: x,
|
x: x,
|
||||||
y: y - 60,
|
y: y - 60,
|
||||||
width: 100,
|
width: 100 * scaleX,
|
||||||
height: 60,
|
height: 60 * scaleY,
|
||||||
borderColor: rgb(0.7, 0.7, 0.7),
|
borderColor: rgb(0.7, 0.7, 0.7),
|
||||||
borderWidth: 1,
|
borderWidth: 1,
|
||||||
|
borderDashArray: [3, 3],
|
||||||
});
|
});
|
||||||
|
|
||||||
currentPage.drawText('[Imagen no disponible]', {
|
currentPDFPage.drawText('[Imagen]', {
|
||||||
x: x + 5,
|
x: x + 25,
|
||||||
y: y - 35,
|
y: y - 35,
|
||||||
size: 10,
|
size: 10,
|
||||||
font: helveticaFont,
|
font: helveticaFont,
|
||||||
color: rgb(0.7, 0.7, 0.7),
|
color: rgb(0.7, 0.7, 0.7),
|
||||||
});
|
});
|
||||||
|
|
||||||
yOffset += 80;
|
|
||||||
}
|
}
|
||||||
} else {
|
break;
|
||||||
// Placeholder para imagen vacía
|
|
||||||
currentPage.drawRectangle({
|
|
||||||
x: x,
|
|
||||||
y: y - 60,
|
|
||||||
width: 100,
|
|
||||||
height: 60,
|
|
||||||
borderColor: rgb(0.7, 0.7, 0.7),
|
|
||||||
borderWidth: 1,
|
|
||||||
borderDashArray: [3, 3],
|
|
||||||
});
|
|
||||||
|
|
||||||
currentPage.drawText('[Imagen]', {
|
case 'table':
|
||||||
x: x + 25,
|
if (element.content && element.content.data) {
|
||||||
y: y - 35,
|
const tableData = element.content.data;
|
||||||
size: 10,
|
const cellWidth = 80 * scaleX;
|
||||||
font: helveticaFont,
|
const cellHeight = 20 * scaleY;
|
||||||
color: rgb(0.7, 0.7, 0.7),
|
const tableWidth = tableData[0].length * cellWidth;
|
||||||
});
|
const tableHeight = tableData.length * cellHeight;
|
||||||
|
|
||||||
yOffset += 80;
|
// Dibujar bordes de la tabla
|
||||||
}
|
currentPDFPage.drawRectangle({
|
||||||
break;
|
x: x,
|
||||||
|
y: y - tableHeight,
|
||||||
|
width: tableWidth,
|
||||||
|
height: tableHeight,
|
||||||
|
borderColor: rgb(0.3, 0.3, 0.3),
|
||||||
|
borderWidth: 1,
|
||||||
|
});
|
||||||
|
|
||||||
case 'table':
|
// Dibujar contenido de las celdas
|
||||||
if (element.content && element.content.data) {
|
tableData.forEach((row, rowIndex) => {
|
||||||
const tableData = element.content.data;
|
row.forEach((cell, colIndex) => {
|
||||||
const cellWidth = 80;
|
const cellX = x + (colIndex * cellWidth);
|
||||||
const cellHeight = 20;
|
const cellY = y - (rowIndex * cellHeight) - 15;
|
||||||
const tableWidth = tableData[0].length * cellWidth;
|
|
||||||
const tableHeight = tableData.length * cellHeight;
|
|
||||||
|
|
||||||
// Dibujar bordes de la tabla
|
// Dibujar borde de celda
|
||||||
currentPage.drawRectangle({
|
currentPDFPage.drawRectangle({
|
||||||
x: x,
|
x: cellX,
|
||||||
y: y - tableHeight,
|
y: y - ((rowIndex + 1) * cellHeight),
|
||||||
width: tableWidth,
|
width: cellWidth,
|
||||||
height: tableHeight,
|
height: cellHeight,
|
||||||
borderColor: rgb(0.3, 0.3, 0.3),
|
borderColor: rgb(0.7, 0.7, 0.7),
|
||||||
borderWidth: 1,
|
borderWidth: 0.5,
|
||||||
});
|
});
|
||||||
|
|
||||||
// Dibujar contenido de las celdas
|
// Dibujar texto de la celda (truncar si es muy largo)
|
||||||
tableData.forEach((row, rowIndex) => {
|
const maxChars = Math.floor(cellWidth / 8);
|
||||||
row.forEach((cell, colIndex) => {
|
const displayText = cell.length > maxChars ?
|
||||||
const cellX = x + (colIndex * cellWidth);
|
cell.substring(0, maxChars - 3) + '...' : cell;
|
||||||
const cellY = y - (rowIndex * cellHeight) - 15;
|
|
||||||
|
|
||||||
// Dibujar borde de celda
|
currentPDFPage.drawText(displayText, {
|
||||||
currentPage.drawRectangle({
|
x: cellX + 5,
|
||||||
x: cellX,
|
y: cellY,
|
||||||
y: y - ((rowIndex + 1) * cellHeight),
|
size: 8,
|
||||||
width: cellWidth,
|
font: helveticaFont,
|
||||||
height: cellHeight,
|
color: rowIndex === 0 ? rgb(0.2, 0.2, 0.8) : rgb(0, 0, 0),
|
||||||
borderColor: rgb(0.7, 0.7, 0.7),
|
});
|
||||||
borderWidth: 0.5,
|
|
||||||
});
|
|
||||||
|
|
||||||
// Dibujar texto de la celda (truncar si es muy largo)
|
|
||||||
const maxChars = 10;
|
|
||||||
const displayText = cell.length > maxChars ?
|
|
||||||
cell.substring(0, maxChars - 3) + '...' : cell;
|
|
||||||
|
|
||||||
currentPage.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), // Encabezados en azul
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
}
|
||||||
|
break;
|
||||||
yOffset += tableHeight + 20;
|
}
|
||||||
}
|
|
||||||
break;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -504,6 +499,8 @@ const clearCanvas = () => {
|
|||||||
pages.value = [{ id: 1, elements: [] }];
|
pages.value = [{ id: 1, elements: [] }];
|
||||||
selectedElementId.value = null;
|
selectedElementId.value = null;
|
||||||
elementCounter.value = 0;
|
elementCounter.value = 0;
|
||||||
|
pageIdCounter.value = 1; // <-- Resetear también el contador de páginas
|
||||||
|
currentPage.value = 1;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -526,7 +523,7 @@ onMounted(() => {
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="flex h-screen bg-gray-50 dark:bg-primary-d/50">
|
<div class="flex h-screen bg-gray-50 dark:bg-primary-d/50">
|
||||||
<!-- Panel Izquierdo - Elementos -->
|
<!-- 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="w-64 bg-white dark:bg-primary-d border-r border-gray-200 dark:border-primary/20 flex flex-col">
|
||||||
<!-- Header del panel -->
|
<!-- Header del panel -->
|
||||||
<div class="p-4 border-b border-gray-200 dark:border-primary/20">
|
<div class="p-4 border-b border-gray-200 dark:border-primary/20">
|
||||||
@ -602,18 +599,12 @@ onMounted(() => {
|
|||||||
|
|
||||||
<!-- Área Principal con Viewport -->
|
<!-- Área Principal con Viewport -->
|
||||||
<div class="flex-1 flex flex-col">
|
<div class="flex-1 flex flex-col">
|
||||||
<!-- Toolbar superior -->
|
<!-- 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="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">
|
<div class="flex items-center gap-4">
|
||||||
<!-- Herramientas de formato (simuladas) -->
|
<h2 class="font-semibold text-gray-900 dark:text-primary-dt text-sm">
|
||||||
<div class="flex items-center gap-1 text-sm">
|
{{ documentTitle }}
|
||||||
<button class="p-1 hover:bg-gray-100 dark:hover:bg-primary/10 rounded" :disabled="isExporting">
|
</h2>
|
||||||
<GoogleIcon name="format_bold" class="text-gray-600 dark:text-primary-dt" />
|
|
||||||
</button>
|
|
||||||
<button class="p-1 hover:bg-gray-100 dark:hover:bg-primary/10 rounded" :disabled="isExporting">
|
|
||||||
<GoogleIcon name="format_italic" class="text-gray-600 dark:text-primary-dt" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex items-center gap-4">
|
<div class="flex items-center gap-4">
|
||||||
@ -633,6 +624,13 @@ onMounted(() => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- TextFormatter como toolbar estático -->
|
||||||
|
<TextFormatter
|
||||||
|
:element="textFormatterElement"
|
||||||
|
:visible="showTextFormatter"
|
||||||
|
@update="updateElement"
|
||||||
|
/>
|
||||||
|
|
||||||
<!-- PDFViewport -->
|
<!-- PDFViewport -->
|
||||||
<PDFViewport
|
<PDFViewport
|
||||||
ref="viewportRef"
|
ref="viewportRef"
|
||||||
@ -644,6 +642,7 @@ onMounted(() => {
|
|||||||
@add-page="addPage"
|
@add-page="addPage"
|
||||||
@delete-page="deletePage"
|
@delete-page="deletePage"
|
||||||
@page-change="(page) => currentPage = page"
|
@page-change="(page) => currentPage = page"
|
||||||
|
@page-size-change="handlePageSizeChange"
|
||||||
>
|
>
|
||||||
<template #elements="{ page, pageIndex }">
|
<template #elements="{ page, pageIndex }">
|
||||||
<CanvasElement
|
<CanvasElement
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user