diff --git a/src/components/Holos/PDF/Canvas.vue b/src/components/Holos/PDF/Canvas.vue index 85a0b08..f549ccb 100644 --- a/src/components/Holos/PDF/Canvas.vue +++ b/src/components/Holos/PDF/Canvas.vue @@ -6,6 +6,7 @@ import TiptapEditor from "./TiptapEditor.vue"; const props = defineProps({ element: { type: Object, required: true }, isSelected: { type: Boolean, default: false }, + pageDimensions: { type: Object, required: true }, }); const emit = defineEmits([ "select", @@ -100,13 +101,19 @@ const handleMouseMove = (event) => { if (isDragging.value) { const deltaX = event.clientX - dragStart.value.mouseX; const deltaY = event.clientY - dragStart.value.mouseY; - const newX = dragStart.value.elementX + deltaX; - const newY = dragStart.value.elementY + deltaY; - emit("move", { - id: props.element.id, - x: Math.max(0, newX), - y: Math.max(0, newY), - }); + let newX = dragStart.value.elementX + deltaX; + let newY = dragStart.value.elementY + deltaY; + + // Límites + const pageW = props.pageDimensions.width; + const pageH = props.pageDimensions.height; + const elW = props.element.width; + const elH = props.element.height; + + newX = Math.max(0, Math.min(newX, pageW - elW)); + newY = Math.max(0, Math.min(newY, pageH - elH)); + + emit("move", { id: props.element.id, x: newX, y: newY }); } else if (isResizing.value) { handleResizeMove(event); } @@ -138,8 +145,19 @@ const handleResizeMove = (event) => { if (!isResizing.value) return; const deltaX = event.clientX - resizeStart.value.x; const deltaY = event.clientY - resizeStart.value.y; - const newWidth = Math.max(100, resizeStart.value.width + deltaX); - const newHeight = Math.max(40, resizeStart.value.height + deltaY); + + // Límites + const pageW = props.pageDimensions.width; + const pageH = props.pageDimensions.height; + const elX = props.element.x; + const elY = props.element.y; + + let newWidth = resizeStart.value.width + deltaX; + let newHeight = resizeStart.value.height + deltaY; + + newWidth = Math.max(100, Math.min(newWidth, pageW - elX)); + newHeight = Math.max(40, Math.min(newHeight, pageH - elY)); + emit("update", { id: props.element.id, width: newWidth, height: newHeight }); }; @@ -159,6 +177,17 @@ const handleFileSelect = (event) => { } event.target.value = null; }; + +const textStyles = computed(() => { + if (props.element.type !== "text") return {}; + + return { + width: "100%", + height: "100%", + overflow: "hidden", + position: "relative", + }; +});