99 lines
5.6 KiB
HTML
99 lines
5.6 KiB
HTML
<!-- Mask preview modal for ORA Editor -->
|
|
|
|
<div x-show="showMaskModal" @keydown.escape.window="closeMaskModal()"
|
|
class="fixed inset-0 z-[50] pt-12 lg:pt-0">
|
|
<!-- Backdrop (allows clicks to close) -->
|
|
<div @click="closeMaskModal()" class="absolute inset-0 bg-black bg-opacity-75"></div>
|
|
|
|
<!-- Close button (top right, above backdrop) -->
|
|
<button
|
|
@click="closeMaskModal()"
|
|
class="absolute top-4 right-4 z-[51] bg-gray-700 hover:bg-gray-600 rounded-full w-10 h-10 flex items-center justify-center text-xl min-h-[2.5rem] touch-manipulation lg:top-4"
|
|
>✕</button>
|
|
|
|
<!-- Modal content - above backdrop, full screen on mobile, centered on desktop -->
|
|
<div class="absolute inset-0 pt-12 lg:pt-0 overflow-auto p-4 z-[51]">
|
|
<div class="max-w-2xl mx-auto h-full flex flex-col lg:bg-gray-800 lg:rounded-lg lg:p-6 lg:max-h-[90vh] lg:border lg:border-gray-600 lg:my-auto">
|
|
<div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-2 mb-4">
|
|
<h2 class="text-xl font-bold">
|
|
Extracted Mask
|
|
<span x-show="tempMaskPaths.length > 1" class="text-sm font-normal text-gray-400 ml-2">
|
|
(<span x-text="currentMaskIndex + 1"></span> / <span x-text="tempMaskPaths.length"></span>)
|
|
</span>
|
|
</h2>
|
|
<!-- View mode toggle -->
|
|
<div class="flex gap-2">
|
|
<button
|
|
@click="maskViewMode = 'with-bg'"
|
|
:class="maskViewMode === 'with-bg' ? 'bg-blue-600' : 'bg-gray-600'"
|
|
class="px-3 py-2 rounded text-sm font-medium min-h-[2.5rem] touch-manipulation"
|
|
>With Background</button>
|
|
<button
|
|
@click="maskViewMode = 'masked-only'"
|
|
:class="maskViewMode === 'masked-only' ? 'bg-green-600' : 'bg-gray-600'"
|
|
class="px-3 py-2 rounded text-sm font-medium min-h-[2.5rem] touch-manipulation"
|
|
>Masked Only</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-gray-700 rounded mb-4 p-2 relative">
|
|
<!-- Navigation row (multiple masks) -->
|
|
<div x-show="tempMaskPaths.length > 1" class="flex items-center justify-between gap-2 mb-2">
|
|
<button
|
|
@click="previousMask()"
|
|
:disabled="currentMaskIndex <= 0"
|
|
class="bg-gray-800 hover:bg-gray-600 disabled:bg-gray-700 rounded w-12 h-12 flex items-center justify-center text-2xl min-h-[3rem] touch-manipulation"
|
|
>←</button>
|
|
<span class="text-sm text-gray-300 font-bold">Mask <span x-text="currentMaskIndex + 1"></span> / <span x-text="tempMaskPaths.length"></span></span>
|
|
<button
|
|
@click="nextMask()"
|
|
:disabled="currentMaskIndex >= tempMaskPaths.length - 1"
|
|
class="bg-gray-800 hover:bg-gray-600 disabled:bg-gray-700 rounded w-12 h-12 flex items-center justify-center text-2xl min-h-[3rem] touch-manipulation"
|
|
>→</button>
|
|
</div>
|
|
|
|
<!-- Image preview -->
|
|
<div class="relative bg-black rounded overflow-hidden" style="max-height: calc(100vh - 400px);">
|
|
<div class="flex items-center justify-center min-h-[200px]">
|
|
<!-- Base image (shown in "with-bg" mode) -->
|
|
<img
|
|
x-show="maskViewMode === 'with-bg'"
|
|
:src="'/api/image/base?ora_path=' + encodeURIComponent(oraPath)"
|
|
class="border border-gray-600"
|
|
style="max-width: 100%; max-height: calc(100vh - 400px);"
|
|
>
|
|
<!-- Masked image (transparent where mask is black) -->
|
|
<img
|
|
x-show="currentMaskPath"
|
|
:src="'/api/image/masked?ora_path=' + encodeURIComponent(oraPath) + '&mask_path=' + encodeURIComponent(currentMaskPath)"
|
|
class="border border-gray-600"
|
|
:class="maskViewMode === 'with-bg' ? 'absolute inset-0' : ''"
|
|
style="max-width: 100%; max-height: calc(100vh - 400px);"
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex gap-4 justify-end lg:flex lg:justify-end flex-col">
|
|
<button
|
|
@click="useCurrentMask()"
|
|
:disabled="isExtracting || !currentMaskPath"
|
|
class="w-full bg-green-600 hover:bg-green-700 disabled:bg-gray-600 px-4 py-2 rounded transition min-h-[2.5rem] touch-manipulation"
|
|
>Use This Mask</button>
|
|
<button
|
|
@click="rerollMasks()"
|
|
:disabled="isExtracting"
|
|
class="w-full bg-gray-600 hover:bg-gray-500 disabled:bg-gray-700 px-4 py-2 rounded transition flex items-center justify-center gap-2 min-h-[2.5rem] touch-manipulation"
|
|
>
|
|
<span x-show="isExtracting" class="animate-spin rounded-full h-4 w-4 border-t-2 border-b-2 border-white"></span>
|
|
Re-roll
|
|
</button>
|
|
<button
|
|
@click="closeMaskModal()"
|
|
:disabled="isExtracting"
|
|
class="w-full bg-red-600 hover:bg-red-700 disabled:bg-gray-600 px-4 py-2 rounded transition min-h-[2.5rem] touch-manipulation"
|
|
>Cancel</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> |