916ecef476
Add OCRImportPanel component and ocr-integration utilities to import OCR-analyzed data from the grid detection service into the worksheet editor. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
493 lines
20 KiB
TypeScript
493 lines
20 KiB
TypeScript
'use client'
|
|
|
|
import { useState, useEffect, useCallback } from 'react'
|
|
import dynamic from 'next/dynamic'
|
|
import { useTheme } from '@/lib/ThemeContext'
|
|
import { useLanguage } from '@/lib/LanguageContext'
|
|
import { WorksheetProvider, useWorksheet } from '@/lib/worksheet-editor/WorksheetContext'
|
|
import { Sidebar } from '@/components/Sidebar'
|
|
import { EditorToolbar } from '@/components/worksheet-editor/EditorToolbar'
|
|
import { PropertiesPanel } from '@/components/worksheet-editor/PropertiesPanel'
|
|
import { CanvasControls } from '@/components/worksheet-editor/CanvasControls'
|
|
import { PageNavigator } from '@/components/worksheet-editor/PageNavigator'
|
|
import { AIImageGenerator } from '@/components/worksheet-editor/AIImageGenerator'
|
|
import { ExportPanel } from '@/components/worksheet-editor/ExportPanel'
|
|
import { AIPromptBar } from '@/components/worksheet-editor/AIPromptBar'
|
|
import { DocumentImporter } from '@/components/worksheet-editor/DocumentImporter'
|
|
import { CleanupPanel } from '@/components/worksheet-editor/CleanupPanel'
|
|
import { OCRImportPanel } from '@/components/worksheet-editor/OCRImportPanel'
|
|
import { ThemeToggle } from '@/components/ThemeToggle'
|
|
import { LanguageDropdown } from '@/components/LanguageDropdown'
|
|
|
|
// Dynamic import to prevent SSR issues with Fabric.js
|
|
const FabricCanvas = dynamic(
|
|
() => import('@/components/worksheet-editor/FabricCanvas').then(mod => mod.FabricCanvas),
|
|
{
|
|
ssr: false,
|
|
loading: () => (
|
|
<div className="flex items-center justify-center h-full">
|
|
<div className="animate-spin w-8 h-8 border-4 border-purple-500 border-t-transparent rounded-full" />
|
|
</div>
|
|
)
|
|
}
|
|
)
|
|
|
|
// Storage key for saved worksheets
|
|
const WORKSHEETS_KEY = 'bp_worksheets'
|
|
|
|
interface SavedWorksheet {
|
|
id: string
|
|
title: string
|
|
updatedAt: string
|
|
thumbnail?: string
|
|
}
|
|
|
|
function WorksheetEditorContent() {
|
|
const { isDark } = useTheme()
|
|
const { t } = useLanguage()
|
|
const { document, setDocument, isDirty, setIsDirty, saveDocument, loadDocument, canvas } = useWorksheet()
|
|
|
|
const [mounted, setMounted] = useState(false)
|
|
const [isAIGeneratorOpen, setIsAIGeneratorOpen] = useState(false)
|
|
const [isExportPanelOpen, setIsExportPanelOpen] = useState(false)
|
|
const [isDocumentImporterOpen, setIsDocumentImporterOpen] = useState(false)
|
|
const [isCleanupPanelOpen, setIsCleanupPanelOpen] = useState(false)
|
|
const [isOCRImportOpen, setIsOCRImportOpen] = useState(false)
|
|
const [isDocumentListOpen, setIsDocumentListOpen] = useState(false)
|
|
const [savedWorksheets, setSavedWorksheets] = useState<SavedWorksheet[]>([])
|
|
const [isSaving, setIsSaving] = useState(false)
|
|
const [title, setTitle] = useState('')
|
|
|
|
useEffect(() => {
|
|
setMounted(true)
|
|
loadSavedWorksheets()
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
if (document) {
|
|
setTitle(document.title)
|
|
}
|
|
}, [document])
|
|
|
|
// Load saved worksheets from localStorage
|
|
const loadSavedWorksheets = useCallback(() => {
|
|
try {
|
|
const stored = localStorage.getItem(WORKSHEETS_KEY)
|
|
if (stored) {
|
|
setSavedWorksheets(JSON.parse(stored))
|
|
}
|
|
} catch (e) {
|
|
console.error('Failed to load worksheets:', e)
|
|
}
|
|
}, [])
|
|
|
|
// Save current worksheet
|
|
const handleSave = useCallback(async () => {
|
|
if (!document) return
|
|
setIsSaving(true)
|
|
|
|
try {
|
|
// Save to context (which saves to API or localStorage)
|
|
await saveDocument()
|
|
|
|
// Update worksheets list
|
|
const worksheetEntry: SavedWorksheet = {
|
|
id: document.id,
|
|
title: document.title,
|
|
updatedAt: new Date().toISOString(),
|
|
thumbnail: canvas?.toDataURL({ format: 'png', multiplier: 0.1 })
|
|
}
|
|
|
|
setSavedWorksheets(prev => {
|
|
const filtered = prev.filter(w => w.id !== document.id)
|
|
const updated = [worksheetEntry, ...filtered]
|
|
localStorage.setItem(WORKSHEETS_KEY, JSON.stringify(updated))
|
|
return updated
|
|
})
|
|
|
|
setIsDirty(false)
|
|
} catch (e) {
|
|
console.error('Save failed:', e)
|
|
} finally {
|
|
setIsSaving(false)
|
|
}
|
|
}, [document, saveDocument, canvas, setIsDirty])
|
|
|
|
// Load a saved worksheet
|
|
const handleLoadWorksheet = useCallback(async (id: string) => {
|
|
try {
|
|
await loadDocument(id)
|
|
setIsDocumentListOpen(false)
|
|
} catch (e) {
|
|
console.error('Failed to load worksheet:', e)
|
|
}
|
|
}, [loadDocument])
|
|
|
|
// Delete a saved worksheet
|
|
const handleDeleteWorksheet = useCallback((id: string) => {
|
|
setSavedWorksheets(prev => {
|
|
const updated = prev.filter(w => w.id !== id)
|
|
localStorage.setItem(WORKSHEETS_KEY, JSON.stringify(updated))
|
|
localStorage.removeItem(`worksheet_${id}`)
|
|
return updated
|
|
})
|
|
}, [])
|
|
|
|
// Create new worksheet
|
|
const handleNewWorksheet = useCallback(() => {
|
|
const newDoc = {
|
|
id: `ws_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
|
|
title: 'Neues Arbeitsblatt',
|
|
pages: [{
|
|
id: `page_${Date.now()}`,
|
|
index: 0,
|
|
canvasJSON: ''
|
|
}],
|
|
pageFormat: {
|
|
width: 210,
|
|
height: 297,
|
|
orientation: 'portrait' as const,
|
|
margins: { top: 15, right: 15, bottom: 15, left: 15 }
|
|
},
|
|
createdAt: new Date().toISOString(),
|
|
updatedAt: new Date().toISOString()
|
|
}
|
|
setDocument(newDoc)
|
|
setIsDocumentListOpen(false)
|
|
if (canvas) {
|
|
canvas.clear()
|
|
canvas.backgroundColor = '#ffffff'
|
|
canvas.renderAll()
|
|
}
|
|
}, [setDocument, canvas])
|
|
|
|
const handleTitleChange = (newTitle: string) => {
|
|
setTitle(newTitle)
|
|
if (document) {
|
|
setDocument({
|
|
...document,
|
|
title: newTitle,
|
|
updatedAt: new Date().toISOString()
|
|
})
|
|
}
|
|
}
|
|
|
|
if (!mounted) {
|
|
return (
|
|
<div className={`min-h-screen flex items-center justify-center ${
|
|
isDark ? 'bg-slate-900' : 'bg-slate-100'
|
|
}`}>
|
|
<div className="animate-spin w-8 h-8 border-4 border-purple-500 border-t-transparent rounded-full" />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className={`min-h-screen flex relative overflow-hidden ${
|
|
isDark
|
|
? 'bg-gradient-to-br from-indigo-900 via-purple-900 to-pink-800'
|
|
: 'bg-gradient-to-br from-slate-100 via-blue-50 to-indigo-100'
|
|
}`}>
|
|
{/* Animated Background Blobs */}
|
|
<div className={`absolute -top-40 -right-40 w-96 h-96 rounded-full mix-blend-multiply filter blur-3xl animate-blob ${
|
|
isDark ? 'bg-purple-500 opacity-30' : 'bg-purple-300 opacity-40'
|
|
}`} />
|
|
<div className={`absolute top-1/2 -left-40 w-96 h-96 rounded-full mix-blend-multiply filter blur-3xl animate-blob animation-delay-2000 ${
|
|
isDark ? 'bg-pink-500 opacity-30' : 'bg-pink-300 opacity-40'
|
|
}`} />
|
|
<div className={`absolute -bottom-40 right-1/3 w-96 h-96 rounded-full mix-blend-multiply filter blur-3xl animate-blob animation-delay-4000 ${
|
|
isDark ? 'bg-blue-500 opacity-30' : 'bg-blue-300 opacity-40'
|
|
}`} />
|
|
|
|
{/* Sidebar */}
|
|
<div className="relative z-10 p-4">
|
|
<Sidebar />
|
|
</div>
|
|
|
|
{/* Main Content */}
|
|
<div className="flex-1 flex flex-col relative z-10 p-4 overflow-hidden">
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between mb-4">
|
|
<div className="flex items-center gap-4">
|
|
<div>
|
|
<h1 className={`text-2xl font-bold mb-1 ${isDark ? 'text-white' : 'text-slate-900'}`}>Arbeitsblatt-Editor</h1>
|
|
<div className="flex items-center gap-2">
|
|
<input
|
|
type="text"
|
|
value={title}
|
|
onChange={(e) => handleTitleChange(e.target.value)}
|
|
placeholder="Arbeitsblatt-Titel..."
|
|
className={`text-sm px-3 py-1.5 rounded-lg border transition-all w-56 ${
|
|
isDark
|
|
? 'bg-white/10 border-white/20 text-white placeholder-white/40 focus:border-purple-400'
|
|
: 'bg-white/50 border-slate-300 text-slate-900 placeholder-slate-400 focus:border-purple-500'
|
|
}`}
|
|
/>
|
|
{isDirty && (
|
|
<span className={`px-2 py-1 rounded-lg text-xs font-medium ${
|
|
isDark ? 'bg-yellow-500/20 text-yellow-300' : 'bg-yellow-100 text-yellow-700'
|
|
}`}>
|
|
Ungespeichert
|
|
</span>
|
|
)}
|
|
{/* Save Button */}
|
|
<button
|
|
onClick={handleSave}
|
|
disabled={isSaving || !isDirty}
|
|
className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-medium transition-all ${
|
|
isDirty
|
|
? 'bg-green-500 text-white hover:bg-green-600'
|
|
: isDark
|
|
? 'bg-white/10 text-white/40 cursor-not-allowed'
|
|
: 'bg-slate-200 text-slate-400 cursor-not-allowed'
|
|
}`}
|
|
>
|
|
{isSaving ? (
|
|
<div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
|
|
) : (
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4" />
|
|
</svg>
|
|
)}
|
|
Speichern
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2">
|
|
{/* Document List Button */}
|
|
<button
|
|
onClick={() => setIsDocumentListOpen(true)}
|
|
className={`flex items-center gap-2 px-3 py-2 rounded-xl font-medium transition-all ${
|
|
isDark
|
|
? 'bg-white/10 text-white hover:bg-white/20'
|
|
: 'bg-white text-slate-700 hover:bg-slate-100'
|
|
}`}
|
|
>
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
|
</svg>
|
|
Meine Arbeitsblätter
|
|
</button>
|
|
|
|
{/* Export Button */}
|
|
<button
|
|
onClick={() => setIsExportPanelOpen(true)}
|
|
className={`flex items-center gap-2 px-3 py-2 rounded-xl font-medium transition-all ${
|
|
isDark
|
|
? 'bg-purple-500/30 text-purple-300 hover:bg-purple-500/40'
|
|
: 'bg-purple-600 text-white hover:bg-purple-700'
|
|
}`}
|
|
>
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
|
|
</svg>
|
|
Exportieren
|
|
</button>
|
|
|
|
{/* Theme Toggle */}
|
|
<ThemeToggle />
|
|
|
|
{/* Language Dropdown */}
|
|
<LanguageDropdown />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Editor Area - New Layout */}
|
|
<div className="flex-1 flex gap-4 overflow-hidden">
|
|
{/* Left Toolbar */}
|
|
<div className="flex-shrink-0">
|
|
<EditorToolbar
|
|
onOpenAIGenerator={() => setIsAIGeneratorOpen(true)}
|
|
onOpenDocumentImporter={() => setIsDocumentImporterOpen(true)}
|
|
onOpenCleanupPanel={() => setIsCleanupPanelOpen(true)}
|
|
onOpenOCRImport={() => setIsOCRImportOpen(true)}
|
|
className="h-full"
|
|
/>
|
|
</div>
|
|
|
|
{/* Canvas Area - takes remaining space */}
|
|
<div className="flex-1 flex flex-col min-w-0 overflow-hidden">
|
|
{/* Canvas with fixed aspect ratio container */}
|
|
<div className={`flex-1 overflow-auto rounded-xl ${
|
|
isDark ? 'bg-slate-800/50' : 'bg-slate-200/50'
|
|
}`}>
|
|
<FabricCanvas className="h-full" />
|
|
</div>
|
|
|
|
{/* Bottom Controls */}
|
|
<div className="flex items-center justify-between gap-4 py-2">
|
|
<PageNavigator />
|
|
<CanvasControls />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right Panel - AI Prompt + Properties */}
|
|
<div className="w-80 flex-shrink-0 flex flex-col gap-4 overflow-hidden">
|
|
{/* AI Prompt Bar */}
|
|
<div className="flex-shrink-0">
|
|
<AIPromptBar />
|
|
</div>
|
|
|
|
{/* Properties Panel */}
|
|
<div className="flex-1 overflow-hidden">
|
|
<PropertiesPanel className="h-full" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Document List Modal */}
|
|
{isDocumentListOpen && (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
|
|
<div className="absolute inset-0 bg-black/50 backdrop-blur-sm" onClick={() => setIsDocumentListOpen(false)} />
|
|
<div className={`relative w-full max-w-2xl rounded-3xl p-6 ${
|
|
isDark ? 'bg-slate-900/95' : 'bg-white/95'
|
|
} backdrop-blur-xl border ${isDark ? 'border-white/10' : 'border-slate-200'}`}>
|
|
<div className="flex items-center justify-between mb-6">
|
|
<h2 className={`text-xl font-bold ${isDark ? 'text-white' : 'text-slate-900'}`}>
|
|
Meine Arbeitsblätter
|
|
</h2>
|
|
<button
|
|
onClick={() => setIsDocumentListOpen(false)}
|
|
className={`p-2 rounded-lg transition-colors ${isDark ? 'hover:bg-white/10' : 'hover:bg-slate-100'}`}
|
|
>
|
|
<svg className={`w-5 h-5 ${isDark ? 'text-white' : 'text-slate-600'}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
{/* New Worksheet Button */}
|
|
<button
|
|
onClick={handleNewWorksheet}
|
|
className={`w-full mb-4 p-4 rounded-xl border-2 border-dashed transition-all flex items-center justify-center gap-2 ${
|
|
isDark
|
|
? 'border-white/20 text-white/60 hover:border-purple-400 hover:text-purple-300 hover:bg-purple-500/10'
|
|
: 'border-slate-300 text-slate-500 hover:border-purple-500 hover:text-purple-600 hover:bg-purple-50'
|
|
}`}
|
|
>
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
|
|
</svg>
|
|
Neues Arbeitsblatt erstellen
|
|
</button>
|
|
|
|
{/* Worksheets List */}
|
|
<div className="max-h-96 overflow-y-auto space-y-2">
|
|
{savedWorksheets.length === 0 ? (
|
|
<div className={`text-center py-8 ${isDark ? 'text-white/40' : 'text-slate-400'}`}>
|
|
<svg className="w-12 h-12 mx-auto mb-3 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
|
</svg>
|
|
<p>Noch keine Arbeitsblätter gespeichert</p>
|
|
</div>
|
|
) : (
|
|
savedWorksheets.map((worksheet) => (
|
|
<div
|
|
key={worksheet.id}
|
|
className={`flex items-center gap-4 p-4 rounded-xl transition-all cursor-pointer ${
|
|
isDark
|
|
? 'bg-white/5 hover:bg-white/10'
|
|
: 'bg-slate-50 hover:bg-slate-100'
|
|
} ${document?.id === worksheet.id ? (isDark ? 'ring-2 ring-purple-500' : 'ring-2 ring-purple-500') : ''}`}
|
|
onClick={() => handleLoadWorksheet(worksheet.id)}
|
|
>
|
|
{/* Thumbnail */}
|
|
<div className={`w-16 h-20 rounded-lg flex-shrink-0 overflow-hidden ${
|
|
isDark ? 'bg-white/10' : 'bg-slate-200'
|
|
}`}>
|
|
{worksheet.thumbnail ? (
|
|
<img src={worksheet.thumbnail} alt="" className="w-full h-full object-cover" />
|
|
) : (
|
|
<div className="w-full h-full flex items-center justify-center">
|
|
<svg className={`w-6 h-6 ${isDark ? 'text-white/30' : 'text-slate-400'}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
|
</svg>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Info */}
|
|
<div className="flex-1 min-w-0">
|
|
<h3 className={`font-medium truncate ${isDark ? 'text-white' : 'text-slate-900'}`}>
|
|
{worksheet.title}
|
|
</h3>
|
|
<p className={`text-sm ${isDark ? 'text-white/50' : 'text-slate-500'}`}>
|
|
{new Date(worksheet.updatedAt).toLocaleDateString('de-DE', {
|
|
day: '2-digit',
|
|
month: '2-digit',
|
|
year: 'numeric',
|
|
hour: '2-digit',
|
|
minute: '2-digit'
|
|
})}
|
|
</p>
|
|
{document?.id === worksheet.id && (
|
|
<span className="inline-block mt-1 px-2 py-0.5 rounded text-xs bg-purple-500/20 text-purple-400">
|
|
Aktuell geöffnet
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
{/* Delete Button */}
|
|
<button
|
|
onClick={(e) => {
|
|
e.stopPropagation()
|
|
if (confirm('Arbeitsblatt wirklich löschen?')) {
|
|
handleDeleteWorksheet(worksheet.id)
|
|
}
|
|
}}
|
|
className={`p-2 rounded-lg transition-colors ${
|
|
isDark ? 'hover:bg-red-500/20 text-white/50 hover:text-red-400' : 'hover:bg-red-50 text-slate-400 hover:text-red-500'
|
|
}`}
|
|
>
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
))
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Modals */}
|
|
<AIImageGenerator
|
|
isOpen={isAIGeneratorOpen}
|
|
onClose={() => setIsAIGeneratorOpen(false)}
|
|
/>
|
|
|
|
<ExportPanel
|
|
isOpen={isExportPanelOpen}
|
|
onClose={() => setIsExportPanelOpen(false)}
|
|
/>
|
|
|
|
<DocumentImporter
|
|
isOpen={isDocumentImporterOpen}
|
|
onClose={() => setIsDocumentImporterOpen(false)}
|
|
/>
|
|
|
|
<CleanupPanel
|
|
isOpen={isCleanupPanelOpen}
|
|
onClose={() => setIsCleanupPanelOpen(false)}
|
|
/>
|
|
|
|
<OCRImportPanel
|
|
isOpen={isOCRImportOpen}
|
|
onClose={() => setIsOCRImportOpen(false)}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default function WorksheetEditorPage() {
|
|
return (
|
|
<WorksheetProvider>
|
|
<WorksheetEditorContent />
|
|
</WorksheetProvider>
|
|
)
|
|
}
|