changes

2026-04-04 06:41:02 -07:00
parent 3fc5e9f215
commit 078b3a4cdd
26 changed files with 704 additions and 249 deletions
--- a/tools/ora_editor/templates/components/sidebar.html
+++ b/tools/ora_editor/templates/components/sidebar.html
@@ -1,8 +1,34 @@
 <!-- Sidebar component for ORA Editor -->

+<!-- Scale slider (mobile only) -->
+<div x-show="oraPath" class="lg:hidden bg-gray-800 rounded p-3 border border-gray-700 mb-4">
+    <div class="flex justify-between mb-2">
+        <span class="text-sm text-gray-300">Scale:</span>
+        <span class="text-sm text-gray-300" x-text="scale + '%'"></span>
+    </div>
+    <input 
+        type="range" 
+        x-model.number="scale" 
+        min="10" 
+        max="100" 
+        step="5"
+        class="w-full accent-blue-500 h-2 lg:h-auto mb-2 touch-manipulation"
+    >
+    <div class="flex gap-2">
+        <button @click="scale = 25" class="flex-1 bg-gray-700 hover:bg-gray-600 px-2 py-1 rounded text-sm min-h-[2.5rem] touch-manipulation">25%</button>
+        <button @click="scale = 50" class="flex-1 bg-gray-700 hover:bg-gray-600 px-2 py-1 rounded text-sm min-h-[2.5rem] touch-manipulation">50%</button>
+        <button @click="scale = 100" class="flex-1 bg-gray-700 hover:bg-gray-600 px-2 py-1 rounded text-sm min-h-[2.5rem] touch-manipulation">100%</button>
+    </div>
+</div>
+
 <!-- REVIEW MODE SIDEBAR -->
 <template x-if="mode === 'review'">
 <div>
+    <!-- Close dock button (mobile only) -->
+    <div class="lg:hidden flex justify-end mb-2">
+        <button @click="showDock = false" class="bg-gray-700 hover:bg-gray-600 px-3 py-2 rounded min-h-[2.5rem] touch-manipulation">✕ Close Dock</button>
+    </div>
+    
    <!-- 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>
@@ -29,12 +55,12 @@
        <!-- Layer edit 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>
+                <button @click="renameLayer()" class="bg-gray-600 hover:bg-gray-500 px-2 py-1 rounded text-sm min-h-[2.5rem] touch-manipulation">Rename</button>
+                <button @click="deleteLayer()" class="bg-red-600 hover:bg-red-700 px-2 py-1 rounded text-sm min-h-[2.5rem] touch-manipulation">Delete</button>
            </div>
            <div class="grid grid-cols-2 gap-2">
-                <button @click="reorderLayer('up')" class="bg-gray-600 hover:bg-gray-500 px-2 py-1 rounded text-sm">▲ Up</button>
-                <button @click="reorderLayer('down')" class="bg-gray-600 hover:bg-gray-500 px-2 py-1 rounded text-sm">▼ Down</button>
+                <button @click="reorderLayer('up')" class="bg-gray-600 hover:bg-gray-500 px-2 py-1 rounded text-sm min-h-[2.5rem] touch-manipulation">▲ Up</button>
+                <button @click="reorderLayer('down')" class="bg-gray-600 hover:bg-gray-500 px-2 py-1 rounded text-sm min-h-[2.5rem] touch-manipulation">▼ Down</button>
            </div>
        </div>
    </div>
@@ -42,7 +68,7 @@
    <!-- Add masked element button -->
    <button 
        @click="enterAddMode()"
-        class="w-full bg-indigo-600 hover:bg-indigo-700 px-4 py-3 rounded-lg font-bold text-lg"
+        class="w-full bg-indigo-600 hover:bg-indigo-700 px-4 py-3 rounded-lg font-bold text-lg min-h-[3rem] touch-manipulation"
    >
        + Add Masked Element
    </button>
@@ -52,6 +78,11 @@
 <!-- ADD MASKED ELEMENT MODE SIDEBAR -->
 <template x-if="mode === 'add'">
 <div>
