From 17da8c475e11073ac2e67ed6cada338fa2fb66b4 Mon Sep 17 00:00:00 2001
From: Bryce <bryce@brycecovertoperations.com>
Date: Fri, 27 Mar 2026 17:34:00 -0700
Subject: [PATCH] Add draggable polygon points, save notification, and fix
 Krita open

- 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
---
 tools/ora_editor/templates/editor.html | 150 ++++++++++++++++++++++---
 1 file changed, 135 insertions(+), 15 deletions(-)

diff --git a/tools/ora_editor/templates/editor.html b/tools/ora_editor/templates/editor.html
index 7b5f91a..682ba48 100644
--- a/tools/ora_editor/templates/editor.html
+++ b/tools/ora_editor/templates/editor.html
@@ -50,6 +50,14 @@
                 :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">
@@ -231,11 +239,17 @@
                             </div>
                         </template>
                         
-                        <!-- Polygon points markers when drawing -->
-                        <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>
+                        <!-- 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 -->
@@ -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,
@@ -458,12 +505,23 @@
 
             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;