watermark pos bug2

src/components/HeroView.vue

@@ -1,40 +1,67 @@
 <script setup lang="ts">
 import { useGalleryStore } from "../stores/gallery";
 import { convertFileSrc } from "@tauri-apps/api/core";
-import { ref, computed, onMounted, onUnmounted, watch } from "vue";
+import { ref, computed, onMounted, onUnmounted, watch, nextTick } from "vue";
 
 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 renderRefSize = ref(0); // Min of width/height
+const parentRef = ref<HTMLElement | null>(null); // The black background container
+
+// These dimensions will exactly match the rendered image size
+const imageRect = ref({ width: 0, height: 0 });
 
 let resizeObserver: ResizeObserver | null = null;
 
-const updateSize = () => {
-    if (imgRef.value) {
-        // Use the smaller dimension to calculate scale, matching backend logic
-        renderRefSize.value = Math.min(imgRef.value.clientWidth, imgRef.value.clientHeight);
-    }
+const calculateLayout = () => {
+    if (!imgRef.value || !parentRef.value || !store.selectedImage) return;
+
+    // Wait for image natural dimensions to be available
+    const natW = imgRef.value.naturalWidth;
+    const natH = imgRef.value.naturalHeight;
+    
+    if (!natW || !natH) return; // Not loaded yet
+
+    const parentW = parentRef.value.clientWidth;
+    const parentH = parentRef.value.clientHeight;
+
+    // Calculate 'contain' fit manually
+    const scale = Math.min(
+        (parentW - 64) / natW, // 64px = 2rem padding * 2 sides (p-8)
+        (parentH - 64) / natH
+    );
+
+    // Prevent scaling up if image is smaller than screen? 
+    // Usually hero view scales up to fit. Let's stick to contain logic (can scale up).
+    
+    const finalW = Math.floor(natW * scale);
+    const finalH = Math.floor(natH * scale);
+
+    imageRect.value = { width: finalW, height: finalH };
 };
 
 onMounted(() => {
+    // Observe the parent container (window size changes)
+    if (parentRef.value) {
         resizeObserver = new ResizeObserver(() => {
-        updateSize();
+            calculateLayout();
         });
+        resizeObserver.observe(parentRef.value);
+    }
+    window.addEventListener('resize', calculateLayout);
 });
 
 onUnmounted(() => {
     if (resizeObserver) resizeObserver.disconnect();
+    window.removeEventListener('resize', calculateLayout);
 });
 
-// Watch for image ref availability
-watch(imgRef, (el) => {
-    if (el && resizeObserver) {
-        resizeObserver.disconnect(); // clear old
-        resizeObserver.observe(el);
-    }
+// Re-calculate when image changes
+watch(() => store.selectedImage, () => {
+    // Reset size until loaded to avoid jump
+    // imageRect.value = { width: 0, height: 0 }; 
+    nextTick(() => calculateLayout());
 });
 
 // Use either manual position (if override is true) or ZCA suggestion
@@ -42,8 +69,7 @@ const position = computed(() => {
     if (store.watermarkSettings.manual_override) {
         return store.watermarkSettings.manual_position;
     }
-    // Default to bottom center if no ZCA or manual
-    return store.selectedImage?.zcaSuggestion ? { x: store.selectedImage.zcaSuggestion.x, y: store.selectedImage.zcaSuggestion.y } : { x: 0.5, y: 0.98 };
+    return store.selectedImage?.zcaSuggestion ? { x: store.selectedImage.zcaSuggestion.x, y: store.selectedImage.zcaSuggestion.y } : { x: 0.5, y: 0.99 };
 });
 
 const onMouseDown = (e: MouseEvent) => {
@@ -53,11 +79,10 @@ const onMouseDown = (e: MouseEvent) => {
 };
 
 const onMouseMove = (e: MouseEvent) => {
-    if (!isDragging.value || !store.selectedImage || !containerRef.value) return;
+    // Need exact dimensions for drag calculation
+    if (!isDragging.value || !store.selectedImage || imageRect.value.width === 0) return;
     
-    // Calculate delta in percentage relative to the image container
-    const rect = containerRef.value.getBoundingClientRect();
-    if (rect.width === 0 || rect.height === 0) return;
+    const rect = imageRect.value; // Use our calculated rect, not bounding client rect (though they should match)
 
     const deltaX = (e.clientX - dragStart.value.x) / rect.width;
     const deltaY = (e.clientY - dragStart.value.y) / rect.height;
@@ -66,8 +91,7 @@ const onMouseMove = (e: MouseEvent) => {
     let newX = position.value.x + deltaX;
     let newY = position.value.y + deltaY;
     
-    // Clamp logic (Allow getting very close to edge, padding handled by visual/backend)
-    // Using small padding to prevent sticking perfectly to edge if not desired
+    // Clamp logic (0-1) - This is now strictly inside the image content area
     const padding = 0.005; 
     newX = Math.max(padding, Math.min(1 - padding, newX));
     newY = Math.max(padding, Math.min(1 - padding, newY));
@@ -92,28 +116,34 @@ const onMouseLeave = () => {
 
 <template>
   <div 
-    class="absolute inset-0 flex items-center justify-center bg-black p-4 overflow-hidden"
+    ref="parentRef"
+    class="absolute inset-0 flex items-center justify-center bg-black overflow-hidden"
     @mousemove="onMouseMove"
     @mouseup="onMouseUp"
     @mouseleave="onMouseLeave"
   >
-    <!-- Wrapper to constrain image -->
+    <!-- 
+      Dynamic Wrapper:
+      Dimensions strictly equal to the rendered image size.
+      This serves as the coordinate system for the watermark.
+    -->
     <div 
         v-if="store.selectedImage" 
-        ref="containerRef"
-        class="relative flex justify-center items-center" 
-        style="width: 100%; height: 100%;" 
+        class="relative shadow-2xl" 
+        :style="{
+            width: imageRect.width + 'px',
+            height: imageRect.height + 'px'
+        }"
     >
       <img 
         ref="imgRef"
         :src="convertFileSrc(store.selectedImage.path)" 
-        class="block shadow-2xl select-none pointer-events-none"
-        style="max-width: 100%; max-height: 100%; object-fit: contain;"
+        class="block w-full h-full select-none pointer-events-none"
         alt="Hero Image"
         loading="eager"
         decoding="sync"
         fetchpriority="high"
-        @load="updateSize"
+        @load="calculateLayout"
         @error="(e) => console.error('Hero Image Load Error:', e)"
       />
       
@@ -127,7 +157,8 @@ const onMouseLeave = () => {
             transform: 'translate(-50%, -50%)',
             opacity: store.watermarkSettings.opacity,
             color: store.watermarkSettings.color,
-            fontSize: (renderRefSize * store.watermarkSettings.scale) + 'px',
+            /* Scale based on min-dimension of the IMAGE, not window */
+            fontSize: (Math.min(imageRect.width, imageRect.height) * store.watermarkSettings.scale) + 'px',
             height: '0px', 
             display: 'flex',
             alignItems: 'center',