+    <!-- Close dock button (mobile only) -->
+    <div class="lg:hidden flex justify-end mb-2">
+        <button @click="showDock = false" class="bg-gray-700 hover:bg-gray-600 px-3 py-2 rounded min-h-[2.5rem] touch-manipulation">✕ Close Dock</button>
+    </div>
+    
    <!-- Entity name input -->
    <div class="bg-gray-800 rounded-lg p-4 border border-gray-700">
        <h3 class="font-bold mb-3 text-gray-300">New Element</h3>
@@ -86,14 +117,14 @@
                <button 
                    @click="startSamMode()" 
                    :disabled="isSamMode"
-                    class="flex-1 bg-teal-600 hover:bg-teal-700 disabled:bg-gray-600 px-3 py-1.5 rounded text-sm transition"
+                    class="flex-1 bg-teal-600 hover:bg-teal-700 disabled:bg-gray-600 px-3 py-2 rounded text-sm transition min-h-[2.5rem] touch-manipulation"
                >
                    Start
                </button>
                <button 
                    @click="clearSamPoints()" 
                    :disabled="samIncludePoints.length === 0 && samExcludePoints.length === 0"
-                    class="bg-gray-600 hover:bg-gray-500 disabled:bg-gray-700 px-3 py-1.5 rounded text-sm transition"
+                    class="bg-gray-600 hover:bg-gray-500 disabled:bg-gray-700 px-3 py-2 rounded text-sm transition min-h-[2.5rem] touch-manipulation"
                >
                    Clear
                </button>
@@ -102,7 +133,7 @@
            <button 
                @click="generateSamMask()"
                :disabled="samIncludePoints.length === 0 || isSamGenerating"
-                class="w-full bg-teal-600 hover:bg-teal-700 disabled:bg-gray-600 px-4 py-2 rounded transition flex items-center justify-center gap-2"
+                class="w-full bg-teal-600 hover:bg-teal-700 disabled:bg-gray-600 px-4 py-2 rounded transition flex items-center justify-center gap-2 min-h-[2.5rem] touch-manipulation"
            >
                <span x-show="isSamGenerating" class="animate-spin rounded-full h-4 w-4 border-t-2 border-b-2 border-white"></span>
                <span x-show="!isSamGenerating">Generate Rough Mask</span>
@@ -136,7 +167,7 @@
                
                <button 
                    @click="discardRoughMask()"
-                    class="w-full bg-gray-600 hover:bg-gray-500 px-3 py-1.5 rounded text-sm"
+                    class="w-full bg-gray-600 hover:bg-gray-500 px-3 py-2 rounded text-sm min-h-[2.5rem] touch-manipulation"
                >
                    Discard & Start Over
                </button>
@@ -155,15 +186,15 @@
            <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="isDrawing" 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>
+                <button @click="startDrawing()" :disabled="isDrawing" class="flex-1 bg-blue-600 hover:bg-blue-700 disabled:bg-gray-600 px-3 py-2 rounded text-sm transition min-h-[2.5rem] touch-manipulation">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-2 rounded text-sm transition min-h-[2.5rem] touch-manipulation">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>
+            <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-2 rounded text-sm transition min-h-[2.5rem] touch-manipulation">Clear</button>
        </div>
    </div>

@@ -238,7 +269,7 @@
            <button 
                @click="extractMask()"
                :disabled="!maskSubject.trim() || isExtracting"
-                class="w-full bg-indigo-600 hover:bg-indigo-700 disabled:bg-gray-600 px-4 py-2 rounded transition flex items-center justify-center gap-2"
+                class="w-full bg-indigo-600 hover:bg-indigo-700 disabled:bg-gray-600 px-4 py-2 rounded transition flex items-center justify-center gap-2 min-h-[2.5rem] touch-manipulation"
            >
                <span x-show="isExtracting" class="animate-spin rounded-full h-4 w-4 border-t-2 border-b-2 border-white"></span>
                <span x-show="!isExtracting">Generate Mask<span x-show="maskCount > 1">s</span></span>
@@ -252,7 +283,7 @@
    <!-- Back to review mode -->
    <button 
        @click="cancelAddMode()"
-        class="w-full bg-gray-600 hover:bg-gray-500 px-4 py-2 rounded-lg"
+        class="w-full bg-gray-600 hover:bg-gray-500 px-4 py-2 rounded-lg min-h-[2.5rem] touch-manipulation"
    >
        ← Back to Review Mode
    </button>