notid/ai-game-2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add draggable polygon points, save notification, and fix Krita open

Browse Source 
- 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
This commit is contained in:
Bryce
2026-03-27 17:34:00 -07:00
parent 61c8200443
commit 17da8c475e
1 changed files with 135 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

146
tools/ora_editor/templates/editor.html
View File

@@ -51,6 +51,14 @@
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>
@@ -231,11 +239,17 @@
</div>
</template>
<!-- Polygon points markers when drawing -->
<!-- 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-3 h-3 bg-white border-2 border-red-500 rounded-full transform -translate-x-1/2 -translate-y-1/2 pointer-events-none z-10"
:style="`left: ${point.x * 100}%; top: ${point.y * 100}%`">
</div>
<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 -->
@@ -269,9 +283,12 @@
<!-- Mode-specific instructions -->
<div x-show="isDrawing" class="mt-2 text-sm text-gray-400">
Click on image to add points. Double-click or Enter to finish, Escape to cancel.
Click to add points. Drag points to adjust. Double-click or Enter to finish, Escape to cancel.
</div>
<div x-show="mode === 'add' && !isDrawing && !polygonPreviewUrl" class="mt-2 text-sm text-gray-400">
<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>
@@ -355,6 +372,30 @@
</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 -->
@@ -402,6 +443,12 @@
// 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,
@@ -459,11 +506,22 @@
async saveCurrent() {
if (!this.oraPath) return;
await fetch('/api/save', {
// 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: this.oraPath })
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() {
@@ -600,13 +658,58 @@
addPolygonPoint(x, y) {
if (!this.isDrawing) return;
x = Math.max(0, Math.min(1, x));
y = Math.max(0, Math.min(1, y));
// 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;
@@ -824,12 +927,28 @@
const data = await response.json();
if (data.success) {
window.open(data.file_url);
// 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;
@@ -859,8 +978,9 @@
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));
// 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;