+
-
-
+
+
{% include "components/sidebar.html" %}
- {% include "components/canvas.html" %}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Left-click to add include points (green). Right-click to add exclude points (red). Right-click on point to remove.
+
+
+ Click to add points. Drag points to adjust. Double-click or Enter to finish, Escape to cancel.
+
+
+ Drag points to adjust polygon, then extract mask or open in Krita.
+
+
+ Use SAM rough mask or draw a polygon, then extract mask.
+
+
@@ -113,6 +309,10 @@ function oraEditor() {
scale: 25,
+ showMenu: false,
+ showDock: true,
+ previousScale: 25, // Remember scale when switching modes
+
mode: 'review',
selectedLayer: null,
@@ -162,6 +362,14 @@ function oraEditor() {
isLoading: false,
error: '',
+
+ get scaledWidth() {
+ return this.imageWidth * (this.scale / 100);
+ },
+
+ get scaledHeight() {
+ return this.imageHeight * (this.scale / 100);
+ },
init() {
console.log('ORA Editor initialized');
@@ -169,6 +377,12 @@ function oraEditor() {
this.$watch('scale', (newScale) => {
this.roughMaskThumbnailScale = newScale;
});
+ // Close dock when exiting add mode on mobile
+ this.$watch('mode', (newMode) => {
+ if (newMode === 'review' && window.innerWidth < 1024) {
+ this.showDock = true;
+ }
+ });
},
setupKeyHandlers() {
@@ -297,6 +511,7 @@ function oraEditor() {
enterAddMode() {
console.log('[ORA EDITOR] Entering add masked element mode');
+ this.previousScale = this.scale; // Save current scale
this.mode = 'add';
this.entityName = '';
this.maskSubject = '';
@@ -308,6 +523,7 @@ function oraEditor() {
exitAddMode() {
console.log('[ORA EDITOR] Exiting add masked element mode');
this.mode = 'review';
+ this.scale = this.previousScale; // Restore previous scale
this.isDrawing = false;
this.polygonPoints = [];
this.polygonPreviewUrl = null;
@@ -316,7 +532,6 @@ function oraEditor() {
this.samExcludePoints = [];
this.roughMaskPath = null;
this.roughMaskUrl = null;
- this.roughMaskThumbnailScale = 25;
const canvas = document.getElementById('polygonCanvas');
if (canvas) {
canvas.style.display = 'none';
@@ -431,18 +646,34 @@ function oraEditor() {
setupCanvas() {
const canvas = document.getElementById('polygonCanvas');
- if (!canvas) return;
+ const container = document.getElementById('imageContainer');
+ if (!canvas || !container) return;
- canvas.width = this.imageWidth;
- canvas.height = this.imageHeight;
+ // Match canvas to ACTUAL RENDERED container dimensions
+ // The container may be constrained by viewport/CSS even with explicit pixel width
+ const rect = container.getBoundingClientRect();
+ canvas.width = rect.width;
+ canvas.height = rect.height;
+
+ console.log('[SETUP CANVAS]', {
+ scaledWidth: this.scaledWidth,
+ scaledHeight: this.scaledHeight,
+ actualWidth: rect.width,
+ actualHeight: rect.height,
+ constrained: rect.width !== this.scaledWidth || rect.height !== this.scaledHeight
+ });
},
addPolygonPoint(x, y) {
if (!this.isDrawing) return;
+ console.log('[ADD POINT] Before clamp:', {x, y});
+
x = Math.max(-0.1, Math.min(1.1, x));
y = Math.max(-0.1, Math.min(1.1, y));
+ console.log('[ADD POINT] After clamp:', {x, y}, 'Total points:', this.polygonPoints.length + 1);
+
this.polygonPoints.push({ x, y });
this.drawPolygonOnCanvas();
},
@@ -491,11 +722,23 @@ function oraEditor() {
drawPolygonOnCanvas() {
const canvas = document.getElementById('polygonCanvas');
+ const container = document.getElementById('imageContainer');
if (!canvas || this.polygonPoints.length < 2) return;
const ctx = canvas.getContext('2d');
if (!ctx) return;
+ // Check if canvas dimensions match actual container size
+ // Container may be constrained by viewport
+ if (container) {
+ const rect = container.getBoundingClientRect();
+ if (canvas.width !== rect.width || canvas.height !== rect.height) {
+ console.log('[DRAW] Resizing canvas to match container:', rect.width, 'x', rect.height);
+ canvas.width = rect.width;
+ canvas.height = rect.height;
+ }
+ }
+
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
@@ -946,6 +1189,15 @@ document.addEventListener('alpine:init', () => {
let x = (e.clientX - rect.left) / rect.width;
let y = (e.clientY - rect.top) / rect.height;
+ // Debug logging
+ console.log('[CANVAS CLICK]', {
+ clientX: e.clientX, clientY: e.clientY,
+ rectLeft: rect.left, rectTop: rect.top,
+ rectWidth: rect.width, rectHeight: rect.height,
+ calculatedX: x, calculatedY: y,
+ canvasWidth: canvas.width, canvasHeight: canvas.height
+ });
+
x = Math.max(-0.1, Math.min(1.1, x));
y = Math.max(-0.1, Math.min(1.1, y));
diff --git a/tools/ora_editor/templates/modals/browse.html b/tools/ora_editor/templates/modals/browse.html
index a224476..d34c478 100644
--- a/tools/ora_editor/templates/modals/browse.html
+++ b/tools/ora_editor/templates/modals/browse.html
@@ -1,14 +1,25 @@
-
-
-
Open File
-
- Current:
+ class="fixed inset-0 z-[50] pt-12 lg:pt-0">
+
+
+
+
+
✕
+
+
+
+
+
+
Open File
+
+ Current:
-
@@ -54,15 +65,16 @@
-
-
Cancel
+
Open Selected
+ Cancel
+
diff --git a/tools/ora_editor/templates/modals/krita.html b/tools/ora_editor/templates/modals/krita.html
index 96e2285..e15eaba 100644
--- a/tools/ora_editor/templates/modals/krita.html
+++ b/tools/ora_editor/templates/modals/krita.html
@@ -1,24 +1,38 @@
-
-
Open in Krita
-
-
File exported to:
-
-
-
-
Copy the path and open it in Krita manually. Browsers cannot open local files directly.
-
-
-
-
Close
+ class="fixed inset-0 z-[50] pt-12 lg:pt-0">
+
+
+
+
+
✕
+
+
+
+
+
Open in Krita (Desktop Only)
+
+
⚠️ This feature only works on desktop. Mobile browsers cannot export to local filesystem.
+
+
File exported to:
+
+
+
+
Copy the path and open it in Krita manually. Browsers cannot open local files directly.
+
+
+ Close
+
\ No newline at end of file
diff --git a/tools/ora_editor/templates/modals/mask_preview.html b/tools/ora_editor/templates/modals/mask_preview.html
index 254d4ef..e61eabe 100644
--- a/tools/ora_editor/templates/modals/mask_preview.html
+++ b/tools/ora_editor/templates/modals/mask_preview.html
@@ -1,71 +1,99 @@
-
-
-
- Extracted Mask
-
- (
-
-
-
+ class="fixed inset-0 z-[50] pt-12 lg:pt-0">
+
+
+
+
+
✕
+
+
+
+
+
+
+ Extracted Mask
+
+ (
+
+
+
+ With Background
+ Masked Only
+
+
+
+
+
+
With Background
+ @click="previousMask()"
+ :disabled="currentMaskIndex <= 0"
+ class="bg-gray-800 hover:bg-gray-600 disabled:bg-gray-700 rounded w-12 h-12 flex items-center justify-center text-2xl min-h-[3rem] touch-manipulation"
+ >←
+ Mask
Masked Only
+ @click="nextMask()"
+ :disabled="currentMaskIndex >= tempMaskPaths.length - 1"
+ class="bg-gray-800 hover:bg-gray-600 disabled:bg-gray-700 rounded w-12 h-12 flex items-center justify-center text-2xl min-h-[3rem] touch-manipulation"
+ >→
+
+
+
+
+
+
+
+
+
+
-
-
+
←
-
-
-
-
-
-
-
-
-
+ @click="useCurrentMask()"
+ :disabled="isExtracting || !currentMaskPath"
+ class="w-full bg-green-600 hover:bg-green-700 disabled:bg-gray-600 px-4 py-2 rounded transition min-h-[2.5rem] touch-manipulation"
+ >Use This Mask
→
-
-
-
-
+ @click="rerollMasks()"
+ :disabled="isExtracting"
+ class="w-full bg-gray-600 hover:bg-gray-500 disabled:bg-gray-700 px-4 py-2 rounded transition flex items-center justify-center gap-2 min-h-[2.5rem] touch-manipulation"
+ >
- Use This Mask
- Cancel
+ Cancel
+
\ No newline at end of file
diff --git a/tools/ora_editor/templates/modals/settings.html b/tools/ora_editor/templates/modals/settings.html
index 68c3483..e1b61a2 100644
--- a/tools/ora_editor/templates/modals/settings.html
+++ b/tools/ora_editor/templates/modals/settings.html
@@ -1,9 +1,20 @@
-
-
Settings
+ class="fixed inset-0 z-[50] pt-12 lg:pt-0">
+
+
+
+
+
✕
+
+
+
+
+
Settings
ComfyUI Server URL
@@ -11,13 +22,14 @@
type="text"
x-model="comfyUrl"
placeholder="127.0.0.1:8188"
- class="w-full bg-gray-700 border border-gray-600 rounded px-3 py-2 text-white focus:outline-none focus:border-blue-500"
+ class="w-full bg-gray-700 border border-gray-600 rounded px-3 py-2 text-white focus:outline-none focus:border-blue-500 min-h-[2.5rem] touch-manipulation"
>
-
-
Cancel
-
Save
+
+ Save
+ Cancel
+
\ No newline at end of file