Bryce
17da8c475e
- Polygon points are now draggable for editing after drawing - Allow points to be placed slightly outside image bounds (-0.1 to 1.1) - Save button shows notification with file path - Open in Krita shows modal with copyable path instead of blocked file:// URL - Added instructions for dragging points after drawing
1020 lines
46 KiB
HTML
1020 lines
46 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>ORA Editor</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
|
<style>
|
|
::-webkit-scrollbar { width: 8px; height: 8px; }
|
|
::-webkit-scrollbar-track { background: #374151; }
|
|
::-webkit-scrollbar-thumb { background: #6B7280; border-radius: 4px; }
|
|
</style>
|
|
</head>
|
|
<body class="bg-gray-900 text-white">
|
|
<div x-data="oraEditor()" x-init="init()" class="min-h-screen p-4">
|
|
|
|
<!-- Header -->
|
|
<header class="mb-4 flex items-center gap-4">
|
|
<div class="flex-1 flex items-center gap-2">
|
|
<input
|
|
type="text"
|
|
x-model="filePath"
|
|
placeholder="Path (e.g., scenes/kq4_010/pic.png)"
|
|
class="flex-1 bg-gray-700 border border-gray-600 rounded px-3 py-2 text-white focus:border-blue-500 outline-none"
|
|
@keydown.enter="openFile()"
|
|
>
|
|
<button
|
|
@click="openFile()"
|
|
:disabled="!filePath || isLoading"
|
|
class="bg-blue-600 hover:bg-blue-700 disabled:bg-gray-600 px-4 py-2 rounded transition flex items-center justify-center gap-2"
|
|
>
|
|
<span x-show="isLoading" class="animate-spin rounded-full h-4 w-4 border-t-2 border-b-2 border-white"></span>
|
|
<span x-text="isLoading ? 'Opening...' : 'Open'"></span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Krita button - behavior changes based on mode -->
|
|
<button
|
|
@click="openInKrita()"
|
|
:disabled="!oraPath || isExtracting"
|
|
class="bg-purple-600 hover:bg-purple-700 disabled:bg-gray-600 px-4 py-2 rounded flex items-center gap-2"
|
|
title="Open in Krita (Review mode: full ORA; Add mode: base with polygon)"
|
|
>
|
|
Open in Krita
|
|
</button>
|
|
|
|
<button
|
|
@click="saveCurrent()"
|
|
:disabled="!oraPath || isLoading"
|
|
class="bg-green-600 hover:bg-green-700 disabled:bg-gray-600 px-4 py-2 rounded transition"
|
|
>Save</button>
|
|
|
|
<!-- Save notification -->
|
|
<div
|
|
x-show="saveNotification"
|
|
x-transition
|
|
class="fixed top-4 right-4 bg-green-600 text-white px-4 py-2 rounded shadow-lg z-50"
|
|
x-text="saveNotification"
|
|
></div>
|
|
|
|
<!-- Scale slider - visible when file loaded -->
|
|
<div x-show="oraPath" class="flex items-center gap-2 bg-gray-800 rounded px-3 py-2 border border-gray-700">
|
|
<span class="text-sm text-gray-300">Scale:</span>
|
|
<input
|
|
type="range"
|
|
x-model.number="scale"
|
|
min="10"
|
|
max="100"
|
|
step="5"
|
|
class="w-32 accent-blue-500"
|
|
>
|
|
<span class="text-sm text-gray-300 w-12" x-text="scale + '%'"></span>
|
|
</div>
|
|
|
|
<button @click="showSettings = true" class="bg-gray-700 hover:bg-gray-600 px-4 py-2 rounded transition">⚙️</button>
|
|
</header>
|
|
|
|
<!-- Main content (after file loaded) -->
|
|
<template x-if="oraPath">
|
|
<div class="flex gap-4">
|
|
|
|
<!-- SIDEBAR - DIFFERENT CONTENT FOR EACH MODE -->
|
|
<aside class="w-72 flex-shrink-0 space-y-4">
|
|
|
|
<!-- REVIEW MODE SIDEBAR -->
|
|
<template x-if="mode === 'review'">
|
|
<div>
|
|
<!-- Layers panel -->
|
|
<div class="bg-gray-800 rounded-lg p-4 border border-gray-700">
|
|
<h3 class="font-bold mb-3 text-gray-300">Layers</h3>
|
|
|
|
<div class="space-y-2 max-h-96 overflow-y-auto">
|
|
<template x-for="layer in layers" :key="layer.name">
|
|
<div
|
|
@click="selectedLayer = layer.name"
|
|
class="flex items-center gap-2 bg-gray-700 hover:bg-gray-650 rounded px-2 py-1 transition cursor-pointer"
|
|
:class="{ 'bg-gray-600': selectedLayer === layer.name }"
|
|
>
|
|
<!-- Visibility checkbox -->
|
|
<input
|
|
type="checkbox"
|
|
:checked="layer.visible"
|
|
@change="toggleVisibility(layer.name, $event.target.checked)"
|
|
class="w-4 h-4 rounded"
|
|
title="Toggle visibility"
|
|
>
|
|
<!-- Layer name -->
|
|
<span class="flex-1 text-sm truncate" x-text="layer.name"></span>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
|
|
<!-- Layer edit controls (only when layer selected) -->
|
|
<div x-show="selectedLayer" class="mt-3 pt-3 border-t border-gray-600 space-y-2">
|
|
<div class="grid grid-cols-2 gap-2">
|
|
<button @click="renameLayer()" class="bg-gray-600 hover:bg-gray-500 px-2 py-1 rounded text-sm">Rename</button>
|
|
<button @click="deleteLayer()" class="bg-red-600 hover:bg-red-700 px-2 py-1 rounded text-sm">Delete</button>
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-2">
|
|
<button @click="reorderLayer('up')" class="bg-gray-600 hover:bg-gray-500 px-2 py-1 rounded text-sm">▲ Up</button>
|
|
<button @click="reorderLayer('down')" class="bg-gray-600 hover:bg-gray-500 px-2 py-1 rounded text-sm">▼ Down</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Add masked element button -->
|
|
<button
|
|
@click="enterAddMode()"
|
|
class="w-full bg-indigo-600 hover:bg-indigo-700 px-4 py-3 rounded-lg font-bold text-lg"
|
|
>
|
|
+ Add Masked Element
|
|
</button>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- ADD MASKED ELEMENT MODE SIDEBAR -->
|
|
<template x-if="mode === 'add'">
|
|
<div>
|
|
<!-- Entity name input -->
|
|
<div class="bg-gray-800 rounded-lg p-4 border border-gray-700">
|
|
<h3 class="font-bold mb-3 text-gray-300">New Element</h3>
|
|
<input
|
|
type="text"
|
|
x-model="entityName"
|
|
placeholder="Element name (e.g., 'door')"
|
|
class="w-full bg-gray-700 border border-gray-600 rounded px-3 py-2 text-white focus:border-blue-500 outline-none"
|
|
>
|
|
<p class="text-xs text-gray-400 mt-1">Will create layer: <span x-text="entityName ? entityName + '_0' : 'element_0'"></span></p>
|
|
</div>
|
|
|
|
<!-- Polygon tool -->
|
|
<div class="bg-gray-800 rounded-lg p-4 border border-gray-700">
|
|
<h3 class="font-bold mb-3 text-gray-300">Polygon (Optional)</h3>
|
|
|
|
<div class="space-y-3">
|
|
<p class="text-xs text-gray-400">Draw polygon to hint AI where subject is. Leave blank for manual drawing in Krita.</p>
|
|
|
|
<label class="block text-xs text-gray-400 mb-1">Color: <input type="color" x-model="polygonColor" class="h-8 w-full rounded cursor-pointer"></label>
|
|
<label class="block text-xs text-gray-400 mb-1">Width: <input type="number" x-model.number="polygonWidth" min="1" max="10" class="w-full bg-gray-700 border border-gray-600 rounded px-2 py-1"></label>
|
|
|
|
<div class="flex gap-2">
|
|
<button @click="startDrawing()" :disabled="isDrawing" class="flex-1 bg-blue-600 hover:bg-blue-700 disabled:bg-gray-600 px-3 py-1.5 rounded text-sm transition">Start Drawing</button>
|
|
<button @click="finishDrawing()" :disabled="!isDrawing || polygonPoints.length < 3" class="bg-green-600 hover:bg-green-700 disabled:bg-gray-600 px-3 py-1.5 rounded text-sm transition">Done</button>
|
|
</div>
|
|
|
|
<div x-show="polygonPoints.length > 0">
|
|
<span class="text-xs text-gray-400">Points: </span><span x-text="polygonPoints.length"></span>
|
|
</div>
|
|
|
|
<button @click="clearPolygon()" :disabled="!isDrawing && polygonPoints.length === 0" class="w-full bg-gray-600 hover:bg-gray-500 disabled:bg-gray-700 px-3 py-1.5 rounded text-sm transition">Clear</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mask extraction -->
|
|
<div class="bg-gray-800 rounded-lg p-4 border border-gray-700">
|
|
<h3 class="font-bold mb-3 text-gray-300">Mask Extraction</h3>
|
|
|
|
<div class="space-y-3">
|
|
<input
|
|
type="text"
|
|
x-model="maskSubject"
|
|
placeholder="e.g., 'the wooden door'"
|
|
:disabled="isExtracting"
|
|
class="w-full bg-gray-700 border border-gray-600 rounded px-3 py-2 text-white focus:border-blue-500 outline-none disabled:bg-gray-800"
|
|
>
|
|
|
|
<label class="flex items-center gap-2 cursor-pointer">
|
|
<input
|
|
type="checkbox"
|
|
x-model="usePolygonHint"
|
|
:disabled="isExtracting || polygonPoints.length < 3"
|
|
class="w-4 h-4 rounded"
|
|
>
|
|
<span class="text-sm">Use polygon hint</span>
|
|
</label>
|
|
|
|
<button
|
|
@click="extractMask()"
|
|
:disabled="!maskSubject.trim() || isExtracting"
|
|
class="w-full bg-indigo-600 hover:bg-indigo-700 disabled:bg-gray-600 px-4 py-2 rounded transition flex items-center justify-center gap-2"
|
|
>
|
|
<span x-show="isExtracting" class="animate-spin rounded-full h-4 w-4 border-t-2 border-b-2 border-white"></span>
|
|
<span x-show="!isExtracting">Extract Mask</span>
|
|
<span x-show="isExtracting">Extracting...</span>
|
|
</button>
|
|
|
|
<div x-show="lastError" class="text-red-400 text-xs" x-text="lastError"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Back to review mode -->
|
|
<button
|
|
@click="cancelAddMode()"
|
|
class="w-full bg-gray-600 hover:bg-gray-500 px-4 py-2 rounded-lg"
|
|
>
|
|
← Back to Review Mode
|
|
</button>
|
|
</div>
|
|
</template>
|
|
|
|
</aside>
|
|
|
|
<!-- MAIN CANVAS AREA -->
|
|
<main class="flex-1 bg-gray-800 rounded-lg border border-gray-700 p-4 relative overflow-auto" style="min-height: 600px;">
|
|
|
|
<div id="imageContainer"
|
|
class="relative inline-block origin-top-left"
|
|
:style="`width: ${imageWidth}px; height: ${imageHeight}px; transform: scale(${scale / 100});`">
|
|
|
|
<!-- Layer images stacked -->
|
|
<div class="relative w-full h-full">
|
|
<template x-for="layer in layers" :key="'layer-' + layer.name">
|
|
<div x-show="layer.visible" class="absolute inset-0 w-full h-full">
|
|
<img
|
|
:src="'/api/image/layer/' + encodeURIComponent(layer.name) + '?ora_path=' + encodeURIComponent(oraPath)"
|
|
class="absolute inset-0 w-full h-full object-contain pointer-events-none"
|
|
>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- Polygon points markers (draggable) - shown in add mode -->
|
|
<template x-if="mode === 'add' && polygonPoints.length > 0">
|
|
<template x-for="(point, idx) in polygonPoints" :key="'point-' + idx">
|
|
<div
|
|
class="absolute w-4 h-4 bg-white border-2 border-red-500 rounded-full cursor-move z-10"
|
|
style="transform: translate(-50%, -50%);"
|
|
:style="`left: ${point.x * 100}%; top: ${point.y * 100}%`"
|
|
@mousedown="startDragPoint($event, idx)"
|
|
@touchstart.prevent="startDragPoint($event, idx)"
|
|
></div>
|
|
</template>
|
|
</template>
|
|
|
|
<!-- Polygon overlay after drawing -->
|
|
<img
|
|
x-show="!isDrawing && polygonPreviewUrl"
|
|
:src="polygonPreviewUrl"
|
|
class="absolute inset-0 w-full h-full object-contain pointer-events-none"
|
|
alt="Polygon overlay"
|
|
>
|
|
|
|
<!-- Drawing canvas (only when actively drawing) -->
|
|
<canvas
|
|
id="polygonCanvas"
|
|
x-show="isDrawing"
|
|
:width="imageWidth"
|
|
:height="imageHeight"
|
|
class="absolute inset-0 cursor-crosshair pointer-events-auto border-2 border-dashed border-blue-500 opacity-90"
|
|
></canvas>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Loading indicator -->
|
|
<div x-show="isLoading && !error" class="flex items-center justify-center h-full">
|
|
<div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500"></div>
|
|
</div>
|
|
|
|
<!-- Error message -->
|
|
<div x-show="error" class="text-red-400 text-center mt-8" x-text="error"></div>
|
|
|
|
<!-- Mode-specific instructions -->
|
|
<div x-show="isDrawing" class="mt-2 text-sm text-gray-400">
|
|
Click to add points. Drag points to adjust. Double-click or Enter to finish, Escape to cancel.
|
|
</div>
|
|
<div x-show="mode === 'add' && !isDrawing && polygonPoints.length >= 3" class="mt-2 text-sm text-gray-400">
|
|
Drag points to adjust polygon, then extract mask or open in Krita.
|
|
</div>
|
|
<div x-show="mode === 'add' && !isDrawing && !polygonPreviewUrl && polygonPoints.length < 3" class="mt-2 text-sm text-gray-400">
|
|
Draw a polygon (optional) then extract mask, or use Open in Krita to annotation manually.
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- No file loaded message -->
|
|
<div x-show="!oraPath && !isLoading && !error" class="text-gray-400 text-center mt-20">
|
|
<p class="text-xl">Open a PNG or ORA file to start editing</p>
|
|
</div>
|
|
|
|
<!-- Mask preview modal -->
|
|
<div x-show="showMaskModal" @keydown.escape.window="closeMaskModal()"
|
|
class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-75">
|
|
<div class="bg-gray-800 rounded-lg p-6 max-w-2xl w-full mx-4 border border-gray-600" style="max-height: 90vh; display: flex; flex-direction: column;">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h2 class="text-xl font-bold">Extracted Mask</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-1 rounded text-sm font-medium"
|
|
>With Background</button>
|
|
<button
|
|
@click="maskViewMode = 'masked-only'"
|
|
:class="maskViewMode === 'masked-only' ? 'bg-green-600' : 'bg-gray-600'"
|
|
class="px-3 py-1 rounded text-sm font-medium"
|
|
>Masked Only</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex-1 overflow-auto bg-gray-700 rounded mb-4 flex items-center justify-center p-4" style="min-height: 300px; max-height: 50vh;">
|
|
<div class="relative" style="max-width: 100%; max-height: calc(50vh - 2rem);">
|
|
<!-- 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(50vh - 2rem);"
|
|
>
|
|
<!-- Masked image (transparent where mask is black) -->
|
|
<img
|
|
x-show="tempMaskPath"
|
|
:src="'/api/image/masked?ora_path=' + encodeURIComponent(oraPath) + '&mask_path=' + encodeURIComponent(tempMaskPath)"
|
|
class="border border-gray-600"
|
|
:class="maskViewMode === 'with-bg' ? 'absolute inset-0' : ''"
|
|
style="max-width: 100%; max-height: calc(50vh - 2rem);"
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex gap-4 justify-end">
|
|
<button @click="rerollMask()" :disabled="isExtracting" class="bg-gray-600 hover:bg-gray-500 disabled:bg-gray-700 px-4 py-2 rounded transition">Re-roll</button>
|
|
<button @click="useMask()" :disabled="isExtracting || !tempMaskPath" class="bg-green-600 hover:bg-green-700 disabled:bg-gray-600 px-4 py-2 rounded transition">Use This Mask</button>
|
|
<button @click="closeMaskModal()" :disabled="isExtracting" class="bg-red-600 hover:bg-red-700 disabled:bg-gray-600 px-4 py-2 rounded transition">Cancel</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Settings modal -->
|
|
<div x-show="showSettings" @keydown.escape.window="showSettings = false"
|
|
class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-75">
|
|
<div class="bg-gray-800 rounded-lg p-6 max-w-md w-full mx-4 border border-gray-600">
|
|
<h2 class="text-xl font-bold mb-4">Settings</h2>
|
|
|
|
<div class="mb-4">
|
|
<label class="block text-sm text-gray-300 mb-2">ComfyUI Server URL</label>
|
|
<input
|
|
type="text"
|
|
x-model="comfyUrl"
|
|
placeholder="127.0.0.1:8188"
|
|
class="w-full bg-gray-700 border border-gray-600 rounded px-3 py-2 text-white focus:outline-none focus:border-blue-500"
|
|
>
|
|
</div>
|
|
|
|
<div class="flex gap-4 justify-end mt-4">
|
|
<button @click="showSettings = false" class="bg-gray-600 hover:bg-gray-500 px-4 py-2 rounded transition">Cancel</button>
|
|
<button @click="saveSettings()" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded transition">Save</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Krita modal -->
|
|
<div x-show="showKritaModal" @keydown.escape.window="closeKritaModal()"
|
|
class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-75">
|
|
<div class="bg-gray-800 rounded-lg p-6 max-w-lg w-full mx-4 border border-gray-600">
|
|
<h2 class="text-xl font-bold mb-4">Open in Krita</h2>
|
|
|
|
<p class="text-gray-300 mb-4">File exported to:</p>
|
|
|
|
<div class="bg-gray-700 rounded p-3 mb-4 font-mono text-sm text-green-400 break-all" x-text="kritaTempPath"></div>
|
|
|
|
<p class="text-gray-400 text-sm mb-4">Copy the path and open it in Krita manually. Browsers cannot open local files directly.</p>
|
|
|
|
<div class="flex gap-4 justify-end">
|
|
<button
|
|
@click="copyKritaPath()"
|
|
:class="kritaPathCopied ? 'bg-green-600' : 'bg-blue-600 hover:bg-blue-700'"
|
|
class="px-4 py-2 rounded transition"
|
|
x-text="kritaPathCopied ? 'Copied!' : 'Copy Path'"
|
|
></button>
|
|
<button @click="closeKritaModal()" class="bg-gray-600 hover:bg-gray-500 px-4 py-2 rounded transition">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Alpine.js data object -->
|
|
<script>
|
|
function oraEditor() {
|
|
return {
|
|
// File state
|
|
filePath: '',
|
|
oraPath: '',
|
|
layers: [],
|
|
|
|
// Image dimensions
|
|
imageWidth: 800,
|
|
imageHeight: 600,
|
|
|
|
// Display scale - only used in review mode
|
|
scale: 25,
|
|
|
|
// Mode: 'review' or 'add'
|
|
mode: 'review',
|
|
|
|
// Selected layer for editing (review mode)
|
|
selectedLayer: null,
|
|
|
|
// Add masked element mode
|
|
entityName: '',
|
|
|
|
// Polygon state
|
|
isDrawing: false,
|
|
polygonPoints: [],
|
|
polygonColor: '#FF0000',
|
|
polygonWidth: 2,
|
|
polygonPreviewUrl: null,
|
|
|
|
// Mask extraction
|
|
maskSubject: '',
|
|
usePolygonHint: true,
|
|
isExtracting: false,
|
|
maskViewMode: 'with-bg', // 'with-bg' or 'masked-only'
|
|
showMaskModal: false,
|
|
tempMaskPath: null,
|
|
tempMaskUrl: null,
|
|
lastError: '',
|
|
|
|
// Settings
|
|
showSettings: false,
|
|
comfyUrl: localStorage.getItem('ora_comfy_url') || '127.0.0.1:8188',
|
|
saveNotification: null,
|
|
|
|
// Krita modal
|
|
showKritaModal: false,
|
|
kritaTempPath: null,
|
|
kritaPathCopied: false,
|
|
|
|
// Loading/error
|
|
isLoading: false,
|
|
error: '',
|
|
|
|
init() {
|
|
console.log('ORA Editor initialized');
|
|
this.setupKeyHandlers();
|
|
},
|
|
|
|
setupKeyHandlers() {
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Escape' && this.isDrawing) this.clearPolygon();
|
|
if (e.key === 'Enter' && this.isDrawing && this.polygonPoints.length >= 3) this.finishDrawing();
|
|
});
|
|
},
|
|
|
|
async openFile() {
|
|
if (!this.filePath || this.isLoading) return;
|
|
|
|
console.log('[ORA EDITOR] Opening file:', this.filePath);
|
|
this.isLoading = true;
|
|
this.error = '';
|
|
|
|
try {
|
|
const response = await fetch('/api/open', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ path: this.filePath })
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
console.log('[ORA EDITOR] File opened:', data);
|
|
|
|
if (!data.success) throw new Error(data.error || 'Failed to open file');
|
|
|
|
this.oraPath = data.ora_path;
|
|
this.layers = data.layers.map(layer => ({
|
|
...layer,
|
|
visible: true
|
|
}));
|
|
this.imageWidth = data.width;
|
|
this.imageHeight = data.height;
|
|
this.mode = 'review'; // Start in review mode
|
|
this.clearPolygon();
|
|
} catch (e) {
|
|
console.error('[ORA EDITOR] Error opening file:', e);
|
|
this.error = e.message;
|
|
} finally {
|
|
this.isLoading = false;
|
|
}
|
|
},
|
|
|
|
async saveCurrent() {
|
|
if (!this.oraPath) return;
|
|
|
|
// Get the original PNG path (same directory, .ora -> .png or keep .ora)
|
|
let savePath = this.oraPath;
|
|
|
|
const response = await fetch('/api/save', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ ora_path: savePath })
|
|
});
|
|
|
|
const data = await response.json();
|
|
if (data.success) {
|
|
this.saveNotification = 'Saved to ' + savePath;
|
|
setTimeout(() => { this.saveNotification = null; }, 3000);
|
|
} else {
|
|
alert('Error saving: ' + data.error);
|
|
}
|
|
},
|
|
|
|
enterAddMode() {
|
|
console.log('[ORA EDITOR] Entering add masked element mode');
|
|
this.mode = 'add';
|
|
this.entityName = '';
|
|
this.maskSubject = '';
|
|
this.clearPolygon();
|
|
this.scale = 100; // Full size for precision drawing
|
|
},
|
|
|
|
exitAddMode() {
|
|
console.log('[ORA EDITOR] Exiting add masked element mode');
|
|
this.mode = 'review';
|
|
this.isDrawing = false;
|
|
this.polygonPoints = [];
|
|
this.polygonPreviewUrl = null;
|
|
const canvas = document.getElementById('polygonCanvas');
|
|
if (canvas) {
|
|
canvas.style.display = 'none';
|
|
}
|
|
},
|
|
|
|
async cancelAddMode() {
|
|
if (this.isDrawing) {
|
|
this.clearPolygon();
|
|
} else {
|
|
this.exitAddMode();
|
|
}
|
|
},
|
|
|
|
async toggleVisibility(layerName, visible) {
|
|
const idx = this.layers.findIndex(l => l.name === layerName);
|
|
if (idx >= 0) {
|
|
this.layers[idx].visible = visible;
|
|
}
|
|
|
|
await fetch('/api/layer/visibility', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
ora_path: this.oraPath,
|
|
layer_name: layerName,
|
|
visible: visible
|
|
})
|
|
});
|
|
},
|
|
|
|
async renameLayer() {
|
|
const oldName = this.selectedLayer;
|
|
const newName = prompt('New layer name:', this.selectedLayer);
|
|
if (!newName || newName === oldName) return;
|
|
|
|
const layer = this.layers.find(l => l.name === oldName);
|
|
if (layer) layer.name = newName;
|
|
this.selectedLayer = newName;
|
|
|
|
await fetch('/api/layer/rename', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
ora_path: this.oraPath,
|
|
old_name: oldName,
|
|
new_name: newName
|
|
})
|
|
});
|
|
},
|
|
|
|
async deleteLayer() {
|
|
const layerToDelete = this.selectedLayer;
|
|
if (!confirm(`Delete layer "${layerToDelete}"?`)) return;
|
|
|
|
const idx = this.layers.findIndex(l => l.name === layerToDelete);
|
|
if (idx > -1) this.layers.splice(idx, 1);
|
|
this.selectedLayer = null;
|
|
|
|
await fetch('/api/layer/delete', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
ora_path: this.oraPath,
|
|
layer_name: layerToDelete
|
|
})
|
|
});
|
|
},
|
|
|
|
async reorderLayer(direction) {
|
|
if (!this.selectedLayer) return;
|
|
|
|
const idx = this.layers.findIndex(l => l.name === this.selectedLayer);
|
|
if (idx < 0) return;
|
|
|
|
const newIdx = direction === 'up' ? idx - 1 : idx + 1;
|
|
if (newIdx < 0 || newIdx >= this.layers.length) return;
|
|
|
|
const layerName = this.selectedLayer;
|
|
[this.layers[idx], this.layers[newIdx]] = [this.layers[newIdx], this.layers[idx]];
|
|
|
|
await fetch('/api/layer/reorder', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
ora_path: this.oraPath,
|
|
layer_name: layerName,
|
|
direction: direction
|
|
})
|
|
});
|
|
},
|
|
|
|
startDrawing() {
|
|
console.log('[ORA EDITOR] Starting polygon drawing mode');
|
|
this.isDrawing = true;
|
|
this.polygonPoints = [];
|
|
canvasDoubleClickPending = false;
|
|
this.polygonPreviewUrl = null;
|
|
|
|
setTimeout(() => {
|
|
this.setupCanvas();
|
|
const canvas = document.getElementById('polygonCanvas');
|
|
if (canvas) {
|
|
canvas.style.display = 'block';
|
|
}
|
|
}, 50);
|
|
},
|
|
|
|
setupCanvas() {
|
|
const canvas = document.getElementById('polygonCanvas');
|
|
if (!canvas) return;
|
|
|
|
canvas.width = this.imageWidth;
|
|
canvas.height = this.imageHeight;
|
|
},
|
|
|
|
addPolygonPoint(x, y) {
|
|
if (!this.isDrawing) return;
|
|
|
|
// Allow points slightly outside bounds (-0.1 to 1.1)
|
|
x = Math.max(-0.1, Math.min(1.1, x));
|
|
y = Math.max(-0.1, Math.min(1.1, y));
|
|
|
|
this.polygonPoints.push({ x, y });
|
|
this.drawPolygonOnCanvas();
|
|
},
|
|
|
|
startDragPoint(e, idx) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
const container = document.getElementById('imageContainer');
|
|
if (!container) return;
|
|
|
|
const moveHandler = (moveEvent) => {
|
|
const rect = container.getBoundingClientRect();
|
|
let x, y;
|
|
|
|
if (moveEvent.touches) {
|
|
x = (moveEvent.touches[0].clientX - rect.left) / rect.width;
|
|
y = (moveEvent.touches[0].clientY - rect.top) / rect.height;
|
|
} else {
|
|
x = (moveEvent.clientX - rect.left) / rect.width;
|
|
y = (moveEvent.clientY - rect.top) / rect.height;
|
|
}
|
|
|
|
// Allow points slightly outside bounds
|
|
x = Math.max(-0.1, Math.min(1.1, x));
|
|
y = Math.max(-0.1, Math.min(1.1, y));
|
|
|
|
this.polygonPoints[idx] = { x, y };
|
|
this.drawPolygonOnCanvas();
|
|
};
|
|
|
|
const upHandler = () => {
|
|
document.removeEventListener('mousemove', moveHandler);
|
|
document.removeEventListener('mouseup', upHandler);
|
|
document.removeEventListener('touchmove', moveHandler);
|
|
document.removeEventListener('touchend', upHandler);
|
|
|
|
// Update preview after drag
|
|
if (this.polygonPoints.length >= 3) {
|
|
this.updatePolygonPreview();
|
|
}
|
|
};
|
|
|
|
document.addEventListener('mousemove', moveHandler);
|
|
document.addEventListener('mouseup', upHandler);
|
|
document.addEventListener('touchmove', moveHandler);
|
|
document.addEventListener('touchend', upHandler);
|
|
},
|
|
|
|
drawPolygonOnCanvas() {
|
|
const canvas = document.getElementById('polygonCanvas');
|
|
if (!canvas || this.polygonPoints.length < 2) return;
|
|
|
|
const ctx = canvas.getContext('2d');
|
|
if (!ctx) return;
|
|
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
|
|
ctx.beginPath();
|
|
ctx.strokeStyle = this.polygonColor;
|
|
ctx.lineWidth = this.polygonWidth;
|
|
ctx.lineCap = 'round';
|
|
ctx.lineJoin = 'round';
|
|
|
|
const startPoint = this.polygonPoints[0];
|
|
ctx.moveTo(startPoint.x * canvas.width, startPoint.y * canvas.height);
|
|
|
|
for (let i = 1; i < this.polygonPoints.length; i++) {
|
|
const point = this.polygonPoints[i];
|
|
ctx.lineTo(point.x * canvas.width, point.y * canvas.height);
|
|
}
|
|
|
|
if (this.polygonPoints.length >= 3) {
|
|
ctx.closePath();
|
|
}
|
|
|
|
ctx.stroke();
|
|
|
|
ctx.fillStyle = '#FFFFFF';
|
|
for (const point of this.polygonPoints) {
|
|
const px = point.x * canvas.width;
|
|
const py = point.y * canvas.height;
|
|
|
|
ctx.beginPath();
|
|
ctx.arc(px, py, 6, 0, Math.PI * 2);
|
|
ctx.fill();
|
|
|
|
ctx.beginPath();
|
|
ctx.strokeStyle = this.polygonColor;
|
|
ctx.lineWidth = 2;
|
|
ctx.arc(px, py, 6, 0, Math.PI * 2);
|
|
ctx.stroke();
|
|
}
|
|
},
|
|
|
|
async updatePolygonPreview() {
|
|
console.log('[UPDATE] Updating preview with', this.polygonPoints.length, 'points');
|
|
if (!this.oraPath || this.polygonPoints.length < 3) return;
|
|
|
|
const response = await fetch('/api/polygon', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
ora_path: this.oraPath,
|
|
points: [...this.polygonPoints],
|
|
color: this.polygonColor,
|
|
width: this.polygonWidth
|
|
})
|
|
});
|
|
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
this.polygonPreviewUrl = data.overlay_url + '&ts=' + Date.now();
|
|
}
|
|
},
|
|
|
|
async finishDrawing() {
|
|
console.log('[FINISH] finishDrawing called');
|
|
if (this.polygonPoints.length >= 3) {
|
|
await this.updatePolygonPreview();
|
|
this.isDrawing = false;
|
|
|
|
const canvas = document.getElementById('polygonCanvas');
|
|
if (canvas) {
|
|
canvas.style.display = 'none';
|
|
}
|
|
} else {
|
|
this.clearPolygon();
|
|
}
|
|
},
|
|
|
|
clearPolygon() {
|
|
this.isDrawing = false;
|
|
this.polygonPoints = [];
|
|
this.polygonPreviewUrl = null;
|
|
|
|
const canvas = document.getElementById('polygonCanvas');
|
|
if (canvas) {
|
|
canvas.style.display = 'none';
|
|
const ctx = canvas.getContext('2d');
|
|
if (ctx) {
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
}
|
|
}
|
|
|
|
if (this.oraPath) {
|
|
fetch('/api/polygon/clear', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ ora_path: this.oraPath })
|
|
});
|
|
}
|
|
},
|
|
|
|
async extractMask() {
|
|
if (!this.maskSubject.trim()) return;
|
|
|
|
console.log('[ORA EDITOR] Extracting mask for:', this.maskSubject);
|
|
this.isExtracting = true;
|
|
this.lastError = '';
|
|
|
|
try {
|
|
const response = await fetch('/api/mask/extract', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
subject: this.maskSubject,
|
|
use_polygon: this.usePolygonHint && this.polygonPoints.length >= 3,
|
|
ora_path: this.oraPath,
|
|
comfy_url: this.comfyUrl
|
|
})
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
console.log('[ORA EDITOR] Mask extraction response:', data);
|
|
|
|
if (!data.success) throw new Error(data.error || 'Failed');
|
|
|
|
this.tempMaskPath = data.mask_path;
|
|
this.tempMaskUrl = data.mask_url || '/api/file/mask?path=' + encodeURIComponent(data.mask_path);
|
|
this.showMaskModal = true;
|
|
} catch (e) {
|
|
console.error('[ORA EDITOR] Error extracting mask:', e);
|
|
this.lastError = e.message;
|
|
} finally {
|
|
this.isExtracting = false;
|
|
}
|
|
},
|
|
|
|
rerollMask() {
|
|
this.extractMask();
|
|
},
|
|
|
|
async useMask() {
|
|
if (!this.tempMaskPath) return;
|
|
|
|
let finalEntityName = this.entityName || 'element';
|
|
const existingLayers = this.layers.filter(l => l.name.startsWith(finalEntityName + '_'));
|
|
let counter = 0;
|
|
while (existingLayers.some(l => l.name === `${finalEntityName}_${counter}`)) {
|
|
counter++;
|
|
}
|
|
finalEntityName = `${finalEntityName}_${counter}`;
|
|
|
|
console.log('[ORA EDITOR] Adding layer:', finalEntityName);
|
|
|
|
await fetch('/api/layer/add', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
ora_path: this.oraPath,
|
|
entity_name: finalEntityName,
|
|
mask_path: this.tempMaskPath
|
|
})
|
|
});
|
|
|
|
const response = await fetch('/api/layers?ora_path=' + encodeURIComponent(this.oraPath));
|
|
const data = await response.json();
|
|
if (data.success) {
|
|
this.layers = data.layers.map(layer => ({
|
|
...layer,
|
|
visible: true
|
|
}));
|
|
}
|
|
|
|
this.closeMaskModal();
|
|
this.exitAddMode();
|
|
},
|
|
|
|
closeMaskModal() {
|
|
this.showMaskModal = false;
|
|
this.tempMaskPath = null;
|
|
this.tempMaskUrl = null;
|
|
},
|
|
|
|
async openInKrita() {
|
|
if (!this.oraPath) return;
|
|
|
|
let requestBody;
|
|
|
|
if (this.mode === 'review') {
|
|
// Open full ORA file
|
|
requestBody = {
|
|
ora_path: this.oraPath,
|
|
open_full_ora: true
|
|
};
|
|
} else {
|
|
// Open base with polygon overlay for manual annotation
|
|
requestBody = {
|
|
ora_path: this.oraPath,
|
|
open_base_with_polygon: true,
|
|
points: this.polygonPoints,
|
|
color: this.polygonColor,
|
|
width: this.polygonWidth
|
|
};
|
|
}
|
|
|
|
const response = await fetch('/api/krita/open', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(requestBody)
|
|
});
|
|
|
|
const data = await response.json();
|
|
if (data.success) {
|
|
// Show the temp file path - user can open in Krita manually
|
|
this.kritaTempPath = data.temp_path;
|
|
this.showKritaModal = true;
|
|
} else {
|
|
alert('Error: ' + data.error);
|
|
}
|
|
},
|
|
|
|
copyKritaPath() {
|
|
if (this.kritaTempPath) {
|
|
navigator.clipboard.writeText(this.kritaTempPath);
|
|
this.kritaPathCopied = true;
|
|
setTimeout(() => { this.kritaPathCopied = false; }, 2000);
|
|
}
|
|
},
|
|
|
|
closeKritaModal() {
|
|
this.showKritaModal = false;
|
|
this.kritaTempPath = null;
|
|
this.kritaPathCopied = false;
|
|
},
|
|
|
|
saveSettings() {
|
|
localStorage.setItem('ora_comfy_url', this.comfyUrl);
|
|
this.showSettings = false;
|
|
}
|
|
};
|
|
}
|
|
</script>
|
|
|
|
<!-- Custom JS for canvas click handling -->
|
|
<script>
|
|
let canvasDoubleClickPending = false;
|
|
|
|
document.addEventListener('alpine:init', () => {
|
|
// Set up canvas event listeners after Alpine initializes
|
|
const observer = new MutationObserver(() => {
|
|
const canvas = document.getElementById('polygonCanvas');
|
|
if (canvas && !canvas.hasAttribute('data-handlers-setup')) {
|
|
canvas.setAttribute('data-handlers-setup', 'true');
|
|
|
|
canvas.addEventListener('click', (e) => {
|
|
if (canvasDoubleClickPending) return;
|
|
|
|
const container = document.getElementById('imageContainer');
|
|
if (!container) return;
|
|
|
|
const rect = container.getBoundingClientRect();
|
|
let x = (e.clientX - rect.left) / rect.width;
|
|
let y = (e.clientY - rect.top) / rect.height;
|
|
|
|
// Allow points slightly outside bounds (-0.1 to 1.1)
|
|
x = Math.max(-0.1, Math.min(1.1, x));
|
|
y = Math.max(-0.1, Math.min(1.1, y));
|
|
|
|
const alpineEl = container.closest('[x-data]');
|
|
if (!alpineEl) return;
|
|
|
|
const store = Alpine.$data(alpineEl);
|
|
if (store && store.isDrawing) {
|
|
store.addPolygonPoint(x, y);
|
|
}
|
|
});
|
|
|
|
canvas.addEventListener('dblclick', (e) => {
|
|
e.preventDefault();
|
|
canvasDoubleClickPending = true;
|
|
|
|
const container = document.getElementById('imageContainer');
|
|
if (!container) return;
|
|
|
|
const alpineEl = container.closest('[x-data]');
|
|
if (!alpineEl) return;
|
|
|
|
const store = Alpine.$data(alpineEl);
|
|
if (store && store.isDrawing && store.polygonPoints.length >= 3) {
|
|
store.finishDrawing();
|
|
}
|
|
});
|
|
|
|
// Clear pending flag after a short delay
|
|
setTimeout(() => { canvasDoubleClickPending = false; }, 200);
|
|
}
|
|
});
|
|
|
|
observer.observe(document.body, { childList: true, subtree: true });
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|