944 lines
32 KiB
HTML
944 lines
32 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block body %}
|
|
<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="openBrowseModal()"
|
|
class="bg-gray-600 hover:bg-gray-500 px-3 py-2 rounded transition"
|
|
title="Browse files"
|
|
>
|
|
📁 Browse
|
|
</button>
|
|
<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 -->
|
|
<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 -->
|
|
<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 -->
|
|
<aside class="w-72 flex-shrink-0 space-y-4">
|
|
{% include "components/sidebar.html" %}
|
|
</aside>
|
|
|
|
<!-- MAIN CANVAS AREA -->
|
|
{% include "components/canvas.html" %}
|
|
</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>
|
|
|
|
<!-- Modals -->
|
|
{% include "modals/browse.html" %}
|
|
{% include "modals/settings.html" %}
|
|
{% include "modals/mask_preview.html" %}
|
|
{% include "modals/krita.html" %}
|
|
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<!-- Alpine.js data object -->
|
|
<script>
|
|
function oraEditor() {
|
|
return {
|
|
// File state
|
|
filePath: '',
|
|
oraPath: '',
|
|
layers: [],
|
|
|
|
// Image dimensions
|
|
imageWidth: 800,
|
|
imageHeight: 600,
|
|
|
|
// Display scale
|
|
scale: 25,
|
|
|
|
// Mode: 'review' or 'add'
|
|
mode: 'review',
|
|
|
|
// Selected layer for editing
|
|
selectedLayer: null,
|
|
|
|
// Add masked element mode
|
|
entityName: '',
|
|
|
|
// Polygon state
|
|
isDrawing: false,
|
|
polygonPoints: [],
|
|
polygonColor: '#FF0000',
|
|
polygonWidth: 2,
|
|
polygonPreviewUrl: null,
|
|
|
|
// SAM rough mask state
|
|
isSamMode: false,
|
|
samIncludePoints: [],
|
|
samExcludePoints: [],
|
|
isSamGenerating: false,
|
|
samMaskPath: null,
|
|
samMaskUrl: null,
|
|
useSamAsStart: true,
|
|
|
|
// Mask extraction
|
|
maskSubject: '',
|
|
usePolygonHint: true,
|
|
maskCount: 3,
|
|
isExtracting: false,
|
|
maskViewMode: 'with-bg',
|
|
showMaskModal: false,
|
|
tempMaskPath: null,
|
|
tempMaskUrl: null,
|
|
tempMaskPaths: [],
|
|
currentMaskIndex: 0,
|
|
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,
|
|
|
|
// Browse modal
|
|
showBrowseModal: false,
|
|
browsePath: '',
|
|
browseDirectories: [],
|
|
browseFiles: [],
|
|
browseSelectedPath: null,
|
|
|
|
// 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();
|
|
});
|
|
},
|
|
|
|
// === File Browser ===
|
|
async openBrowseModal() {
|
|
this.browsePath = '';
|
|
this.browseSelectedPath = null;
|
|
await this.loadBrowseDirectory('');
|
|
this.showBrowseModal = true;
|
|
},
|
|
|
|
closeBrowseModal() {
|
|
this.showBrowseModal = false;
|
|
},
|
|
|
|
async loadBrowseDirectory(path) {
|
|
try {
|
|
const response = await fetch('/api/browse?path=' + encodeURIComponent(path));
|
|
const data = await response.json();
|
|
|
|
if (data.success) {
|
|
this.browsePath = data.current_path;
|
|
this.browseDirectories = data.directories;
|
|
this.browseFiles = data.files;
|
|
} else {
|
|
console.error('Browse error:', data.error);
|
|
}
|
|
} catch (e) {
|
|
console.error('Browse error:', e);
|
|
}
|
|
},
|
|
|
|
navigateBrowseDirectory(path) {
|
|
this.browseSelectedPath = null;
|
|
this.loadBrowseDirectory(path);
|
|
},
|
|
|
|
navigateBrowseParent() {
|
|
const parent = this.browsePath.split('/').slice(0, -1).join('/');
|
|
this.browseSelectedPath = null;
|
|
this.loadBrowseDirectory(parent);
|
|
},
|
|
|
|
selectBrowseFile(file) {
|
|
this.browseSelectedPath = file.path;
|
|
},
|
|
|
|
openBrowseFile(file) {
|
|
this.filePath = file.path;
|
|
this.showBrowseModal = false;
|
|
this.openFile();
|
|
},
|
|
|
|
openSelectedFile() {
|
|
if (this.browseSelectedPath) {
|
|
this.filePath = this.browseSelectedPath;
|
|
this.showBrowseModal = false;
|
|
this.openFile();
|
|
}
|
|
},
|
|
|
|
// === File Operations ===
|
|
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';
|
|
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;
|
|
|
|
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);
|
|
}
|
|
},
|
|
|
|
// === Mode Management ===
|
|
enterAddMode() {
|
|
console.log('[ORA EDITOR] Entering add masked element mode');
|
|
this.mode = 'add';
|
|
this.entityName = '';
|
|
this.maskSubject = '';
|
|
this.clearPolygon();
|
|
this.clearSamPoints();
|
|
this.scale = 100;
|
|
},
|
|
|
|
exitAddMode() {
|
|
console.log('[ORA EDITOR] Exiting add masked element mode');
|
|
this.mode = 'review';
|
|
this.isDrawing = false;
|
|
this.polygonPoints = [];
|
|
this.polygonPreviewUrl = null;
|
|
this.isSamMode = false;
|
|
this.samIncludePoints = [];
|
|
this.samExcludePoints = [];
|
|
this.samMaskPath = null;
|
|
this.samMaskUrl = null;
|
|
const canvas = document.getElementById('polygonCanvas');
|
|
if (canvas) {
|
|
canvas.style.display = 'none';
|
|
}
|
|
},
|
|
|
|
async cancelAddMode() {
|
|
if (this.isDrawing) {
|
|
this.clearPolygon();
|
|
} else if (this.isSamMode) {
|
|
this.isSamMode = false;
|
|
} else {
|
|
this.exitAddMode();
|
|
}
|
|
},
|
|
|
|
// === Layer Operations ===
|
|
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
|
|
})
|
|
});
|
|
},
|
|
|
|
// === Polygon Drawing ===
|
|
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;
|
|
|
|
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;
|
|
}
|
|
|
|
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);
|
|
|
|
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 })
|
|
});
|
|
}
|
|
},
|
|
|
|
// === SAM Rough Mask ===
|
|
startSamMode() {
|
|
console.log('[ORA EDITOR] Starting SAM mode');
|
|
this.isSamMode = true;
|
|
this.samIncludePoints = [];
|
|
this.samExcludePoints = [];
|
|
this.samMaskPath = null;
|
|
this.samMaskUrl = null;
|
|
},
|
|
|
|
clearSamPoints() {
|
|
this.samIncludePoints = [];
|
|
this.samExcludePoints = [];
|
|
this.samMaskPath = null;
|
|
this.samMaskUrl = null;
|
|
},
|
|
|
|
handleSamClick(e) {
|
|
if (!this.isSamMode) 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;
|
|
|
|
x = Math.max(0, Math.min(1, x));
|
|
y = Math.max(0, Math.min(1, y));
|
|
|
|
this.samIncludePoints.push({ x, y });
|
|
console.log('[SAM] Added include point:', x, y);
|
|
},
|
|
|
|
handleSamRightClick(e) {
|
|
if (!this.isSamMode) return;
|
|
e.preventDefault();
|
|
|
|
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;
|
|
|
|
x = Math.max(0, Math.min(1, x));
|
|
y = Math.max(0, Math.min(1, y));
|
|
|
|
this.samExcludePoints.push({ x, y });
|
|
console.log('[SAM] Added exclude point:', x, y);
|
|
},
|
|
|
|
removeSamPoint(type, idx) {
|
|
if (type === 'include') {
|
|
this.samIncludePoints.splice(idx, 1);
|
|
} else {
|
|
this.samExcludePoints.splice(idx, 1);
|
|
}
|
|
},
|
|
|
|
async generateSamMask() {
|
|
if (this.samIncludePoints.length === 0 || !this.oraPath) return;
|
|
|
|
console.log('[ORA EDITOR] Generating SAM mask with', this.samIncludePoints.length, 'include points');
|
|
this.isSamGenerating = true;
|
|
|
|
try {
|
|
const response = await fetch('/api/sam/generate', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
ora_path: this.oraPath,
|
|
include_points: this.samIncludePoints,
|
|
exclude_points: this.samExcludePoints,
|
|
comfy_url: this.comfyUrl
|
|
})
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
console.log('[ORA EDITOR] SAM response:', data);
|
|
|
|
if (!data.success) throw new Error(data.error || 'Failed');
|
|
|
|
this.samMaskPath = data.mask_path;
|
|
this.samMaskUrl = data.mask_url;
|
|
this.isSamMode = false;
|
|
} catch (e) {
|
|
console.error('[ORA EDITOR] Error generating SAM mask:', e);
|
|
this.lastError = e.message;
|
|
} finally {
|
|
this.isSamGenerating = false;
|
|
}
|
|
},
|
|
|
|
useSamMask() {
|
|
if (this.samMaskPath) {
|
|
this.tempMaskPath = this.samMaskPath;
|
|
this.tempMaskUrl = this.samMaskUrl;
|
|
this.tempMaskPaths = [this.samMaskPath];
|
|
this.currentMaskIndex = 0;
|
|
this.showMaskModal = true;
|
|
}
|
|
},
|
|
|
|
discardSamMask() {
|
|
this.samMaskPath = null;
|
|
this.samMaskUrl = null;
|
|
this.samIncludePoints = [];
|
|
this.samExcludePoints = [];
|
|
},
|
|
|
|
// === Mask Extraction ===
|
|
async extractMask() {
|
|
if (!this.maskSubject.trim()) return;
|
|
|
|
console.log('[ORA EDITOR] Extracting', this.maskCount, 'masks for:', this.maskSubject);
|
|
this.isExtracting = true;
|
|
this.lastError = '';
|
|
|
|
const requestBody = {
|
|
subject: this.maskSubject,
|
|
use_polygon: this.usePolygonHint && this.polygonPoints.length >= 3,
|
|
ora_path: this.oraPath,
|
|
comfy_url: this.comfyUrl,
|
|
count: this.maskCount
|
|
};
|
|
|
|
if (this.useSamAsStart && this.samMaskPath) {
|
|
requestBody.start_mask_path = this.samMaskPath;
|
|
console.log('[ORA EDITOR] Using SAM mask as starting point:', this.samMaskPath);
|
|
}
|
|
|
|
try {
|
|
const response = await fetch('/api/mask/extract', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(requestBody)
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
console.log('[ORA EDITOR] Mask extraction response:', data);
|
|
|
|
if (!data.success) throw new Error(data.error || 'Failed');
|
|
|
|
this.tempMaskPaths = data.mask_paths || [data.mask_path];
|
|
this.currentMaskIndex = 0;
|
|
this.tempMaskPath = this.tempMaskPaths[0];
|
|
this.tempMaskUrl = data.mask_urls?.[0] || '/api/file/mask?path=' + encodeURIComponent(this.tempMaskPath);
|
|
this.showMaskModal = true;
|
|
} catch (e) {
|
|
console.error('[ORA EDITOR] Error extracting mask:', e);
|
|
this.lastError = e.message;
|
|
} finally {
|
|
this.isExtracting = false;
|
|
}
|
|
},
|
|
|
|
get currentMaskPath() {
|
|
return this.tempMaskPaths[this.currentMaskIndex] || null;
|
|
},
|
|
|
|
previousMask() {
|
|
if (this.currentMaskIndex > 0) {
|
|
this.currentMaskIndex--;
|
|
this.tempMaskPath = this.tempMaskPaths[this.currentMaskIndex];
|
|
}
|
|
},
|
|
|
|
nextMask() {
|
|
if (this.currentMaskIndex < this.tempMaskPaths.length - 1) {
|
|
this.currentMaskIndex++;
|
|
this.tempMaskPath = this.tempMaskPaths[this.currentMaskIndex];
|
|
}
|
|
},
|
|
|
|
rerollMasks() {
|
|
this.extractMask();
|
|
},
|
|
|
|
async useCurrentMask() {
|
|
if (!this.currentMaskPath) 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, 'with mask:', this.currentMaskPath);
|
|
|
|
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.currentMaskPath
|
|
})
|
|
});
|
|
|
|
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;
|
|
this.tempMaskPaths = [];
|
|
this.currentMaskIndex = 0;
|
|
},
|
|
|
|
// === Krita Integration ===
|
|
async openInKrita() {
|
|
if (!this.oraPath) return;
|
|
|
|
let requestBody;
|
|
|
|
if (this.mode === 'review') {
|
|
requestBody = {
|
|
ora_path: this.oraPath,
|
|
open_full_ora: true
|
|
};
|
|
} else {
|
|
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) {
|
|
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;
|
|
},
|
|
|
|
// === Settings ===
|
|
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', () => {
|
|
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;
|
|
|
|
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();
|
|
}
|
|
});
|
|
|
|
setTimeout(() => { canvasDoubleClickPending = false; }, 200);
|
|
}
|
|
});
|
|
|
|
observer.observe(document.body, { childList: true, subtree: true });
|
|
});
|
|
</script>
|
|
{% endblock %} |