Bryce
1a0b231a7b
- Restored x-data, x-model, x-show, x-for, x-if directives - All methods defined in Alpine data component - Canvas click handler properly uses () to access Alpine store - Open button now works with @click handler
317 lines
15 KiB
HTML
317 lines
15 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; }
|
|
.polygon-point { position: absolute; width: 8px; height: 8px; background: #0F0; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; }
|
|
</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"
|
|
>Open</button>
|
|
</div>
|
|
<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"
|
|
>
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/>
|
|
</svg>
|
|
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>
|
|
<button
|
|
@click="showSettings = true"
|
|
class="bg-gray-700 hover:bg-gray-600 px-4 py-2 rounded transition"
|
|
>⚙️</button>
|
|
</header>
|
|
|
|
<!-- Main content (hidden until file loaded) -->
|
|
<template x-if="oraPath">
|
|
<div class="flex gap-4">
|
|
|
|
<!-- Sidebar -->
|
|
<aside class="w-72 flex-shrink-0 space-y-4">
|
|
|
|
<!-- 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-64 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 }"
|
|
>
|
|
<input
|
|
type="checkbox"
|
|
:checked="layer.visible"
|
|
@change="toggleVisibility(layer.name, $event.target.checked)"
|
|
class="w-4 h-4 rounded"
|
|
>
|
|
<span class="flex-1 text-sm truncate" x-text="layer.name"></span>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
|
|
<!-- Layer controls -->
|
|
<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')" :disabled="isLoading" class="bg-gray-600 hover:bg-gray-500 disabled:bg-gray-700 px-2 py-1 rounded text-sm">▲ Up</button>
|
|
<button @click="reorderLayer('down')" :disabled="isLoading" class="bg-gray-600 hover:bg-gray-500 disabled:bg-gray-700 px-2 py-1 rounded text-sm">▼ Down</button>
|
|
</div>
|
|
</div>
|
|
</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</h3>
|
|
|
|
<div class="space-y-3">
|
|
<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="!oraPath || isDrawing || isLoading" 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 door'"
|
|
:disabled="isExtracting || !oraPath"
|
|
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 || !oraPath"
|
|
class="w-4 h-4 rounded"
|
|
>
|
|
<span class="text-sm">Use polygon hint</span>
|
|
</label>
|
|
|
|
<button
|
|
@click="extractMask()"
|
|
:disabled="!maskSubject.trim() || isExtracting || !oraPath"
|
|
class="w-full bg-indigo-600 hover:bg-indigo-700 disabled:bg-gray-600 px-4 py-2 rounded transition"
|
|
>
|
|
<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>
|
|
</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 x-show="!isLoading && !error && layers.length > 0" class="relative inline-block"
|
|
:style="`width: ${imageWidth}px; height: ${imageHeight}px; position: relative;`">
|
|
|
|
<!-- Layer display -->
|
|
<div class="relative w-full h-full">
|
|
<!-- Base image -->
|
|
<img
|
|
:src="'/api/image/base?ora_path=' + encodeURIComponent(oraPath)"
|
|
class="absolute inset-0 w-full h-full object-contain"
|
|
@load="initCanvas"
|
|
id="baseImage"
|
|
>
|
|
|
|
<!-- Polygon points markers when drawing -->
|
|
<template x-for="(point, idx) in polygonPoints" :key="idx">
|
|
<div class="polygon-point"
|
|
:style="`left: ${point.x * 100}%; top: ${point.y * 100}%`">
|
|
</div>
|
|
</template>
|
|
|
|
<!-- Polygon overlay when viewing or 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 visible when 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"
|
|
@click="handleCanvasClick"
|
|
@dblclick="handleCanvasDoubleClick"
|
|
></canvas>
|
|
|
|
</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>
|
|
|
|
<!-- Drawing hint -->
|
|
<div x-show="isDrawing" class="mt-2 text-sm text-gray-400">
|
|
Click on image to add points. Double-click or Enter/Escape when done.
|
|
</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;">
|
|
<h2 class="text-xl font-bold mb-4">Extracted Mask</h2>
|
|
|
|
<div class="flex-1 overflow-auto bg-gray-700 rounded mb-4 relative" :style="`min-height: 300px; max-height: 50vh;`">
|
|
<!-- Base image -->
|
|
<img :src="'/api/image/base?ora_path=' + encodeURIComponent(oraPath)" class="relative w-full h-auto object-contain">
|
|
|
|
<!-- Mask overlay with tint -->
|
|
<div x-show="tempMaskUrl" class="absolute inset-0 bg-green-500 opacity-30 pointer-events-none">
|
|
<img :src="tempMaskUrl" class="w-full h-auto object-contain mix-blend-screen">
|
|
</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>
|
|
|
|
</div>
|
|
|
|
<!-- Minimal JS for canvas polygon drawing -->
|
|
<script>
|
|
function initCanvas() {
|
|
const canvas = document.getElementById('polygonCanvas');
|
|
if (!canvas) return;
|
|
|
|
// Set canvas to proper size
|
|
canvas.style.width = canvas.parentElement.offsetWidth + 'px';
|
|
canvas.style.height = canvas.parentElement.offsetHeight + 'px';
|
|
}
|
|
|
|
// Access Alpine store for canvas click
|
|
function handleCanvasClick(e) {
|
|
const container = e.target.closest('[x-data]');
|
|
if (!container) return;
|
|
|
|
// Get click position
|
|
const rect = container.getBoundingClientRect();
|
|
let x = (e.clientX - rect.left) / rect.width;
|
|
let y = (e.clientY - rect.top) / rect.height;
|
|
|
|
// Normalize to 0-1 range
|
|
x = Math.max(0, Math.min(1, x));
|
|
y = Math.max(0, Math.min(1, y));
|
|
|
|
// Get Alpine component and add point
|
|
const alpineComponent = $data(container);
|
|
if (alpineComponent) {
|
|
alpineComponent.addPolygonPoint(x, y);
|
|
}
|
|
}
|
|
|
|
function handleCanvasDoubleClick(e) {
|
|
e.preventDefault();
|
|
const alpineComponent = $data(e.target.closest('[x-data]'));
|
|
if (alpineComponent) {
|
|
alpineComponent.finishDrawing();
|
|
}
|
|
}
|
|
|
|
// Wait for Alpine to initialize, then setup canvas
|
|
document.addEventListener('alpine:init', () => {
|
|
setTimeout(initCanvas, 200);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|