diff --git a/index.html b/index.html index 0749d22..1fe729b 100644 --- a/index.html +++ b/index.html @@ -4,6 +4,8 @@ + + Holos diff --git a/package.json b/package.json index cc69e1c..80808fb 100644 --- a/package.json +++ b/package.json @@ -13,16 +13,24 @@ "@popperjs/core": "^2.11.8", "@tailwindcss/postcss": "^4.0.9", "@tailwindcss/vite": "^4.0.9", + "@tiptap/extension-color": "^3.5.2", + "@tiptap/extension-text-align": "^3.5.2", + "@tiptap/extension-text-style": "^3.5.2", + "@tiptap/extension-underline": "^3.5.2", + "@tiptap/starter-kit": "^3.5.2", + "@tiptap/vue-3": "^3.5.2", "@vitejs/plugin-vue": "^5.2.1", "@vuepic/vue-datepicker": "^11.0.2", "apexcharts": "^5.3.5", "axios": "^1.8.1", + "html-to-pdfmake": "^2.5.31", "laravel-echo": "^2.0.2", "luxon": "^3.5.0", - "pdf-lib": "^1.17.1", + "pdfmake": "^0.2.20", "pinia": "^3.0.1", "pusher-js": "^8.4.0", "tailwindcss": "^4.0", + "tiptap-extension-font-size": "^1.2.0", "toastr": "^2.1.4", "uuid": "^11.1.0", "v-calendar": "^3.1.2", diff --git a/src/components/Holos/Canvas.vue b/src/components/Holos/Canvas.vue deleted file mode 100644 index e675454..0000000 --- a/src/components/Holos/Canvas.vue +++ /dev/null @@ -1,606 +0,0 @@ - - - - - \ No newline at end of file diff --git a/src/components/Holos/PDF/Draggable.vue b/src/components/Holos/PDF/Draggable.vue index 1b07f89..f35ee24 100644 --- a/src/components/Holos/PDF/Draggable.vue +++ b/src/components/Holos/PDF/Draggable.vue @@ -11,6 +11,7 @@ const props = defineProps({ icon: String, title: String, description: String, + tag: String }); /** Eventos */ @@ -24,7 +25,8 @@ const handleDragStart = (event) => { isDragging.value = true; event.dataTransfer.setData('text/plain', JSON.stringify({ type: props.type, - title: props.title + title: props.title, + tag: props.tag })); emit('dragstart', props.type); }; diff --git a/src/components/Holos/PDF/PDFViewport.vue b/src/components/Holos/PDF/PDFViewport.vue index 60fd6b8..0288a88 100644 --- a/src/components/Holos/PDF/PDFViewport.vue +++ b/src/components/Holos/PDF/PDFViewport.vue @@ -5,348 +5,140 @@ import PageSizeSelector from '@Holos/PDF/PageSizeSelector.vue'; /** Propiedades */ const props = defineProps({ - pages: { - type: Array, - default: () => [{ id: 1, elements: [] }] - }, - selectedElementId: String, - isExporting: Boolean + pages: { type: Array, default: () => [] }, + currentPage: { type: Number, default: 1 } }); /** Eventos */ -const emit = defineEmits(['drop', 'dragover', 'click', 'add-page', 'delete-page', 'page-change', 'page-size-change']); +const emit = defineEmits(['drop', 'add-page', 'delete-page', 'page-change', 'page-size-change', 'click']); /** 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' } + 'A4': { width: 794, height: 1123, label: 'A4 (210 x 297 mm)' }, + 'Letter': { width: 816, height: 1056, label: 'Carta (216 x 279 mm)' }, + 'A3': { width: 1123, height: 1587, label: 'A3 (297 x 420 mm)' }, + 'Legal': { width: 816, height: 1344, label: 'Oficio (216 x 356 mm)' }, + 'Tabloid': { width: 1056, height: 1632, label: 'Tabloide (279 x 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 currentPageSize = computed(() => pageSizes[pageSize.value] || pageSizes['A4']); +const scaledPageWidth = computed(() => currentPageSize.value.width * ZOOM_LEVEL); +const scaledPageHeight = computed(() => currentPageSize.value.height * ZOOM_LEVEL); const totalPages = computed(() => props.pages.length); -/** Watchers */ watch(pageSize, (newSize) => { - emit('page-size-change', { - size: newSize, - dimensions: pageSizes[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 rect = event.currentTarget.getBoundingClientRect(); + const x = (event.clientX - rect.left) / ZOOM_LEVEL; + const y = (event.clientY - rect.top) / ZOOM_LEVEL; + emit('drop', { originalEvent: event, pageIndex, x, y }); }; 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 setCurrentPage = (pageNumber) => { + emit('page-change', pageNumber); +}; + +const addPageAndNavigate = () => { + emit('add-page'); + nextTick(() => { + setCurrentPage(totalPages.value); + }); }; const handleNextPage = () => { - if (currentPage.value >= totalPages.value) { - addPage(); + if (props.currentPage >= totalPages.value) { + addPageAndNavigate(); } else { - setCurrentPage(currentPage.value + 1); + setCurrentPage(props.currentPage + 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 -}); - - \ No newline at end of file + \ No newline at end of file diff --git a/src/components/Holos/PDF/PageSizeSelector.vue b/src/components/Holos/PDF/PageSizeSelector.vue index 169cf6a..5e0f4eb 100644 --- a/src/components/Holos/PDF/PageSizeSelector.vue +++ b/src/components/Holos/PDF/PageSizeSelector.vue @@ -32,20 +32,6 @@ const pageSizes = [ 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)', @@ -65,20 +51,24 @@ const selectSize = (size) => { emit('update:modelValue', size.name); isOpen.value = false; }; + +const closeDropdown = () => { + isOpen.value = false; +}; diff --git a/src/components/Holos/PDF/TiptapEditor.vue b/src/components/Holos/PDF/TiptapEditor.vue new file mode 100644 index 0000000..6fec656 --- /dev/null +++ b/src/components/Holos/PDF/TiptapEditor.vue @@ -0,0 +1,95 @@ + + + + + diff --git a/src/components/Holos/PDFViewport.vue b/src/components/Holos/PDFViewport.vue deleted file mode 100644 index 967ca1b..0000000 --- a/src/components/Holos/PDFViewport.vue +++ /dev/null @@ -1,261 +0,0 @@ - - - - - \ No newline at end of file diff --git a/src/pages/Maquetador/Index.vue b/src/pages/Maquetador/Index.vue index 6024e36..c50a623 100644 --- a/src/pages/Maquetador/Index.vue +++ b/src/pages/Maquetador/Index.vue @@ -1,736 +1,330 @@ \ No newline at end of file +
+ + + + +
+ +