Bryce
59277692ef
- Removed Alpine.js dependency (wasn't loading properly) - Clean vanilla JavaScript class-based implementation - All core functionality preserved - Simpler, more maintainable code
575 lines
24 KiB
HTML
575 lines
24 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>
|
|
<style>
|
|
::-webkit-scrollbar { width: 8px; height: 8px; }
|
|
::-webkit-scrollbar-track { background: #374151; }
|
|
::-webkit-scrollbar-thumb { background: #6B7280; border-radius: 4px; }
|
|
.poly-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 id="app" 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" id="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">
|
|
<button onclick="ora.openFile()" id="openBtn" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded">Open</button>
|
|
</div>
|
|
<button onclick="ora.openInKrita()" id="kritaBtn" class="bg-purple-600 hover:bg-purple-700 px-4 py-2 rounded flex items-center gap-2 disabled:bg-gray-600">Open in Krita</button>
|
|
<button onclick="ora.saveCurrent()" id="saveBtn" class="bg-green-600 hover:bg-green-700 px-4 py-2 rounded disabled:bg-gray-600">Save</button>
|
|
<button onclick="ora.showSettings()" class="bg-gray-700 hover:bg-gray-600 px-4 py-2 rounded">⚙️</button>
|
|
</header>
|
|
|
|
<!-- Main content (hidden until file loaded) -->
|
|
<div id="workspace" style="display:none;" class="flex gap-4">
|
|
<!-- Sidebar -->
|
|
<aside class="w-72 flex-shrink-0 space-y-4">
|
|
<!-- Layers panel -->
|
|
<div class="bg-gray-800 rounded p-4 border border-gray-700">
|
|
<h3 class="font-bold mb-3 text-gray-300">Layers</h3>
|
|
<div id="layersList" class="space-y-2 max-h-64 overflow-y-auto"></div>
|
|
<div id="layerControls" style="display:none;" class="mt-3 pt-3 border-t border-gray-600 space-y-2">
|
|
<div class="grid grid-cols-2 gap-2">
|
|
<button onclick="ora.renameLayer()" class="bg-gray-600 hover:bg-gray-500 px-2 py-1 rounded text-sm">Rename</button>
|
|
<button onclick="ora.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 onclick="ora.reorderLayer('up')" class="bg-gray-600 hover:bg-gray-500 px-2 py-1 rounded text-sm">▲ Up</button>
|
|
<button onclick="ora.reorderLayer('down')" class="bg-gray-600 hover:bg-gray-500 px-2 py-1 rounded text-sm">▼ Down</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Polygon tool -->
|
|
<div class="bg-gray-800 rounded 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">Color: <input type="color" id="polyColor" value="#FF0000" class="h-8 w-full rounded"></label>
|
|
<label class="block text-xs text-gray-400">Width: <input type="number" id="polyWidth" min="1" max="10" value="2" class="w-full bg-gray-700 border border-gray-600 rounded px-2 py-1"></label>
|
|
<div class="flex gap-2">
|
|
<button onclick="ora.startDrawing()" id="drawBtn" class="flex-1 bg-blue-600 hover:bg-blue-700 disabled:bg-gray-600 px-3 py-1.5 rounded text-sm">Draw</button>
|
|
<button onclick="ora.finishDrawing()" id="doneBtn" class="bg-green-600 hover:bg-green-700 disabled:bg-gray-600 px-3 py-1.5 rounded text-sm" disabled>Done</button>
|
|
</div>
|
|
<div id="pointCount" class="text-xs text-gray-400"></div>
|
|
<button onclick="ora.clearPolygon()" id="clearBtn" class="w-full bg-gray-600 hover:bg-gray-500 disabled:bg-gray-700 px-3 py-1.5 rounded text-sm" disabled>Clear</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mask extraction -->
|
|
<div class="bg-gray-800 rounded 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" id="maskSubject" placeholder="e.g., 'the door'"
|
|
class="w-full bg-gray-700 border border-gray-600 rounded px-3 py-2 text-white focus:border-blue-500 outline-none">
|
|
<label class="flex items-center gap-2 cursor-pointer">
|
|
<input type="checkbox" id="usePolygonHint" class="w-4 h-4 rounded"><span class="text-sm">Use polygon hint</span>
|
|
</label>
|
|
<button onclick="ora.extractMask()" id="extractBtn" class="w-full bg-indigo-600 hover:bg-indigo-700 disabled:bg-gray-600 px-4 py-2 rounded">Extract Mask</button>
|
|
<div id="maskError" class="text-red-400 text-xs" style="display:none;"></div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Canvas area -->
|
|
<main class="flex-1 bg-gray-800 rounded border border-gray-700 p-4 relative overflow-auto" style="min-height:600px">
|
|
<div id="imageContainer" class="relative inline-block"></div>
|
|
<div id="loadingIndicator" style="display:none;" 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>
|
|
<div id="errorMessage" class="text-red-400 text-center mt-8" style="display:none;"></div>
|
|
<div id="drawingHint" class="mt-2 text-sm text-gray-400">Click on image to add points. Double-click or Enter/Escape when done.</div>
|
|
</main>
|
|
</div>
|
|
|
|
<!-- Empty state -->
|
|
<div id="emptyState" class="text-gray-400 text-center mt-20">
|
|
<p class="text-xl">Open a PNG or ORA file to start editing</p>
|
|
</div>
|
|
|
|
<!-- Mask modal -->
|
|
<div id="maskModal" style="display:none;" class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-75" onclick="if(event.target===this) ora.closeMaskModal()">
|
|
<div class="bg-gray-800 rounded-lg p-6 max-w-2xl w-full mx-4 border" style="max-height:90vh;display:flex;flex-direction:column">
|
|
<h2 class="text-xl font-bold mb-4">Extracted Mask</h2>
|
|
<div id="maskPreview" class="flex-1 overflow-auto bg-gray-700 rounded mb-4 relative" style="min-height:300px;max-height:50vh"></div>
|
|
<div class="flex gap-4 justify-end">
|
|
<button onclick="ora.reroll()" id="rerollBtn" class="bg-gray-600 hover:bg-gray-500 px-4 py-2 rounded">Re-roll</button>
|
|
<button onclick="ora.useMask()" id="useMaskBtn" class="bg-green-600 hover:bg-green-700 px-4 py-2 rounded">Use Mask</button>
|
|
<button onclick="ora.closeMaskModal()" id="cancelMaskBtn" class="bg-red-600 hover:bg-red-700 px-4 py-2 rounded">Cancel</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Settings modal -->
|
|
<div id="settingsModal" style="display:none;" class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-75" onclick="if(event.target===this) ora.hideSettings()">
|
|
<div class="bg-gray-800 rounded-lg p-6 max-w-md w-full mx-4 border">
|
|
<h2 class="text-xl font-bold mb-4">Settings</h2>
|
|
<label class="block text-sm text-gray-300 mb-2">ComfyUI URL: <input type="text" id="comfyUrl" placeholder="127.0.0.1:8188" class="w-full bg-gray-700 border border-gray-600 rounded px-3 py-2 text-white"></label>
|
|
<div class="flex gap-4 justify-end mt-4">
|
|
<button onclick="ora.hideSettings()" class="bg-gray-600 hover:bg-gray-500 px-4 py-2 rounded">Cancel</button>
|
|
<button onclick="ora.saveSettings()" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded">Save</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
class ORAEditor {
|
|
constructor() {
|
|
this.filePath = '';
|
|
this.oraPath = '';
|
|
this.layers = [];
|
|
this.imageWidth = 800;
|
|
this.imageHeight = 600;
|
|
this.selectedLayer = null;
|
|
this.isDrawing = false;
|
|
this.polygonPoints = [];
|
|
this.polygonPreviewUrl = null;
|
|
this.tempMaskPath = null;
|
|
this.tempMaskUrl = null;
|
|
this.showMaskModal = false;
|
|
this.isExtracting = false;
|
|
|
|
// Load settings
|
|
this.comfyUrl = localStorage.getItem('ora_comfy_url') || '127.0.0.1:8188';
|
|
document.getElementById('comfyUrl').value = this.comfyUrl;
|
|
|
|
// Setup key handlers
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Escape' && this.isDrawing) this.clearPolygon();
|
|
if (e.key === 'Enter' && this.isDrawing && this.polygonPoints.length >= 3) this.finishDrawing();
|
|
});
|
|
|
|
// Bind inputs to state
|
|
document.getElementById('filePath').addEventListener('input', (e) => this.filePath = e.target.value);
|
|
|
|
// Setup canvas click handler
|
|
this.setupCanvasClickHandler();
|
|
|
|
this.updateUI();
|
|
}
|
|
|
|
setupCanvasClickHandler() {
|
|
const canvasId = 'polyCanvas';
|
|
const that = this;
|
|
|
|
// We'll set this up dynamically when drawing starts
|
|
window.addEventListener('click', (e) => {
|
|
if (!that.isDrawing) return;
|
|
|
|
// Find the canvas element (it might not exist yet)
|
|
const canvas = document.getElementById(canvasId);
|
|
if (!canvas) return;
|
|
|
|
// Get click position relative to container
|
|
const container = document.getElementById('imageContainer');
|
|
if (!container || !container.contains(e.target)) return;
|
|
|
|
const rect = container.getBoundingClientRect();
|
|
let x = (e.clientX - rect.left) / that.imageWidth;
|
|
let y = (e.clientY - rect.top) / that.imageHeight;
|
|
|
|
x = Math.max(0, Math.min(1, x));
|
|
y = Math.max(0, Math.min(1, y));
|
|
|
|
that.polygonPoints.push({x, y});
|
|
that.updatePolyPreview();
|
|
|
|
// Draw marker
|
|
const marker = document.createElement('div');
|
|
marker.className = 'poly-point';
|
|
marker.style.left = (x * 100) + '%';
|
|
marker.style.top = (y * 100) + '%';
|
|
container.appendChild(marker);
|
|
});
|
|
|
|
// Double click to finish drawing
|
|
window.addEventListener('dblclick', () => {
|
|
if (that.isDrawing && that.polygonPoints.length >= 3) {
|
|
that.finishDrawing();
|
|
}
|
|
});
|
|
}
|
|
|
|
updateUI() {
|
|
document.getElementById('emptyState').style.display = this.oraPath ? 'none' : 'block';
|
|
document.getElementById('workspace').style.display = this.oraPath ? 'flex' : 'none';
|
|
|
|
document.getElementById('openBtn').disabled = !this.filePath || this.isLoading;
|
|
document.getElementById('saveBtn').disabled = !this.oraPath || this.isLoading;
|
|
document.getElementById('kritaBtn').disabled = !this.oraPath || !this.selectedLayer;
|
|
document.getElementById('drawBtn').disabled = !this.oraPath || this.isDrawing || this.isLoading;
|
|
|
|
document.getElementById('maskSubject').disabled = this.isExtracting || !this.oraPath;
|
|
document.getElementById('usePolygonHint').disabled = this.isExtracting || !this.oraPath;
|
|
document.getElementById('extractBtn').disabled = (!document.getElementById('maskSubject').value.trim() || this.isExtracting || !this.oraPath);
|
|
|
|
if (this.isDrawing) {
|
|
document.getElementById('doneBtn').disabled = this.polygonPoints.length < 3;
|
|
document.getElementById('clearBtn').disabled = false;
|
|
} else {
|
|
document.getElementById('doneBtn').disabled = true;
|
|
document.getElementById('clearBtn').disabled = this.polygonPoints.length === 0;
|
|
}
|
|
|
|
document.getElementById('pointCount').innerHTML = this.polygonPoints.length ? 'Points: ' + this.polygonPoints.length : '';
|
|
document.getElementById('drawingHint').style.display = this.isDrawing ? 'block' : 'none';
|
|
|
|
// Update layers list
|
|
this.renderLayers();
|
|
}
|
|
|
|
isLoading = false;
|
|
|
|
async openFile() {
|
|
if (!this.filePath || this.isLoading) return;
|
|
this.isLoading = true;
|
|
this.updateUI();
|
|
|
|
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();
|
|
|
|
if (!data.success) throw new Error(data.error || 'Failed to open file');
|
|
|
|
this.oraPath = data.ora_path;
|
|
this.layers = data.layers;
|
|
this.imageWidth = data.width;
|
|
this.imageHeight = data.height;
|
|
this.clearPolygon();
|
|
|
|
// Render image
|
|
const container = document.getElementById('imageContainer');
|
|
container.innerHTML = '';
|
|
container.style.width = this.imageWidth + 'px';
|
|
container.style.height = this.imageHeight + 'px';
|
|
container.style.position = 'relative';
|
|
|
|
// Base image
|
|
const baseImg = document.createElement('img');
|
|
baseImg.src = '/api/image/base?ora_path=' + encodeURIComponent(this.oraPath);
|
|
baseImg.className = 'absolute inset-0 w-full h-full object-contain';
|
|
container.appendChild(baseImg);
|
|
|
|
} catch (e) {
|
|
this.showError(e.message);
|
|
} finally {
|
|
this.isLoading = false;
|
|
this.updateUI();
|
|
}
|
|
}
|
|
|
|
saveCurrent() {
|
|
if (!this.oraPath) return;
|
|
fetch('/api/save', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ ora_path: this.oraPath })
|
|
});
|
|
}
|
|
|
|
renderLayers() {
|
|
const list = document.getElementById('layersList');
|
|
const controls = document.getElementById('layerControls');
|
|
|
|
list.innerHTML = '';
|
|
|
|
this.layers.forEach(layer => {
|
|
const div = document.createElement('div');
|
|
div.className = 'flex items-center gap-2 bg-gray-700 hover:bg-gray-650 rounded px-2 py-1 cursor-pointer';
|
|
if (this.selectedLayer === layer.name) div.classList.add('bg-gray-600');
|
|
|
|
div.innerHTML = `
|
|
<input type="checkbox" ${layer.visible ? 'checked' : ''} class="w-4 h-4 rounded">
|
|
<span class="flex-1 text-sm truncate">${layer.name}</span>
|
|
`;
|
|
|
|
div.onclick = () => {
|
|
this.selectedLayer = layer.name;
|
|
controls.style.display = 'block';
|
|
this.updateUI();
|
|
};
|
|
|
|
const checkbox = div.querySelector('input');
|
|
checkbox.addEventListener('change', async (e) => {
|
|
await this.toggleVisibility(layer.name, e.target.checked);
|
|
});
|
|
|
|
list.appendChild(div);
|
|
});
|
|
}
|
|
|
|
async toggleVisibility(layerName, visible) {
|
|
const layer = this.layers.find(l => l.name === layerName);
|
|
if (layer) layer.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 })
|
|
});
|
|
this.renderLayers();
|
|
}
|
|
|
|
renameLayer() {
|
|
const oldName = this.selectedLayer;
|
|
const newName = prompt('New name:', oldName);
|
|
if (!newName || newName === oldName) return;
|
|
|
|
const layer = this.layers.find(l => l.name === oldName);
|
|
if (layer) layer.name = newName;
|
|
this.selectedLayer = newName;
|
|
|
|
fetch('/api/layer/rename', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ ora_path: this.oraPath, old_name: oldName, new_name: newName })
|
|
});
|
|
|
|
this.renderLayers();
|
|
}
|
|
|
|
deleteLayer() {
|
|
const layerToDelete = this.selectedLayer;
|
|
if (!confirm('Delete ' + layerToDelete + '?')) return;
|
|
|
|
const idx = this.layers.findIndex(l => l.name === layerToDelete);
|
|
if (idx > -1) this.layers.splice(idx, 1);
|
|
this.selectedLayer = null;
|
|
|
|
fetch('/api/layer/delete', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ ora_path: this.oraPath, layer_name: layerToDelete })
|
|
});
|
|
|
|
document.getElementById('layerControls').style.display = 'none';
|
|
this.renderLayers();
|
|
}
|
|
|
|
async reorderLayer(direction) {
|
|
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]];
|
|
|
|
// Optional: call API to persist
|
|
fetch('/api/layer/reorder', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ ora_path: this.oraPath, layer_name: layerName, direction })
|
|
});
|
|
|
|
this.renderLayers();
|
|
}
|
|
|
|
startDrawing() {
|
|
this.isDrawing = true;
|
|
this.polygonPoints = [];
|
|
document.getElementById('imageContainer').innerHTML += '<div class="absolute inset-0 border-2 border-dashed border-blue-500 pointer-events-none opacity-90"></div>';
|
|
this.updateUI();
|
|
}
|
|
|
|
async updatePolyPreview() {
|
|
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: document.getElementById('polyColor').value,
|
|
width: parseInt(document.getElementById('polyWidth').value)
|
|
})
|
|
});
|
|
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
this.polygonPreviewUrl = data.overlay_url;
|
|
}
|
|
}
|
|
|
|
finishDrawing() {
|
|
this.isDrawing = false;
|
|
if (this.polygonPoints.length >= 3) {
|
|
// Keep the polygon visible
|
|
} else {
|
|
this.clearPolygon();
|
|
}
|
|
this.updateUI();
|
|
}
|
|
|
|
clearPolygon() {
|
|
this.isDrawing = false;
|
|
this.polygonPoints = [];
|
|
this.polygonPreviewUrl = null;
|
|
|
|
// Remove markers from container
|
|
const markers = document.querySelectorAll('.poly-point');
|
|
markers.forEach(m => m.remove());
|
|
|
|
if (this.oraPath) {
|
|
fetch('/api/polygon/clear', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ ora_path: this.oraPath })
|
|
});
|
|
}
|
|
this.updateUI();
|
|
}
|
|
|
|
async extractMask() {
|
|
const subject = document.getElementById('maskSubject').value.trim();
|
|
if (!subject) return;
|
|
|
|
this.isExtracting = true;
|
|
this.updateUI();
|
|
|
|
try {
|
|
const response = await fetch('/api/mask/extract', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
subject: subject,
|
|
use_polygon: document.getElementById('usePolygonHint').checked && this.polygonPoints.length >= 3,
|
|
ora_path: this.oraPath,
|
|
comfy_url: this.comfyUrl
|
|
})
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
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;
|
|
this.renderMaskPreview();
|
|
|
|
} catch (e) {
|
|
document.getElementById('maskError').innerHTML = e.message;
|
|
document.getElementById('maskError').style.display = 'block';
|
|
} finally {
|
|
this.isExtracting = false;
|
|
this.updateUI();
|
|
}
|
|
}
|
|
|
|
renderMaskPreview() {
|
|
const preview = document.getElementById('maskPreview');
|
|
preview.innerHTML = '';
|
|
|
|
const baseImg = document.createElement('img');
|
|
baseImg.src = '/api/image/base?ora_path=' + encodeURIComponent(this.oraPath);
|
|
baseImg.className = 'relative w-full h-auto object-contain';
|
|
preview.appendChild(baseImg);
|
|
|
|
if (this.tempMaskUrl) {
|
|
const overlay = document.createElement('div');
|
|
overlay.className = 'absolute inset-0 bg-green-500 opacity-30 pointer-events-none';
|
|
|
|
const maskImg = document.createElement('img');
|
|
maskImg.src = this.tempMaskUrl;
|
|
maskImg.className = 'w-full h-auto object-contain mix-blend-screen';
|
|
overlay.appendChild(maskImg);
|
|
|
|
preview.appendChild(overlay);
|
|
}
|
|
}
|
|
|
|
reroll() {
|
|
this.extractMask();
|
|
}
|
|
|
|
async useMask() {
|
|
if (!this.tempMaskPath) return;
|
|
|
|
await fetch('/api/layer/add', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
ora_path: this.oraPath,
|
|
entity_name: 'mask',
|
|
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;
|
|
this.renderLayers();
|
|
}
|
|
|
|
this.closeMaskModal();
|
|
}
|
|
|
|
closeMaskModal() {
|
|
this.showMaskModal = false;
|
|
this.tempMaskPath = null;
|
|
this.tempMaskUrl = null;
|
|
document.getElementById('maskModal').style.display = 'none';
|
|
}
|
|
|
|
async openInKrita() {
|
|
if (!this.selectedLayer) {
|
|
alert('Select a layer first');
|
|
return;
|
|
}
|
|
|
|
const response = await fetch('/api/krita/open', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ ora_path: this.oraPath, layer_name: this.selectedLayer })
|
|
});
|
|
|
|
const data = await response.json();
|
|
if (data.success) {
|
|
window.open(data.file_url);
|
|
}
|
|
}
|
|
|
|
showSettings() {
|
|
document.getElementById('settingsModal').style.display = 'flex';
|
|
document.getElementById('comfyUrl').value = this.comfyUrl;
|
|
}
|
|
|
|
hideSettings() {
|
|
document.getElementById('settingsModal').style.display = 'none';
|
|
}
|
|
|
|
saveSettings() {
|
|
this.comfyUrl = document.getElementById('comfyUrl').value.trim();
|
|
localStorage.setItem('ora_comfy_url', this.comfyUrl);
|
|
this.hideSettings();
|
|
}
|
|
|
|
showError(msg) {
|
|
const el = document.getElementById('errorMessage');
|
|
el.innerHTML = msg;
|
|
el.style.display = 'block';
|
|
}
|
|
}
|
|
|
|
// Initialize editor
|
|
const ora = new ORAEditor();
|
|
</script>
|
|
</body>
|
|
</html>
|