remove
This commit is contained in:
Julian Freeman
@@ -1,6 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { useGalleryStore } from "../stores/gallery";
|
||||
import { Settings, CheckSquare, Type, Palette, Copy } from 'lucide-vue-next';
|
||||
import { Settings, CheckSquare, Type, Palette, Copy, Eraser, PlusSquare, Brush, Sparkles, Trash2 } from 'lucide-vue-next';
|
||||
import { computed } from "vue";
|
||||
|
||||
const store = useGalleryStore();
|
||||
@@ -47,101 +47,171 @@ const applyAll = () => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="h-full bg-gray-800 text-white p-4 flex flex-col gap-6 overflow-y-auto border-l border-gray-700 w-80">
|
||||
<h2 class="text-lg font-bold flex items-center justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
<Settings class="w-5 h-5" />
|
||||
Settings
|
||||
</div>
|
||||
<div class="h-full bg-gray-800 text-white flex flex-col w-80 border-l border-gray-700">
|
||||
|
||||
<!-- Mode Switcher Tabs -->
|
||||
<div class="flex border-b border-gray-700">
|
||||
<button
|
||||
@click="applyAll"
|
||||
title="Apply Settings to All Images"
|
||||
class="bg-gray-700 hover:bg-gray-600 p-1.5 rounded text-xs text-blue-300 transition-colors flex items-center gap-1"
|
||||
@click="store.editMode = 'add'"
|
||||
class="flex-1 py-3 text-sm font-medium flex items-center justify-center gap-2 transition-colors"
|
||||
:class="store.editMode === 'add' ? 'bg-gray-700 text-blue-400 border-b-2 border-blue-400' : 'text-gray-400 hover:bg-gray-750'"
|
||||
>
|
||||
<Copy class="w-3 h-3" /> All
|
||||
<PlusSquare class="w-4 h-4" /> Add
|
||||
</button>
|
||||
<button
|
||||
@click="store.editMode = 'remove'"
|
||||
class="flex-1 py-3 text-sm font-medium flex items-center justify-center gap-2 transition-colors"
|
||||
:class="store.editMode === 'remove' ? 'bg-gray-700 text-red-400 border-b-2 border-red-400' : 'text-gray-400 hover:bg-gray-750'"
|
||||
>
|
||||
<Eraser class="w-4 h-4" /> Remove
|
||||
</button>
|
||||
</h2>
|
||||
|
||||
<!-- Text Input -->
|
||||
<div class="flex flex-col gap-2">
|
||||
<label class="text-sm text-gray-400 uppercase tracking-wider font-semibold">Content</label>
|
||||
<div class="relative">
|
||||
<Type class="absolute left-3 top-2.5 w-4 h-4 text-gray-500" />
|
||||
<input
|
||||
type="text"
|
||||
v-model="store.watermarkSettings.text"
|
||||
class="w-full bg-gray-700 text-white pl-10 pr-3 py-2 rounded border border-gray-600 focus:border-blue-500 focus:outline-none"
|
||||
placeholder="Enter text..."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Color Picker -->
|
||||
<div class="flex flex-col gap-2">
|
||||
<label class="text-sm text-gray-400 uppercase tracking-wider font-semibold">Color</label>
|
||||
<div class="flex items-center gap-2 bg-gray-700 p-2 rounded border border-gray-600">
|
||||
<Palette class="w-4 h-4 text-gray-400" />
|
||||
<input
|
||||
type="color"
|
||||
v-model="currentColor"
|
||||
class="w-8 h-8 rounded cursor-pointer bg-transparent border-none p-0"
|
||||
/>
|
||||
<span class="text-xs text-gray-300 font-mono">{{ currentColor }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Content Area -->
|
||||
<div class="flex-1 overflow-y-auto p-4 flex flex-col gap-6">
|
||||
|
||||
<!-- ADD MODE SETTINGS -->
|
||||
<div v-if="store.editMode === 'add'" class="flex flex-col gap-6">
|
||||
<h2 class="text-lg font-bold flex items-center justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
<Settings class="w-5 h-5" />
|
||||
Watermark
|
||||
</div>
|
||||
<button
|
||||
@click="applyAll"
|
||||
title="Apply Settings to All Images"
|
||||
class="bg-gray-700 hover:bg-gray-600 p-1.5 rounded text-xs text-blue-300 transition-colors flex items-center gap-1"
|
||||
>
|
||||
<Copy class="w-3 h-3" /> All
|
||||
</button>
|
||||
</h2>
|
||||
|
||||
<!-- Controls -->
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<div class="flex justify-between mb-1">
|
||||
<label class="text-xs text-gray-400">Size (Scale)</label>
|
||||
<span class="text-xs text-gray-300">{{ (currentScale * 100).toFixed(1) }}%</span>
|
||||
</div>
|
||||
<input
|
||||
type="range"
|
||||
min="0.01"
|
||||
max="0.20"
|
||||
step="0.001"
|
||||
v-model.number="currentScale"
|
||||
class="w-full h-1 bg-gray-600 rounded-lg appearance-none cursor-pointer accent-blue-500"
|
||||
/>
|
||||
<p class="text-[10px] text-gray-500 mt-1">Relative to image height</p>
|
||||
<!-- Text Input -->
|
||||
<div class="flex flex-col gap-2">
|
||||
<label class="text-sm text-gray-400 uppercase tracking-wider font-semibold">Content</label>
|
||||
<div class="relative">
|
||||
<Type class="absolute left-3 top-2.5 w-4 h-4 text-gray-500" />
|
||||
<input
|
||||
type="text"
|
||||
v-model="store.watermarkSettings.text"
|
||||
class="w-full bg-gray-700 text-white pl-10 pr-3 py-2 rounded border border-gray-600 focus:border-blue-500 focus:outline-none"
|
||||
placeholder="Enter text..."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Color Picker -->
|
||||
<div class="flex flex-col gap-2">
|
||||
<label class="text-sm text-gray-400 uppercase tracking-wider font-semibold">Color</label>
|
||||
<div class="flex items-center gap-2 bg-gray-700 p-2 rounded border border-gray-600">
|
||||
<Palette class="w-4 h-4 text-gray-400" />
|
||||
<input
|
||||
type="color"
|
||||
v-model="currentColor"
|
||||
class="w-8 h-8 rounded cursor-pointer bg-transparent border-none p-0"
|
||||
/>
|
||||
<span class="text-xs text-gray-300 font-mono">{{ currentColor }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Controls -->
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<div class="flex justify-between mb-1">
|
||||
<label class="text-xs text-gray-400">Size (Scale)</label>
|
||||
<span class="text-xs text-gray-300">{{ (currentScale * 100).toFixed(1) }}%</span>
|
||||
</div>
|
||||
<input
|
||||
type="range"
|
||||
min="0.01"
|
||||
max="0.20"
|
||||
step="0.001"
|
||||
v-model.number="currentScale"
|
||||
class="w-full h-1 bg-gray-600 rounded-lg appearance-none cursor-pointer accent-blue-500"
|
||||
/>
|
||||
<p class="text-[10px] text-gray-500 mt-1">Relative to image height</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="flex justify-between mb-1">
|
||||
<label class="text-xs text-gray-400">Opacity</label>
|
||||
<span class="text-xs text-gray-300">{{ (currentOpacity * 100).toFixed(0) }}%</span>
|
||||
</div>
|
||||
<input
|
||||
type="range"
|
||||
min="0.1"
|
||||
max="1.0"
|
||||
step="0.01"
|
||||
v-model.number="currentOpacity"
|
||||
class="w-full h-1 bg-gray-600 rounded-lg appearance-none cursor-pointer accent-blue-500"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Placement Info -->
|
||||
<div class="flex flex-col gap-2">
|
||||
<label class="text-sm text-gray-400 uppercase tracking-wider font-semibold">Placement Status</label>
|
||||
<div class="flex items-center gap-2 p-2 rounded bg-gray-700/50 border border-gray-600">
|
||||
<div class="p-1 rounded bg-green-500/20 text-green-400">
|
||||
<CheckSquare class="w-4 h-4" v-if="!store.selectedImage?.manualPosition" />
|
||||
<div class="w-4 h-4" v-else></div>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="text-sm font-medium text-gray-200" v-if="!store.selectedImage?.manualPosition">Auto (ZCA)</p>
|
||||
<p class="text-sm font-medium text-blue-300" v-else>Manual Override</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="flex justify-between mb-1">
|
||||
<label class="text-xs text-gray-400">Opacity</label>
|
||||
<span class="text-xs text-gray-300">{{ (currentOpacity * 100).toFixed(0) }}%</span>
|
||||
</div>
|
||||
<input
|
||||
type="range"
|
||||
min="0.1"
|
||||
max="1.0"
|
||||
step="0.01"
|
||||
v-model.number="currentOpacity"
|
||||
class="w-full h-1 bg-gray-600 rounded-lg appearance-none cursor-pointer accent-blue-500"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- REMOVE MODE SETTINGS -->
|
||||
<div v-else class="flex flex-col gap-6">
|
||||
<h2 class="text-lg font-bold flex items-center gap-2 text-red-400">
|
||||
<Brush class="w-5 h-5" />
|
||||
Magic Eraser
|
||||
</h2>
|
||||
|
||||
<!-- Placement Mode -->
|
||||
<div class="flex flex-col gap-2">
|
||||
<label class="text-sm text-gray-400 uppercase tracking-wider font-semibold">Placement Status</label>
|
||||
<div class="flex items-center gap-2 p-2 rounded bg-gray-700/50 border border-gray-600">
|
||||
<div class="p-1 rounded bg-green-500/20 text-green-400">
|
||||
<CheckSquare class="w-4 h-4" v-if="!store.selectedImage?.manualPosition" />
|
||||
<div class="w-4 h-4" v-else></div>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="text-sm font-medium text-gray-200" v-if="!store.selectedImage?.manualPosition">Auto (ZCA)</p>
|
||||
<p class="text-sm font-medium text-blue-300" v-else>Manual Override</p>
|
||||
<p class="text-xs text-gray-500" v-if="!store.selectedImage?.manualPosition">Using smart algorithm</p>
|
||||
<p class="text-xs text-gray-500" v-else>Specific position set</p>
|
||||
</div>
|
||||
<!-- Auto Detect Controls -->
|
||||
<div class="flex gap-2">
|
||||
<button
|
||||
@click="store.selectedIndex >= 0 && store.detectWatermark(store.selectedIndex)"
|
||||
class="flex-1 bg-blue-600 hover:bg-blue-500 text-white py-2 rounded flex items-center justify-center gap-2 text-sm transition-colors"
|
||||
:disabled="store.selectedIndex < 0"
|
||||
>
|
||||
<Sparkles class="w-4 h-4" /> Auto Detect
|
||||
</button>
|
||||
<button
|
||||
@click="store.selectedIndex >= 0 && store.clearMask(store.selectedIndex)"
|
||||
class="bg-gray-700 hover:bg-gray-600 text-gray-300 px-3 rounded flex items-center justify-center transition-colors"
|
||||
title="Clear Mask"
|
||||
:disabled="store.selectedIndex < 0"
|
||||
>
|
||||
<Trash2 class="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<p class="text-xs text-gray-400">Paint over the watermark you want to remove. The AI will fill in the background.</p>
|
||||
|
||||
<div>
|
||||
<div class="flex justify-between mb-1">
|
||||
<label class="text-xs text-gray-400">Brush Size</label>
|
||||
<span class="text-xs text-gray-300">{{ store.brushSettings.size }}px</span>
|
||||
</div>
|
||||
<input
|
||||
type="range"
|
||||
min="5"
|
||||
max="100"
|
||||
step="1"
|
||||
v-model.number="store.brushSettings.size"
|
||||
class="w-full h-1 bg-gray-600 rounded-lg appearance-none cursor-pointer accent-red-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="p-3 bg-red-900/20 border border-red-900/50 rounded text-xs text-red-200">
|
||||
AI Inpainting is not yet connected. Masking preview only.
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-500 mt-1 italic">
|
||||
* Drag the watermark on the image to set a manual position for that specific image.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user