Bryce
fb812e57bc
- Split app.py into route blueprints (files, layers, images, polygon, mask, krita) - Create services layer (polygon_storage, comfyui, file_browser) - Extract config constants to config.py - Split templates into Jinja partials (base, components, modals) - Add browse dialog for visual file navigation - Add /api/browse endpoint for directory listing
72 lines
3.4 KiB
HTML
72 lines
3.4 KiB
HTML
<!-- Main canvas area component for ORA Editor -->
|
|
|
|
<main class="flex-1 bg-gray-800 rounded-lg border border-gray-700 p-4 relative overflow-auto" style="min-height: 600px;">
|
|
|
|
<div id="imageContainer"
|
|
class="relative inline-block origin-top-left"
|
|
:style="`width: ${imageWidth}px; height: ${imageHeight}px; transform: scale(${scale / 100});`">
|
|
|
|
<!-- Layer images stacked -->
|
|
<div class="relative w-full h-full">
|
|
<template x-for="layer in layers" :key="'layer-' + layer.name">
|
|
<div x-show="layer.visible" class="absolute inset-0 w-full h-full">
|
|
<img
|
|
:src="'/api/image/layer/' + encodeURIComponent(layer.name) + '?ora_path=' + encodeURIComponent(oraPath)"
|
|
class="absolute inset-0 w-full h-full object-contain pointer-events-none"
|
|
>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- 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 -->
|
|
<img
|
|
x-show="!isDrawing && polygonPreviewUrl"
|
|
:src="polygonPreviewUrl"
|
|
class="absolute inset-0 w-full h-full object-contain pointer-events-none"
|
|
alt="Polygon overlay"
|
|
>
|
|
|
|
<!-- Drawing canvas (only when actively drawing) -->
|
|
<canvas
|
|
id="polygonCanvas"
|
|
x-show="isDrawing"
|
|
:width="imageWidth"
|
|
:height="imageHeight"
|
|
class="absolute inset-0 cursor-crosshair pointer-events-auto border-2 border-dashed border-blue-500 opacity-90"
|
|
></canvas>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Loading indicator -->
|
|
<div x-show="isLoading && !error" class="flex items-center justify-center h-full">
|
|
<div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500"></div>
|
|
</div>
|
|
|
|
<!-- Error message -->
|
|
<div x-show="error" class="text-red-400 text-center mt-8" x-text="error"></div>
|
|
|
|
<!-- Mode-specific instructions -->
|
|
<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>
|
|
</main> |