julian/watermark-wizard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

phase 1 & 2 add text mark

Browse Source
This commit is contained in:
Julian Freeman
2026-01-18 23:22:52 -04:00
parent a588caf743
commit 0c5824d85c
10 changed files with 659 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

143
src/components/HeroView.vue
View File

@@ -1,40 +1,147 @@
<script setup lang="ts">
import { useGalleryStore } from "../stores/gallery";
import { convertFileSrc } from "@tauri-apps/api/core";
import { ref, computed } from "vue";
const store = useGalleryStore();
const isDragging = ref(false);
const dragStart = ref({ x: 0, y: 0 });
// Use either manual position (if override is true) or ZCA suggestion
const position = computed(() => {
if (store.watermarkSettings.manual_override) {
return store.watermarkSettings.manual_position;
}
return store.selectedImage?.zcaSuggestion ? { x: store.selectedImage.zcaSuggestion.x, y: store.selectedImage.zcaSuggestion.y } : { x: 0.5, y: 0.5 };
});
const onMouseDown = (e: MouseEvent) => {
e.preventDefault();
isDragging.value = true;
dragStart.value = { x: e.clientX, y: e.clientY };
};
const onMouseMove = (e: MouseEvent) => {
if (!isDragging.value || !store.selectedImage) return;
// Calculate delta in percentage relative to the image container
const container = (e.currentTarget as HTMLElement).closest('.image-container');
if (!container) return;
const rect = container.getBoundingClientRect();
const deltaX = (e.clientX - dragStart.value.x) / rect.width;
const deltaY = (e.clientY - dragStart.value.y) / rect.height;
// Update manual position
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));
// Set store to manual mode immediately
store.updateWatermarkSettings({
manual_override: true,
manual_position: { x: newX, y: newY }
});
dragStart.value = { x: e.clientX, y: e.clientY };
};
const onMouseUp = () => {
isDragging.value = false;
};
const onMouseLeave = () => {
isDragging.value = false;
};
// Calculate font size relative to current display image height
// We need to know the rendered height of the image to approximate the visual effect
// Backend uses "percentage of real image height".
// In CSS, if we use % of container height, it should match if container matches image aspect.
// Since we use inline-flex and the img determines size, 100% height of parent refers to the image height.
</script>
<template>
<div class="w-full h-full flex items-center justify-center bg-black relative p-4 overflow-hidden">
<div v-if="store.selectedImage" class="relative inline-flex justify-center items-center" style="max-width: 100%; max-height: 100%;">
<div
class="w-full h-full flex items-center justify-center bg-black relative p-4 overflow-hidden"
@mousemove="onMouseMove"
@mouseup="onMouseUp"
@mouseleave="onMouseLeave"
>
<div
v-if="store.selectedImage"
class="relative inline-flex justify-center items-center image-container"
style="max-width: 100%; max-height: 100%;"
>
<img
:src="convertFileSrc(store.selectedImage.path)"
class="max-w-full max-h-full w-auto h-auto block shadow-lg"
class="max-w-full max-h-full w-auto h-auto block shadow-lg select-none pointer-events-none"
style="max-height: calc(100vh - 10rem);"
alt="Hero Image"
/>
<!-- Watermark Overlay Placeholder -->
<!-- Text Watermark Overlay -->
<div
v-if="store.selectedImage.zcaSuggestion"
class="absolute border-2 border-dashed border-green-400 text-green-400 px-4 py-2 bg-black/50 pointer-events-none transition-all duration-500"
v-if="store.watermarkSettings.text"
class="absolute cursor-move select-none whitespace-nowrap font-sans font-medium"
:style="{
left: (store.selectedImage.zcaSuggestion.x * 100) + '%',
top: (store.selectedImage.zcaSuggestion.y * 100) + '%',
transform: 'translate(-50%, -50%)'
left: (position.x * 100) + '%',
top: (position.y * 100) + '%',
transform: 'translate(-50%, -50%)',
opacity: store.watermarkSettings.opacity,
color: store.watermarkSettings.color,
fontSize: (store.watermarkSettings.scale * 100 * 1.5) + 'cqh',
/* Using container query units or just % of height?
Since container is the div wrapping img, its height IS the img height.
So height: 100% = img height.
fontSize: X% of height.
*/
height: '0px', /* collapse container height so it doesn't affect layout, rely on overflow visible for text */
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
}"
@mousedown="onMouseDown"
>
Smart Watermark ({{ store.selectedImage.zcaSuggestion.zone }})
</div>
<div
v-else
class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 border-2 border-dashed border-white text-white px-4 py-2 bg-black/50 pointer-events-none"
>
Calculating...
<span :style="{ fontSize: (store.watermarkSettings.scale * 1000) + '%' }">
<!-- This is tricky in CSS. Let's use viewport units approximation or just fix it
The simplest way to scale text with container height in Vue without ResizeObserver
is to use a computed style that relies on container size if we knew it.
Actually, since we are inside the container, we can use % of height for font-size? No, font-size % refers to parent font size.
Hack: Viewport units are stable-ish.
Better: Render text in SVG overlaid?
Simple approach for MVP Preview:
Use a fixed visual size or simple scale multiplier assuming 1080p screen.
Real backend logic is exact.
Alternative: Use CSS 'container-type: size' on the parent!
-->
{{ store.watermarkSettings.text }}
</span>
<!-- Selection Ring when dragging -->
<div v-if="isDragging" class="absolute -inset-2 border border-blue-500 rounded-sm"></div>
</div>
</div>
<div v-else class="text-gray-500">
No image selected
<div v-else class="text-gray-500 flex flex-col items-center">
<p>No image selected</p>
</div>
</div>
</template>
<style scoped>
.image-container {
container-type: size;
}
span {
/* Font size relative to container height (cqh) */
font-size: v-bind('(store.watermarkSettings.scale * 100) + "cqh"');
text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
</style>