From d6bc7d7914587bd272da6a7a928610d3d4ba879f Mon Sep 17 00:00:00 2001 From: Juan Felipe Zapata Moreno Date: Tue, 23 Sep 2025 13:50:25 -0600 Subject: [PATCH] =?UTF-8?q?ADD:=20Tama=C3=B1o=20de=20p=C3=A1ginas,=20Toolb?= =?UTF-8?q?ar=20dise=C3=B1o=20de=20texto?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Holos/{ => PDF}/Canvas.vue | 254 +++++---- src/components/Holos/{ => PDF}/Draggable.vue | 0 src/components/Holos/PDF/PDFViewport.vue | 353 +++++++++++++ src/components/Holos/PDF/PageSizeSelector.vue | 141 +++++ src/components/Holos/PDF/TextFormatter.vue | 233 +++++++++ src/components/Holos/PDFViewport.vue | 261 ---------- src/pages/Maquetador/Index.vue | 483 +++++++++--------- 7 files changed, 1117 insertions(+), 608 deletions(-) rename src/components/Holos/{ => PDF}/Canvas.vue (73%) rename src/components/Holos/{ => PDF}/Draggable.vue (100%) create mode 100644 src/components/Holos/PDF/PDFViewport.vue create mode 100644 src/components/Holos/PDF/PageSizeSelector.vue create mode 100644 src/components/Holos/PDF/TextFormatter.vue delete mode 100644 src/components/Holos/PDFViewport.vue diff --git a/src/components/Holos/Canvas.vue b/src/components/Holos/PDF/Canvas.vue similarity index 73% rename from src/components/Holos/Canvas.vue rename to src/components/Holos/PDF/Canvas.vue index e675454..92c32c1 100644 --- a/src/components/Holos/Canvas.vue +++ b/src/components/Holos/PDF/Canvas.vue @@ -31,12 +31,80 @@ const resizeStart = ref({ x: 0, y: 0, width: 0, height: 0 }); const fileInput = ref(null); /** Propiedades computadas */ -const elementStyles = computed(() => ({ - left: `${props.element.x}px`, - top: `${props.element.y}px`, - width: `${props.element.width || 200}px`, - height: `${props.element.height || 40}px` -})); +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` + }; + + // 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 */ watch(() => props.isSelected, (selected) => { @@ -304,7 +372,9 @@ const getMaxHeight = () => { 'cursor-text': isEditing && (element.type === 'text' || element.type === 'code'), 'cursor-se-resize': isResizing && resizeDirection === 'corner', 'cursor-e-resize': isResizing && resizeDirection === 'right', - 'cursor-s-resize': isResizing && resizeDirection === 'bottom' + 'cursor-s-resize': isResizing && resizeDirection === 'bottom', + 'z-50': isSelected, + 'z-10': !isSelected }" > @@ -316,10 +386,15 @@ const getMaxHeight = () => { class="hidden" /> - +
{ @blur="finishEditing" @keydown="handleKeydown" class="w-full bg-transparent outline-none cursor-text" + :class="inputClasses" + :style="inputStyles" @mousedown.stop /> - + {{ element.content || 'Nuevo texto' }}
- +
{
- -
-
-
-
-
-
-
- {{ element.fileName || 'script.js' }} -
-
-