admin/hejyou_content_creation
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 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>
This commit is contained in:
admin
2026-04-26 08:17:13 +02:00
parent 88269ece2d
commit 7f85b90a82
4 changed files with 189 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/src/components/DrawCanvas.tsx
View File

@@ -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' }} />
})

85
frontend/src/components/GenerateObjectsList.tsx Normal file
View File

@@ -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>
)
}

53
frontend/src/index.css
View File

@@ -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
===================================================== */

106
frontend/src/pages/GenerateIt.tsx
View File

@@ -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">