notid/ai-game-2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

changes

Browse Source
This commit is contained in:
Bryce
2026-04-04 06:41:02 -07:00
parent 3fc5e9f215
commit 078b3a4cdd
26 changed files with 704 additions and 249 deletions
Download Patch File Download Diff File Expand all files Collapse all files

296
tools/ora_editor/templates/editor.html
View File

@@ -1,11 +1,90 @@
{% extends "base.html" %}
{% block body %}
<div x-data="oraEditor()" x-init="init()" class="min-h-screen p-4">
<div x-data="oraEditor()" x-init="init()" class="min-h-screen pb-4">
<!-- Header -->
<header class="mb-4 flex items-center gap-4">
<div class="flex-1 flex items-center gap-2">
<!-- Fixed Header (mobile only) -->
<header class="lg:hidden fixed top-0 left-0 right-0 z-[60] bg-gray-900 border-b border-gray-700 px-4 py-2">
<div class="flex items-center justify-between max-w-full mx-auto">
<!-- Open Dock button (top left) -->
<button
x-show="oraPath"
@click="showDock = true"
:class="showDock ? 'bg-blue-600' : 'bg-gray-700 hover:bg-gray-600'"
class="px-3 py-2 rounded min-h-[2.5rem] touch-manipulation transition"
title="Open Dock"
>📋</button>
<!-- Spacer when dock button is hidden -->
<div x-show="!oraPath" class="w-[3.75rem]"></div>
<!-- Hamburger menu button (top right) -->
<button
@click="showMenu = true"
class="bg-gray-700 hover:bg-gray-600 px-3 py-2 rounded min-h-[2.5rem] touch-manipulation"
title="Menu"
>☰</button>
</div>
</header>
<!-- Mobile hamburger dropdown menu (outside headers so it's visible) -->
<div x-show="showMenu" x-transition class="lg:hidden fixed inset-0 z-[70]">
<div @click="showMenu = false" class="absolute inset-0 bg-black opacity-50"></div>
<div class="absolute top-12 right-0 bottom-0 w-full max-w-sm bg-gray-800 p-4 space-y-3 border-l border-gray-700 overflow-y-auto">
<h3 class="font-bold text-lg mb-2">Menu</h3>
<!-- File open controls -->
<div class="space-y-2">
<input
type="text"
x-model="filePath"
placeholder="Path (e.g., scenes/kq4_010/pic.png)"
class="w-full bg-gray-700 border border-gray-600 rounded px-3 py-2 text-white focus:border-blue-500 outline-none"
@keydown.enter="openFile()"
>
<button
@click="openBrowseModal(); showMenu = false;"
class="w-full bg-gray-600 hover:bg-gray-500 px-3 py-2 rounded transition min-h-[2.5rem] touch-manipulation"
>
📁 Browse Files
</button>
<button
@click="openFile(); showMenu = false;"
:disabled="!filePath || isLoading"
class="w-full bg-blue-600 hover:bg-blue-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="isLoading" class="animate-spin rounded-full h-4 w-4 border-t-2 border-b-2 border-white"></span>
<span x-text="isLoading ? 'Opening...' : 'Open File'"></span>
</button>
</div>
<!-- Save -->
<button
@click="saveCurrent(); showMenu = false;"
:disabled="!oraPath || isLoading"
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"
>Save</button>
<!-- Krita (desktop only info) -->
<button
@click="openInKrita(); showMenu = false;"
:disabled="!oraPath || isExtracting"
class="w-full bg-purple-600 hover:bg-purple-700 disabled:bg-gray-600 px-4 py-2 rounded transition min-h-[2.5rem] touch-manipulation flex items-center gap-2 justify-center"
>
Open in Krita (Desktop Only)
</button>
<hr class="border-gray-700">
<!-- Settings -->
<button @click="showSettings = true; showMenu = false;" class="w-full bg-gray-700 hover:bg-gray-600 px-4 py-2 rounded transition min-h-[2.5rem] touch-manipulation">⚙️ Settings</button>
</div>
</div>
<!-- Desktop Header -->
<header class="hidden lg:flex mb-4 items-center justify-between px-4">
<!-- Desktop header controls -->
<div class="hidden lg:flex flex-1 flex items-center gap-2">
<input
type="text"
x-model="filePath"
@@ -15,7 +94,7 @@
>
<button
@click="openBrowseModal()"
class="bg-gray-600 hover:bg-gray-500 px-3 py-2 rounded transition"
class="bg-gray-600 hover:bg-gray-500 px-3 py-2 rounded transition min-h-[2.5rem] touch-manipulation"
title="Browse files"
>
📁 Browse
@@ -23,39 +102,40 @@
<button
@click="openFile()"
:disabled="!filePath || isLoading"
class="bg-blue-600 hover:bg-blue-700 disabled:bg-gray-600 px-4 py-2 rounded transition flex items-center justify-center gap-2"
class="bg-blue-600 hover:bg-blue-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="isLoading" class="animate-spin rounded-full h-4 w-4 border-t-2 border-b-2 border-white"></span>
<span x-text="isLoading ? 'Opening...' : 'Open'"></span>
</button>
</div>
<!-- Krita button -->
<!-- Krita button (desktop only) -->
<button
@click="openInKrita()"
:disabled="!oraPath || isExtracting"
class="bg-purple-600 hover:bg-purple-700 disabled:bg-gray-600 px-4 py-2 rounded flex items-center gap-2"
class="hidden lg:flex bg-purple-600 hover:bg-purple-700 disabled:bg-gray-600 px-4 py-2 rounded transition min-h-[2.5rem] touch-manipulation items-center gap-2"
title="Open in Krita (Review mode: full ORA; Add mode: base with polygon)"
>
Open in Krita
</button>
<!-- Save button (desktop only) -->
<button
@click="saveCurrent()"
:disabled="!oraPath || isLoading"
class="bg-green-600 hover:bg-green-700 disabled:bg-gray-600 px-4 py-2 rounded transition"
class="hidden lg:flex bg-green-600 hover:bg-green-700 disabled:bg-gray-600 px-4 py-2 rounded transition min-h-[2.5rem] touch-manipulation items-center"
>Save</button>
<!-- Save notification -->
<!-- Save notification (below fixed header on mobile) -->
<div
x-show="saveNotification"
x-transition
class="fixed top-4 right-4 bg-green-600 text-white px-4 py-2 rounded shadow-lg z-50"
class="fixed lg:top-4 top-14 right-4 bg-green-600 text-white px-4 py-2 rounded shadow-lg z-[55]"
x-text="saveNotification"
></div>
<!-- Scale slider -->
<div x-show="oraPath" class="flex items-center gap-2 bg-gray-800 rounded px-3 py-2 border border-gray-700">
<!-- Scale slider (desktop only - moved to dock on mobile) -->
<div x-show="oraPath" class="hidden lg:flex items-center gap-2 bg-gray-800 rounded px-3 py-2 border border-gray-700 min-h-[2.5rem]">
<span class="text-sm text-gray-300">Scale:</span>
<input
type="range"
@@ -68,20 +148,136 @@
<span class="text-sm text-gray-300 w-12" x-text="scale + '%'"></span>
</div>
<button @click="showSettings = true" class="bg-gray-700 hover:bg-gray-600 px-4 py-2 rounded transition">⚙️</button>
<!-- Settings button (desktop only) -->
<button @click="showSettings = true" class="hidden lg:flex bg-gray-700 hover:bg-gray-600 px-4 py-2 rounded transition min-h-[2.5rem] touch-manipulation items-center">⚙️</button>
</header>
<!-- Main content (after file loaded) -->
<template x-if="oraPath">
<div class="flex gap-4">
<div class="flex gap-4 relative pt-12 lg:pt-0 px-4 lg:px-0">
<!-- SIDEBAR -->
<aside class="w-72 flex-shrink-0 space-y-4">
<!-- SIDEBAR DOCK (scrollable on mobile) -->
<aside
x-show="showDock"
@click.away="!showMaskModal && !showBrowseModal && !showSettings && !showKritaModal && window.innerWidth < 1024 && (showDock = false)"
:class="{
'fixed inset-0 z-40 bg-gray-800 w-full overflow-y-auto': window.innerWidth < 1024,
}"
class="lg:block lg:w-72 lg:flex-shrink-0 lg:static lg:inset-auto transition-all duration-300"
>
{% include "components/sidebar.html" %}
</aside>
<!-- MAIN CANVAS AREA -->
{% include "components/canvas.html" %}
<main class="flex-1 bg-gray-800 rounded-lg border border-gray-700 p-4 relative overflow-auto flex items-start justify-start min-h-[calc(100vh-12rem)] lg:min-h-[600px] lg:items-center lg:justify-center">
<!-- Loading indicator -->
<div x-show="isLoading && !error" class="flex items-center justify-center h-full absolute inset-0 z-10">
<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 absolute inset-0 z-10 flex items-center justify-center p-4" x-text="error"></div>
<!-- Image container with centered scaling -->
<div
id="imageContainer"
class="relative shadow-lg"
:style="`width: ${scaledWidth}px; height: ${scaledHeight}px;`">
<!-- 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 is sized dynamically to match actual rendered container dimensions -->
<canvas
id="polygonCanvas"
x-show="isDrawing"
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>
<!-- Mode-specific instructions -->
<div x-show="isSamMode" class="absolute bottom-4 left-4 right-4 text-xs lg:text-sm text-gray-400 bg-gray-900 bg-opacity-75 px-3 py-2 rounded">
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="absolute bottom-4 left-4 right-4 text-xs lg:text-sm text-gray-400 bg-gray-900 bg-opacity-75 px-3 py-2 rounded">
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="absolute bottom-4 left-4 right-4 text-xs lg:text-sm text-gray-400 bg-gray-900 bg-opacity-75 px-3 py-2 rounded">
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="absolute bottom-4 left-4 right-4 text-xs lg:text-sm text-gray-400 bg-gray-900 bg-opacity-75 px-3 py-2 rounded">
Use SAM rough mask or draw a polygon, then extract mask.
</div>
</main>
</div>
</template>
@@ -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));