fix wateramrk

src/components/HeroView.vue

@@ -7,6 +7,7 @@ const store = useGalleryStore();
 const isDragging = ref(false);
 const dragStart = ref({ x: 0, y: 0 });
 const imgRef = ref<HTMLImageElement | null>(null);
+const containerRef = ref<HTMLElement | null>(null);
 const renderHeight = ref(0);
 
 let resizeObserver: ResizeObserver | null = null;
@@ -46,19 +47,21 @@ const position = computed(() => {
 });
 
 const onMouseDown = (e: MouseEvent) => {
+    // Only allow dragging if target is the watermark itself (or its child)
+    // Actually, user should be able to click watermark to start drag.
+    // e.preventDefault to stop image drag
     e.preventDefault();
     isDragging.value = true;
     dragStart.value = { x: e.clientX, y: e.clientY };
 };
 
 const onMouseMove = (e: MouseEvent) => {
-    if (!isDragging.value || !store.selectedImage) return;
+    if (!isDragging.value || !store.selectedImage || !containerRef.value) return;
     
     // Calculate delta in percentage relative to the image container
-    const container = (e.currentTarget as HTMLElement).closest('.image-container');
-    if (!container) return;
+    const rect = containerRef.value.getBoundingClientRect();
+    if (rect.width === 0 || rect.height === 0) return;
 
-    const rect = container.getBoundingClientRect();
     const deltaX = (e.clientX - dragStart.value.x) / rect.width;
     const deltaY = (e.clientY - dragStart.value.y) / rect.height;
 
@@ -66,9 +69,14 @@ const onMouseMove = (e: MouseEvent) => {
     let newX = position.value.x + deltaX;
     let newY = position.value.y + deltaY;
     
-    // Clamp
-    newX = Math.max(0, Math.min(1, newX));
-    newY = Math.max(0, Math.min(1, newY));
+    // Clamp logic (Simple 0-1 clamp for center point first)
+    // Ideally we should clamp so the box stays inside, but we don't know the exact text width in px easily here without measurement.
+    // For MVP, clamping center to [0, 1] is "safe enough" to prevent losing it, 
+    // but user asked for "not exceeding boundary".
+    // Visual clamping: slightly inside 0-1.
+    const padding = 0.01; 
+    newX = Math.max(padding, Math.min(1 - padding, newX));
+    newY = Math.max(padding, Math.min(1 - padding, newY));
 
     // Set store to manual mode immediately
     store.updateWatermarkSettings({
@@ -97,6 +105,7 @@ const onMouseLeave = () => {
   >
     <div 
         v-if="store.selectedImage" 
+        ref="containerRef"
         class="relative inline-flex justify-center items-center image-container" 
         style="max-width: 100%; max-height: 100%;"
     >

src/stores/gallery.ts

@@ -29,9 +29,9 @@ export const useGalleryStore = defineStore("gallery", () => {
       text: 'Watermark',
       color: '#FFFFFF',
       opacity: 0.8,
-      scale: 0.05, // 5% of height default
+      scale: 0.025, // Reduced from 0.05
       manual_override: false,
-      manual_position: { x: 0.5, y: 0.9 }
+      manual_position: { x: 0.5, y: 0.96 } // Lowered from 0.9
   });
 
   const selectedImage = computed(() => {