ora editor

This commit is contained in:
2026-03-27 23:33:04 -07:00
parent cdc9ca2f92
commit c94988561c
36 changed files with 1564 additions and 125 deletions

View File

@@ -17,6 +17,40 @@
</div>
</template>
<!-- SAM Include points (green) -->
<template x-if="mode === 'add' && isSamMode">
<template x-for="(point, idx) in samIncludePoints" :key="'sam-include-' + idx">
<div
class="absolute w-5 h-5 bg-green-500 border-2 border-white rounded-full cursor-move z-20 flex items-center justify-center text-xs font-bold text-white"
style="transform: translate(-50%, -50%);"
:style="`left: ${point.x * 100}%; top: ${point.y * 100}%`"
@contextmenu.prevent="removeSamPoint('include', idx)"
x-text="idx + 1"
></div>
</template>
</template>
<!-- SAM Exclude points (red) -->
<template x-if="mode === 'add' && isSamMode">
<template x-for="(point, idx) in samExcludePoints" :key="'sam-exclude-' + idx">
<div
class="absolute w-5 h-5 bg-red-500 border-2 border-white rounded-full cursor-move z-20 flex items-center justify-center text-xs font-bold text-white"
style="transform: translate(-50%, -50%);"
:style="`left: ${point.x * 100}%; top: ${point.y * 100}%`"
@contextmenu.prevent="removeSamPoint('exclude', idx)"
x-text="'X'"
></div>
</template>
</template>
<!-- SAM mask preview overlay -->
<img
x-show="samMaskUrl"
:src="samMaskUrl"
class="absolute inset-0 w-full h-full object-contain pointer-events-none z-15 opacity-50"
alt="SAM mask preview"
>
<!-- 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">
@@ -46,6 +80,15 @@
:height="imageHeight"
class="absolute inset-0 cursor-crosshair pointer-events-auto border-2 border-dashed border-blue-500 opacity-90"
></canvas>
<!-- SAM click canvas -->
<div
x-show="isSamMode"
id="samCanvas"
class="absolute inset-0 cursor-crosshair z-10"
@click="handleSamClick($event)"
@contextmenu.prevent="handleSamRightClick($event)"
></div>
</div>
@@ -60,13 +103,16 @@
<div x-show="error" class="text-red-400 text-center mt-8" x-text="error"></div>
<!-- Mode-specific instructions -->
<div x-show="isSamMode" class="mt-2 text-sm text-gray-400">
Left-click to add include points (green). Right-click to add exclude points (red). Right-click on point to remove.
</div>
<div x-show="isDrawing" class="mt-2 text-sm text-gray-400">
Click to add points. Drag points to adjust. Double-click or Enter to finish, Escape to cancel.
</div>
<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 x-show="mode === 'add' && !isDrawing && !polygonPreviewUrl && polygonPoints.length < 3 && !isSamMode" class="mt-2 text-sm text-gray-400">
Use SAM rough mask or draw a polygon, then extract mask.
</div>
</main>