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/components/DrawCanvas.tsx

@@ -22,10 +22,11 @@ interface Props {
   selectedObjectId: string | null
   mode: 'rect' | 'polygon'
   onHasSelection: (has: boolean) => void
+  readOnly?: boolean
 }
 
 export default forwardRef<DrawCanvasHandle, Props>(function DrawCanvas(
-  { imageSrc, objects, selectedObjectId, mode, onHasSelection },
+  { imageSrc, objects, selectedObjectId, mode, onHasSelection, readOnly = false },
   ref
 ) {
   const canvasRef = useRef<HTMLCanvasElement>(null)
@@ -349,6 +350,8 @@ export default forwardRef<DrawCanvasHandle, Props>(function DrawCanvas(
       }
     }
 
+    if (readOnly) return
+
     canvas.addEventListener('mousedown', onMouseDown)
     canvas.addEventListener('mousemove', onMouseMove)
     canvas.addEventListener('mouseup', onMouseUp)
@@ -359,7 +362,7 @@ export default forwardRef<DrawCanvasHandle, Props>(function DrawCanvas(
       canvas.removeEventListener('mouseup', onMouseUp)
       canvas.removeEventListener('mouseleave', onMouseLeave)
     }
-  }, [redraw])
+  }, [readOnly, redraw])
 
   return <canvas ref={canvasRef} style={{ display: 'block', maxWidth: '100%', height: 'auto' }} />
 })

frontend/src/components/GenerateObjectsList.tsx

@@ -0,0 +1,85 @@
+import type { DirectusObject } from '../types'
+
+interface Props {
+  objects: DirectusObject[]
+  selectedId: string | null
+  onSelect: (id: string) => void
+}
+
+interface TreeNode {
+  obj: DirectusObject
+  children: TreeNode[]
+}
+
+function buildTree(objects: DirectusObject[]): TreeNode[] {
+  const idSet = new Set(objects.map(o => o.id))
+  const roots = objects.filter(o => !o.parent || !idSet.has(o.parent))
+  const childrenOf = (parentId: string): TreeNode[] =>
+    objects
+      .filter(o => o.parent === parentId)
+      .map(o => ({ obj: o, children: childrenOf(o.id) }))
+  return roots.map(o => ({ obj: o, children: childrenOf(o.id) }))
+}
+
+function label(obj: DirectusObject): string {
+  return obj.user_notes?.trim() || `Objekt ${obj.id.slice(0, 6)}`
+}
+
+function TreeItem({
+  node,
+  depth,
+  selectedId,
+  onSelect,
+}: {
+  node: TreeNode
+  depth: number
+  selectedId: string | null
+  onSelect: (id: string) => void
+}) {
+  const { obj, children } = node
+  const isSelected = obj.id === selectedId
+
+  return (
+    <div>
+      <div
+        className={`gen-object-item${isSelected ? ' selected' : ''}`}
+        style={{ paddingLeft: 10 + depth * 18 }}
+        onClick={() => onSelect(obj.id)}
+      >
+        {depth > 0 && <span className="gen-object-indent-marker">↳</span>}
+        <span className="gen-object-label">{label(obj)}</span>
+      </div>
+      {children.map(child => (
+        <TreeItem
+          key={child.obj.id}
+          node={child}
+          depth={depth + 1}
+          selectedId={selectedId}
+          onSelect={onSelect}
+        />
+      ))}
+    </div>
+  )
+}
+
+export default function GenerateObjectsList({ objects, selectedId, onSelect }: Props) {
+  if (objects.length === 0) {
+    return <div className="empty-state">Noch keine Objekte.</div>
+  }
+
+  const tree = buildTree(objects)
+
+  return (
+    <div className="gen-objects-list">
+      {tree.map(node => (
+        <TreeItem
+          key={node.obj.id}
+          node={node}
+          depth={0}
+          selectedId={selectedId}
+          onSelect={onSelect}
+        />
+      ))}
+    </div>
+  )
+}

frontend/src/index.css

@@ -921,6 +921,59 @@ select:focus {
   font-style: italic;
 }
 
+/* =====================================================
+   GENERATE OBJECTS LIST
+   ===================================================== */
+.gen-objects-list {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  max-height: calc(100vh - 120px);
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--border) transparent;
+}
+
+.gen-object-item {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 6px 10px;
+  border-radius: var(--r-md);
+  cursor: pointer;
+  transition: background 0.12s, border-color 0.12s;
+  border: 1px solid transparent;
+  min-height: 32px;
+}
+
+.gen-object-item:hover {
+  background: var(--surface-3);
+  border-color: var(--border);
+}
+
+.gen-object-item.selected {
+  background: var(--primary-muted);
+  border-color: var(--primary);
+}
+
+.gen-object-indent-marker {
+  font-size: 11px;
+  color: var(--text-3);
+  flex-shrink: 0;
+}
+
+.gen-object-label {
+  font-size: 12.5px;
+  color: var(--text-1);
+  line-height: 1.4;
+  word-break: break-word;
+}
+
+.gen-object-item.selected .gen-object-label {
+  color: var(--primary-muted-fg);
+  font-weight: 600;
+}
+
 /* =====================================================
    WORDS CLOUD
    ===================================================== */

frontend/src/pages/GenerateIt.tsx

@@ -1,5 +1,6 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useRef } from 'react'
-import ObjectsList from '../components/ObjectsList'
+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 { DirectusObject, CanvasObject } from '../types'
-import type { ObjectMeta, Sentence } 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 [directusObjects, setDirectusObjects] = useState<DirectusObject[]>([])
-  const [selectedObj, setSelectedObj] = useState<ObjectMeta | null>(null)
+  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)
+        setDirectusObjects(objs)
-        setObjects(metas)
+        if (objs.length > 0) { setSelectedObjId(objs[0].id); loadSentences(objs[0].id) }
-        if (metas.length > 0) { setSelectedObj(metas[0]); loadSentences(metas[0].id) }
+        else { setSelectedObjId(null); setSentences([]) }
-        else { setSelectedObj(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 (!selectedObjId) return
-    if (!target) return
     setIsGeneratingDetails(true)
     try {
-      const data = await generateDetails(target.id)
+      await generateDetails(selectedObjId)
-      const updated = { ...target, ...data }
-      setSelectedObj(updated)
-      setObjects(prev => prev.map(o => o.id === target.id ? updated : o))
     } 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 (!selectedObjId) return
-    if (!target) 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
+            <GenerateObjectsList
-              objects={objects}
+              objects={directusObjects}
-              selectedObjectId={selectedObj?.id ?? null}
+              selectedId={selectedObjId}
-              onSelect={id => {
+              onSelect={id => { setSelectedObjId(id); loadSentences(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}
             />
           </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 && (
+          <div style={{ width: '100%', maxHeight: 320, overflow: 'hidden' }}>
-            <img
+            <div className="canvas-frame" style={{ display: 'inline-flex', maxWidth: '100%' }}>
-              src={directusAssetUrl(currentPicture.media, token)}
+              <DrawCanvas
-              alt="Bild"
+                ref={canvasRef}
-              style={{ maxWidth: '100%', maxHeight: 280, borderRadius: 8, objectFit: 'contain', border: '1px solid var(--border)' }}
+                imageSrc={currentPicture && token ? directusAssetUrl(currentPicture.media, token) : null}
+                objects={canvasObjects}
+                selectedObjectId={selectedObjId}
+                mode="rect"
+                onHasSelection={() => {}}
+                readOnly
               />
-          )}
+            </div>
+          </div>
 
           {/* Prompt Editor */}
           <div className="prompt-editor">