Generieren: Canvas-Highlighting, Baumstruktur-Objekte, keine Dropdowns

- Objekte per DrawCanvas (readOnly) mit Markierung des gewählten Objekts
- Neues GenerateObjectsList: user_notes als Titel, Kinder eingerückt mit ↳
- Keine Hierarchy-/Parent-Dropdowns mehr auf der Generieren-Seite
- DrawCanvas: readOnly-Prop zum Deaktivieren von Maus-Events

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/pages/GenerateIt.tsx

@@ -1,5 +1,6 @@
-import { useState, useEffect } from 'react'
-import ObjectsList from '../components/ObjectsList'
+import { useState, useEffect, useRef } from 'react'
+import DrawCanvas, { type DrawCanvasHandle } from '../components/DrawCanvas'
+import GenerateObjectsList from '../components/GenerateObjectsList'
 import SentencesList from '../components/SentencesList'
 import Topbar from '../components/Topbar'
 import {
@@ -12,8 +13,8 @@ import {
   getSentences,
 } from '../api'
 import { useAuth } from '../context/AuthContext'
-import type { DirectusObject } from '../types'
-import type { ObjectMeta, Sentence } from '../types'
+import type { DirectusObject, CanvasObject } from '../types'
+import type { Sentence } from '../types'
 
 const ChevronLeftIcon = () => (
   <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
@@ -118,31 +119,16 @@ function extractWords(sentences: Sentence[]): string[] {
   return [...new Set(words)].sort((a, b) => a.localeCompare(b))
 }
 
-// ── Helper ────────────────────────────────────────────────────────────────────
-
-function directusObjToMeta(obj: DirectusObject): ObjectMeta {
-  return {
-    id: obj.id,
-    image_file: '',
-    title_de: '',
-    position_de: '',
-    action_de: '',
-    condition_de: '',
-    hierarchy: 1,
-    parent_id: obj.parent ?? undefined,
-    user_notes: obj.user_notes ?? '',
-    selections: obj.selections ?? [],
-  } as unknown as ObjectMeta
-}
-
 // ── Component ─────────────────────────────────────────────────────────────────
 
 export default function GenerateIt() {
   const { token } = useAuth()
+  const canvasRef = useRef<DrawCanvasHandle>(null)
+
   const [pictureList, setPictureList] = useState<DirectusPicture[]>([])
   const [currentIndex, setCurrentIndex] = useState(-1)
-  const [objects, setObjects] = useState<ObjectMeta[]>([])
-  const [selectedObj, setSelectedObj] = useState<ObjectMeta | null>(null)
+  const [directusObjects, setDirectusObjects] = useState<DirectusObject[]>([])
+  const [selectedObjId, setSelectedObjId] = useState<string | null>(null)
   const [sentences, setSentences] = useState<Sentence[]>([])
   const [isGeneratingDetails, setIsGeneratingDetails] = useState(false)
   const [isGeneratingSentence, setIsGeneratingSentence] = useState(false)
@@ -159,6 +145,14 @@ export default function GenerateIt() {
 
   const words = extractWords(sentences)
 
+  const canvasObjects: CanvasObject[] = directusObjects.map((obj, i) => ({
+    id: obj.id,
+    visible: true,
+    selections: obj.selections,
+    index: i + 1,
+    hierarchy: 1,
+  }))
+
   useEffect(() => {
     if (!token) return
     getDirectusPictures(token, 'drawing_created')
@@ -168,15 +162,14 @@ export default function GenerateIt() {
 
   useEffect(() => {
     if (!currentPicture || !token) {
-      setObjects([]); setSelectedObj(null); setSentences([])
+      setDirectusObjects([]); setSelectedObjId(null); setSentences([])
       return
     }
     getDirectusObjects(currentPicture.id, token)
       .then(objs => {
-        const metas = objs.map(directusObjToMeta)
-        setObjects(metas)
-        if (metas.length > 0) { setSelectedObj(metas[0]); loadSentences(metas[0].id) }
-        else { setSelectedObj(null); setSentences([]) }
+        setDirectusObjects(objs)
+        if (objs.length > 0) { setSelectedObjId(objs[0].id); loadSentences(objs[0].id) }
+        else { setSelectedObjId(null); setSentences([]) }
       })
       .catch(console.error)
   }, [currentPicture?.id, token])
@@ -186,14 +179,10 @@ export default function GenerateIt() {
   }
 
   const handleGenerateDetails = async () => {
-    const target = selectedObj ?? objects[0]
-    if (!target) return
+    if (!selectedObjId) return
     setIsGeneratingDetails(true)
     try {
-      const data = await generateDetails(target.id)
-      const updated = { ...target, ...data }
-      setSelectedObj(updated)
-      setObjects(prev => prev.map(o => o.id === target.id ? updated : o))
+      await generateDetails(selectedObjId)
     } catch (e) {
       alert(e instanceof Error ? e.message : 'Fehler bei KI-Details')
     } finally {
@@ -202,13 +191,11 @@ export default function GenerateIt() {
   }
 
   const handleGenerateSentence = async () => {
-    const target = selectedObj ?? objects[0]
-    if (!target) return
+    if (!selectedObjId) return
     setIsGeneratingSentence(true)
     try {
-      const data = await generateSentence(target.id)
+      const data = await generateSentence(selectedObjId)
       setSentences(prev => [...prev, data.sentence])
-      setSelectedObj(prev => prev ? { ...prev, latest_sentence: data.sentence } : prev)
     } catch (e) {
       alert(e instanceof Error ? e.message : 'Fehler bei KI-Sentence')
     } finally {
@@ -270,11 +257,11 @@ export default function GenerateIt() {
 
       <div style={{ width: 1, height: 24, background: 'var(--border)' }} />
 
-      <button className="btn-ghost btn-sm" onClick={handleGenerateDetails} disabled={isGeneratingDetails || !selectedObj}>
+      <button className="btn-ghost btn-sm" onClick={handleGenerateDetails} disabled={isGeneratingDetails || !selectedObjId}>
         <SparkleIcon />
         {isGeneratingDetails ? 'Generiere…' : 'KI-Details'}
       </button>
-      <button className="btn-ghost btn-sm" onClick={handleGenerateSentence} disabled={isGeneratingSentence || !selectedObj}>
+      <button className="btn-ghost btn-sm" onClick={handleGenerateSentence} disabled={isGeneratingSentence || !selectedObjId}>
         <ChatIcon />
         {isGeneratingSentence ? 'Generiere…' : 'KI-Sentence'}
       </button>
@@ -291,32 +278,31 @@ export default function GenerateIt() {
           <div className="sidebar-panel" style={{ flex: 1 }}>
             <h3 className="sidebar-heading">
               Objekte
-              {objects.length > 0 && <span className="badge">{objects.length}</span>}
+              {directusObjects.length > 0 && <span className="badge">{directusObjects.length}</span>}
             </h3>
-            <ObjectsList
-              objects={objects}
-              selectedObjectId={selectedObj?.id ?? null}
-              onSelect={id => {
-                const obj = objects.find(o => o.id === id)
-                if (obj) { setSelectedObj(obj); loadSentences(obj.id) }
-              }}
-              onObjectsChange={setObjects}
-              isGeneratePage={true}
-              onShowDetails={obj => setSelectedObj(obj)}
-              onLoadSentences={loadSentences}
+            <GenerateObjectsList
+              objects={directusObjects}
+              selectedId={selectedObjId}
+              onSelect={id => { setSelectedObjId(id); loadSentences(id) }}
             />
           </div>
         </aside>
 
-        {/* Center: Image + Prompt Editor */}
+        {/* Center: Canvas + Prompt Editor */}
         <main className="canvas-area" style={{ alignItems: 'flex-start', justifyContent: 'flex-start', flexDirection: 'column', gap: 12, padding: 16 }}>
-          {currentPicture && token && (
-            <img
-              src={directusAssetUrl(currentPicture.media, token)}
-              alt="Bild"
-              style={{ maxWidth: '100%', maxHeight: 280, borderRadius: 8, objectFit: 'contain', border: '1px solid var(--border)' }}
-            />
-          )}
+          <div style={{ width: '100%', maxHeight: 320, overflow: 'hidden' }}>
+            <div className="canvas-frame" style={{ display: 'inline-flex', maxWidth: '100%' }}>
+              <DrawCanvas
+                ref={canvasRef}
+                imageSrc={currentPicture && token ? directusAssetUrl(currentPicture.media, token) : null}
+                objects={canvasObjects}
+                selectedObjectId={selectedObjId}
+                mode="rect"
+                onHasSelection={() => {}}
+                readOnly
+              />
+            </div>
+          </div>
 
           {/* Prompt Editor */}
           <div className="prompt-editor">