ai-game-2/tools/ora_editor/templates/components/canvas.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>
            
            <!-- 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>
            
            <!-- 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>
            
            <!-- 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>

    </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="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 && !isSamMode" class="mt-2 text-sm text-gray-400">
        Use SAM rough mask or draw a polygon, then extract mask.
    </div>
</main>