Hartmut
df02067687
Replace all hardcoded gray-*/white Tailwind classes with semantic CSS variable tokens (bg-surface, text-content, border-border-default, etc.) so the page respects dark/light mode correctly. - Sidebar, header bar, toolbar: bg-surface + border-border-default - Node cards: bg-surface + border-accent (selected) / border-border-default - ConfigSidepanel: bg-surface, text-content-secondary labels - NewWorkflowModal: bg-surface, border-border-default inputs, accent buttons - Workflow list items: bg-accent-light highlight for selected, hover:bg-surface-hover - Empty state icon: text-content-muted - ReactFlow: colorMode prop tied to useThemeStore (dark/light) - Background: removed hardcoded #e5e7eb dot color (uses ReactFlow colorMode) - All blue-600 buttons → bg-accent / hover:bg-accent-hover Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
795 lines
28 KiB
TypeScript
795 lines
28 KiB
TypeScript
import { useState, useCallback, useRef, DragEvent } from 'react'
|
|
import {
|
|
ReactFlow,
|
|
Background,
|
|
Controls,
|
|
MiniMap,
|
|
addEdge,
|
|
useNodesState,
|
|
useEdgesState,
|
|
Handle,
|
|
Position,
|
|
type Node,
|
|
type Edge,
|
|
type Connection,
|
|
type NodeTypes,
|
|
} from '@xyflow/react'
|
|
import '@xyflow/react/dist/style.css'
|
|
import { useThemeStore, resolveTheme } from '../store/theme'
|
|
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
|
|
import {
|
|
getWorkflows,
|
|
createWorkflow,
|
|
updateWorkflow,
|
|
deleteWorkflow,
|
|
type WorkflowDefinition,
|
|
type WorkflowConfig,
|
|
type WorkflowParams,
|
|
} from '../api/workflows'
|
|
import {
|
|
FileUp,
|
|
RefreshCw,
|
|
Camera,
|
|
Film,
|
|
Layers,
|
|
Download,
|
|
Plus,
|
|
Save,
|
|
Trash2,
|
|
GitBranch,
|
|
X,
|
|
} from 'lucide-react'
|
|
import { toast } from 'sonner'
|
|
|
|
// ─── Custom Node Components ──────────────────────────────────────────────────
|
|
|
|
interface BaseNodeProps {
|
|
label: string
|
|
icon: React.ReactNode
|
|
color: string
|
|
description?: string
|
|
selected?: boolean
|
|
hasSource?: boolean
|
|
hasTarget?: boolean
|
|
}
|
|
|
|
function BaseNode({ label, icon, color, description, selected, hasSource = true, hasTarget = true }: BaseNodeProps) {
|
|
return (
|
|
<div
|
|
className={`rounded-lg border-2 p-3 min-w-[140px] bg-surface shadow-sm transition-colors ${
|
|
selected ? 'border-accent' : 'border-border-default'
|
|
}`}
|
|
>
|
|
{hasTarget && (
|
|
<Handle type="target" position={Position.Left} className="w-3 h-3 bg-gray-400 border-2 border-white" />
|
|
)}
|
|
<div className={`flex items-center gap-2 mb-1 text-${color}-600`}>
|
|
{icon}
|
|
<span className="font-medium text-sm">{label}</span>
|
|
</div>
|
|
{description && <p className="text-xs text-gray-500">{description}</p>}
|
|
{hasSource && (
|
|
<Handle type="source" position={Position.Right} className="w-3 h-3 bg-gray-400 border-2 border-white" />
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function InputNode({ selected }: { selected?: boolean }) {
|
|
return (
|
|
<BaseNode
|
|
label="STEP Input"
|
|
icon={<FileUp size={14} />}
|
|
color="green"
|
|
description="STEP-Datei Eingang"
|
|
selected={selected}
|
|
hasTarget={false}
|
|
/>
|
|
)
|
|
}
|
|
|
|
function ConvertNode({ selected }: { selected?: boolean }) {
|
|
return (
|
|
<BaseNode
|
|
label="STL Konvertierung"
|
|
icon={<RefreshCw size={14} />}
|
|
color="blue"
|
|
description="STEP → STL (cadquery)"
|
|
selected={selected}
|
|
/>
|
|
)
|
|
}
|
|
|
|
function RenderNode({ data, selected }: { data: { label?: string; params?: WorkflowParams }; selected?: boolean }) {
|
|
const params = data.params ?? {}
|
|
return (
|
|
<BaseNode
|
|
label={data.label ?? 'Still Render'}
|
|
icon={<Camera size={14} />}
|
|
color="orange"
|
|
description={params.render_engine ? `${params.render_engine} · ${params.samples ?? 256} samples` : undefined}
|
|
selected={selected}
|
|
/>
|
|
)
|
|
}
|
|
|
|
function RenderFramesNode({ data, selected }: { data: { params?: WorkflowParams }; selected?: boolean }) {
|
|
const params = data.params ?? {}
|
|
return (
|
|
<BaseNode
|
|
label="Frames Render"
|
|
icon={<Film size={14} />}
|
|
color="orange"
|
|
description={params.fps ? `${params.fps} fps · ${params.duration_s ?? '?'}s` : undefined}
|
|
selected={selected}
|
|
/>
|
|
)
|
|
}
|
|
|
|
function FFmpegNode({ selected }: { selected?: boolean }) {
|
|
return (
|
|
<BaseNode
|
|
label="FFmpeg Composite"
|
|
icon={<Layers size={14} />}
|
|
color="purple"
|
|
description="Frames → MP4"
|
|
selected={selected}
|
|
/>
|
|
)
|
|
}
|
|
|
|
function OutputNode({ data, selected }: { data: { label?: string }; selected?: boolean }) {
|
|
return (
|
|
<BaseNode
|
|
label={data.label ?? 'Output'}
|
|
icon={<Download size={14} />}
|
|
color="gray"
|
|
description="Ergebnis-Datei"
|
|
selected={selected}
|
|
hasSource={false}
|
|
/>
|
|
)
|
|
}
|
|
|
|
const nodeTypes: NodeTypes = {
|
|
inputNode: InputNode as any,
|
|
convertNode: ConvertNode as any,
|
|
renderNode: RenderNode as any,
|
|
renderFramesNode: RenderFramesNode as any,
|
|
ffmpegNode: FFmpegNode as any,
|
|
outputNode: OutputNode as any,
|
|
}
|
|
|
|
// ─── Workflow → Graph conversion ─────────────────────────────────────────────
|
|
|
|
function workflowToGraph(config: WorkflowConfig): { nodes: Node[]; edges: Edge[] } {
|
|
const Y = 100
|
|
|
|
if (config.type === 'still') {
|
|
const nodes: Node[] = [
|
|
{ id: 'input', type: 'inputNode', position: { x: 0, y: Y }, data: { label: 'STEP Input' } },
|
|
{ id: 'convert', type: 'convertNode', position: { x: 220, y: Y }, data: { label: 'STL Konvertierung' } },
|
|
{ id: 'render', type: 'renderNode', position: { x: 440, y: Y }, data: { label: 'Still Render', params: config.params } },
|
|
{ id: 'output', type: 'outputNode', position: { x: 660, y: Y }, data: { label: 'PNG Output' } },
|
|
]
|
|
const edges: Edge[] = [
|
|
{ id: 'e1', source: 'input', target: 'convert' },
|
|
{ id: 'e2', source: 'convert', target: 'render' },
|
|
{ id: 'e3', source: 'render', target: 'output' },
|
|
]
|
|
return { nodes, edges }
|
|
}
|
|
|
|
if (config.type === 'turntable') {
|
|
const nodes: Node[] = [
|
|
{ id: 'input', type: 'inputNode', position: { x: 0, y: Y }, data: {} },
|
|
{ id: 'convert', type: 'convertNode', position: { x: 220, y: Y }, data: {} },
|
|
{ id: 'frames', type: 'renderFramesNode', position: { x: 440, y: Y }, data: { params: config.params } },
|
|
{ id: 'ffmpeg', type: 'ffmpegNode', position: { x: 660, y: Y }, data: {} },
|
|
{ id: 'output', type: 'outputNode', position: { x: 880, y: Y }, data: { label: 'MP4 Output' } },
|
|
]
|
|
const edges: Edge[] = [
|
|
{ id: 'e1', source: 'input', target: 'convert' },
|
|
{ id: 'e2', source: 'convert', target: 'frames' },
|
|
{ id: 'e3', source: 'frames', target: 'ffmpeg' },
|
|
{ id: 'e4', source: 'ffmpeg', target: 'output' },
|
|
]
|
|
return { nodes, edges }
|
|
}
|
|
|
|
if (config.type === 'multi_angle') {
|
|
const angles = config.params.angles ?? [0, 45, 90]
|
|
const renderNodes: Node[] = angles.map((angle, i) => ({
|
|
id: `render_${i}`,
|
|
type: 'renderNode',
|
|
position: { x: 440, y: i * 130 },
|
|
data: { label: `Render ${angle}°`, params: { ...config.params, camera_angle: angle } },
|
|
}))
|
|
const nodes: Node[] = [
|
|
{ id: 'input', type: 'inputNode', position: { x: 0, y: angles.length * 65 }, data: {} },
|
|
{ id: 'convert', type: 'convertNode', position: { x: 220, y: angles.length * 65 }, data: {} },
|
|
...renderNodes,
|
|
{ id: 'output', type: 'outputNode', position: { x: 700, y: angles.length * 65 }, data: {} },
|
|
]
|
|
const edges: Edge[] = [
|
|
{ id: 'e_in', source: 'input', target: 'convert' },
|
|
...angles.map((_, i) => ({ id: `e_conv_${i}`, source: 'convert', target: `render_${i}` })),
|
|
...angles.map((_, i) => ({ id: `e_out_${i}`, source: `render_${i}`, target: 'output' })),
|
|
]
|
|
return { nodes, edges }
|
|
}
|
|
|
|
// custom: use nodes from config if present
|
|
if (config.nodes && config.nodes.length > 0) {
|
|
return { nodes: config.nodes as Node[], edges: [] }
|
|
}
|
|
|
|
return { nodes: [], edges: [] }
|
|
}
|
|
|
|
// ─── Config Sidepanel ─────────────────────────────────────────────────────────
|
|
|
|
function ConfigSidepanel({
|
|
params,
|
|
onChange,
|
|
}: {
|
|
params: WorkflowParams
|
|
onChange: (p: WorkflowParams) => void
|
|
}) {
|
|
return (
|
|
<div className="w-72 border-l border-border-default bg-surface p-4 space-y-5 overflow-y-auto">
|
|
<h3 className="font-semibold text-content">Node-Konfiguration</h3>
|
|
|
|
{/* Render Engine */}
|
|
<div>
|
|
<label className="text-sm text-content-secondary mb-2 block">Render Engine</label>
|
|
<div className="flex gap-2">
|
|
{(['cycles', 'eevee'] as const).map(eng => (
|
|
<button
|
|
key={eng}
|
|
onClick={() => onChange({ ...params, render_engine: eng })}
|
|
className={`px-3 py-1.5 rounded text-sm font-medium transition-colors ${
|
|
(params.render_engine ?? 'cycles') === eng
|
|
? 'bg-accent text-white'
|
|
: 'bg-surface-hover text-content-secondary hover:bg-surface-muted'
|
|
}`}
|
|
>
|
|
{eng === 'cycles' ? 'Cycles' : 'EEVEE'}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Samples */}
|
|
<div>
|
|
<label className="text-sm text-content-secondary mb-2 block">
|
|
Samples: <span className="font-semibold text-content">{params.samples ?? 256}</span>
|
|
</label>
|
|
<input
|
|
type="range"
|
|
min={1}
|
|
max={4096}
|
|
step={1}
|
|
value={params.samples ?? 256}
|
|
onChange={e => onChange({ ...params, samples: Number(e.target.value) })}
|
|
className="w-full accent-accent"
|
|
/>
|
|
<div className="flex justify-between text-xs text-content-muted mt-1">
|
|
<span>1</span>
|
|
<span>4096</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Resolution */}
|
|
<div>
|
|
<label className="text-sm text-content-secondary mb-2 block">Auflösung</label>
|
|
<div className="flex gap-2">
|
|
{([[1024, 1024], [2048, 2048], [4096, 4096]] as [number, number][]).map(([w]) => (
|
|
<button
|
|
key={w}
|
|
onClick={() => onChange({ ...params, resolution: [w, w] })}
|
|
className={`px-2 py-1.5 rounded text-xs font-medium transition-colors ${
|
|
(params.resolution?.[0] ?? 2048) === w
|
|
? 'bg-accent text-white'
|
|
: 'bg-surface-hover text-content-secondary hover:bg-surface-muted'
|
|
}`}
|
|
>
|
|
{w}px
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* FPS (only relevant for animation nodes) */}
|
|
<div>
|
|
<label className="text-sm text-content-secondary mb-2 block">
|
|
FPS: <span className="font-semibold text-content">{params.fps ?? 24}</span>
|
|
</label>
|
|
<div className="flex gap-2">
|
|
{[12, 24, 30, 60].map(fps => (
|
|
<button
|
|
key={fps}
|
|
onClick={() => onChange({ ...params, fps })}
|
|
className={`px-2 py-1.5 rounded text-xs font-medium transition-colors ${
|
|
(params.fps ?? 24) === fps
|
|
? 'bg-accent text-white'
|
|
: 'bg-surface-hover text-content-secondary hover:bg-surface-muted'
|
|
}`}
|
|
>
|
|
{fps}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Duration */}
|
|
<div>
|
|
<label className="text-sm text-content-secondary mb-2 block">
|
|
Dauer (s): <span className="font-semibold text-content">{params.duration_s ?? 5}</span>
|
|
</label>
|
|
<input
|
|
type="range"
|
|
min={1}
|
|
max={30}
|
|
step={1}
|
|
value={params.duration_s ?? 5}
|
|
onChange={e => onChange({ ...params, duration_s: Number(e.target.value) })}
|
|
className="w-full accent-accent"
|
|
/>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// ─── Node Palette ──────────────────────────────────────────────────────────────
|
|
|
|
const NODE_PALETTE = [
|
|
{ type: 'convertNode', label: 'STEP→STL', icon: <RefreshCw size={14} /> },
|
|
{ type: 'renderNode', label: 'Still Render', icon: <Camera size={14} /> },
|
|
{ type: 'renderFramesNode', label: 'Frame Render', icon: <Film size={14} /> },
|
|
{ type: 'ffmpegNode', label: 'FFmpeg', icon: <Layers size={14} /> },
|
|
{ type: 'outputNode', label: 'Output', icon: <Download size={14} /> },
|
|
]
|
|
|
|
// ─── New Workflow Modal ───────────────────────────────────────────────────────
|
|
|
|
interface NewWorkflowModalProps {
|
|
onClose: () => void
|
|
onCreate: (name: string, type: WorkflowConfig['type']) => void
|
|
isLoading: boolean
|
|
}
|
|
|
|
function NewWorkflowModal({ onClose, onCreate, isLoading }: NewWorkflowModalProps) {
|
|
const [name, setName] = useState('')
|
|
const [type, setType] = useState<WorkflowConfig['type']>('still')
|
|
|
|
return (
|
|
<div className="fixed inset-0 bg-black/40 flex items-center justify-center z-50">
|
|
<div className="bg-surface rounded-xl shadow-xl w-full max-w-md p-6">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<h2 className="text-lg font-semibold text-content">Neuer Workflow</h2>
|
|
<button onClick={onClose} className="text-content-muted hover:text-content">
|
|
<X size={20} />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
<div>
|
|
<label className="block text-sm text-content-secondary mb-1">Name</label>
|
|
<input
|
|
className="w-full border border-border-default rounded-lg px-3 py-2 text-sm bg-surface text-content focus:outline-none focus:ring-2 focus:ring-accent"
|
|
placeholder="z.B. Still Render Standard"
|
|
value={name}
|
|
onChange={e => setName(e.target.value)}
|
|
autoFocus
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm text-content-secondary mb-1">Typ</label>
|
|
<div className="grid grid-cols-2 gap-2">
|
|
{([
|
|
{ value: 'still', label: 'Still', desc: 'Einzelbild PNG' },
|
|
{ value: 'turntable', label: 'Turntable', desc: 'Animations-MP4' },
|
|
{ value: 'multi_angle', label: 'Multi-Angle', desc: 'Mehrere Winkel' },
|
|
{ value: 'custom', label: 'Custom', desc: 'Freier Editor' },
|
|
] as { value: WorkflowConfig['type']; label: string; desc: string }[]).map(opt => (
|
|
<button
|
|
key={opt.value}
|
|
onClick={() => setType(opt.value)}
|
|
className={`p-3 rounded-lg border-2 text-left transition-colors ${
|
|
type === opt.value
|
|
? 'border-accent bg-accent-light'
|
|
: 'border-border-default hover:border-border-light'
|
|
}`}
|
|
>
|
|
<p className="text-sm font-medium text-content">{opt.label}</p>
|
|
<p className="text-xs text-content-muted mt-0.5">{opt.desc}</p>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex justify-end gap-2 mt-6">
|
|
<button
|
|
onClick={onClose}
|
|
className="px-4 py-2 text-sm rounded-lg border border-border-default text-content-secondary hover:bg-surface-hover"
|
|
>
|
|
Abbrechen
|
|
</button>
|
|
<button
|
|
disabled={!name.trim() || isLoading}
|
|
onClick={() => onCreate(name.trim(), type)}
|
|
className="px-4 py-2 text-sm rounded-lg bg-accent text-white hover:bg-accent-hover disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
{isLoading ? 'Erstelle…' : 'Erstellen'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// ─── Flow Canvas ──────────────────────────────────────────────────────────────
|
|
|
|
interface FlowCanvasProps {
|
|
workflow: WorkflowDefinition
|
|
onSave: (config: WorkflowConfig) => void
|
|
isSaving: boolean
|
|
}
|
|
|
|
function FlowCanvas({ workflow, onSave, isSaving }: FlowCanvasProps) {
|
|
const { nodes: initNodes, edges: initEdges } = workflowToGraph(workflow.config)
|
|
const [nodes, setNodes, onNodesChange] = useNodesState(initNodes)
|
|
const [edges, setEdges, onEdgesChange] = useEdgesState(initEdges)
|
|
const [selectedNodeId, setSelectedNodeId] = useState<string | null>(null)
|
|
const [params, setParams] = useState<WorkflowParams>(workflow.config.params)
|
|
const reactFlowWrapper = useRef<HTMLDivElement>(null)
|
|
const [reactFlowInstance, setReactFlowInstance] = useState<any>(null)
|
|
|
|
const onConnect = useCallback(
|
|
(connection: Connection) => setEdges(eds => addEdge(connection, eds)),
|
|
[setEdges],
|
|
)
|
|
|
|
const onNodeClick = useCallback((_: React.MouseEvent, node: Node) => {
|
|
if (node.type === 'renderNode' || node.type === 'renderFramesNode') {
|
|
setSelectedNodeId(node.id)
|
|
const nodeParams = (node.data as any).params as WorkflowParams | undefined
|
|
if (nodeParams) setParams(nodeParams)
|
|
} else {
|
|
setSelectedNodeId(null)
|
|
}
|
|
}, [])
|
|
|
|
const onPaneClick = useCallback(() => {
|
|
setSelectedNodeId(null)
|
|
}, [])
|
|
|
|
const handleParamsChange = useCallback(
|
|
(newParams: WorkflowParams) => {
|
|
setParams(newParams)
|
|
setNodes(nds =>
|
|
nds.map(n => {
|
|
if (n.id === selectedNodeId) {
|
|
return { ...n, data: { ...n.data, params: newParams } }
|
|
}
|
|
return n
|
|
}),
|
|
)
|
|
},
|
|
[selectedNodeId, setNodes],
|
|
)
|
|
|
|
// Drag-drop new nodes from palette
|
|
const onDragOver = useCallback((event: DragEvent<HTMLDivElement>) => {
|
|
event.preventDefault()
|
|
event.dataTransfer.dropEffect = 'move'
|
|
}, [])
|
|
|
|
const onDrop = useCallback(
|
|
(event: DragEvent<HTMLDivElement>) => {
|
|
event.preventDefault()
|
|
const type = event.dataTransfer.getData('application/reactflow')
|
|
if (!type || !reactFlowInstance) return
|
|
|
|
const position = reactFlowInstance.screenToFlowPosition({
|
|
x: event.clientX,
|
|
y: event.clientY,
|
|
})
|
|
|
|
const newNode: Node = {
|
|
id: `${type}_${Date.now()}`,
|
|
type,
|
|
position,
|
|
data: { label: type },
|
|
}
|
|
setNodes(nds => [...nds, newNode])
|
|
},
|
|
[reactFlowInstance, setNodes],
|
|
)
|
|
|
|
const handleSave = () => {
|
|
const updatedConfig: WorkflowConfig = {
|
|
...workflow.config,
|
|
params,
|
|
nodes: nodes as any,
|
|
}
|
|
onSave(updatedConfig)
|
|
}
|
|
|
|
const selectedNode = nodes.find(n => n.id === selectedNodeId)
|
|
|
|
const { mode } = useThemeStore()
|
|
const isDark = resolveTheme(mode) === 'dark'
|
|
|
|
return (
|
|
<div className="flex flex-col flex-1 min-h-0">
|
|
{/* Canvas Toolbar */}
|
|
<div className="flex items-center gap-2 px-4 py-2 border-b border-border-default bg-surface">
|
|
<span className="text-sm font-medium text-content-secondary mr-2">Nodes:</span>
|
|
{NODE_PALETTE.map(item => (
|
|
<div
|
|
key={item.type}
|
|
draggable
|
|
onDragStart={e => {
|
|
e.dataTransfer.setData('application/reactflow', item.type)
|
|
e.dataTransfer.effectAllowed = 'move'
|
|
}}
|
|
className="flex items-center gap-1.5 px-2.5 py-1.5 rounded border border-border-default bg-surface-hover text-xs text-content-secondary cursor-grab hover:bg-surface-muted select-none"
|
|
>
|
|
{item.icon}
|
|
{item.label}
|
|
</div>
|
|
))}
|
|
<div className="ml-auto">
|
|
<button
|
|
onClick={handleSave}
|
|
disabled={isSaving}
|
|
className="flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-lg bg-accent text-white hover:bg-accent-hover disabled:opacity-50"
|
|
>
|
|
<Save size={14} />
|
|
{isSaving ? 'Speichere…' : 'Speichern'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Canvas + Sidepanel */}
|
|
<div className="flex flex-1 min-h-0">
|
|
<div ref={reactFlowWrapper} className="flex-1" onDrop={onDrop} onDragOver={onDragOver}>
|
|
<ReactFlow
|
|
nodes={nodes}
|
|
edges={edges}
|
|
onNodesChange={onNodesChange}
|
|
onEdgesChange={onEdgesChange}
|
|
onConnect={onConnect}
|
|
onNodeClick={onNodeClick}
|
|
onPaneClick={onPaneClick}
|
|
onInit={setReactFlowInstance}
|
|
nodeTypes={nodeTypes}
|
|
colorMode={isDark ? 'dark' : 'light'}
|
|
fitView
|
|
fitViewOptions={{ padding: 0.2 }}
|
|
>
|
|
<Background gap={16} />
|
|
<Controls />
|
|
<MiniMap nodeStrokeWidth={3} zoomable pannable />
|
|
</ReactFlow>
|
|
</div>
|
|
|
|
{selectedNode && (selectedNode.type === 'renderNode' || selectedNode.type === 'renderFramesNode') && (
|
|
<ConfigSidepanel params={params} onChange={handleParamsChange} />
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// ─── Main Page ────────────────────────────────────────────────────────────────
|
|
|
|
export default function WorkflowEditor() {
|
|
const queryClient = useQueryClient()
|
|
const [selectedId, setSelectedId] = useState<string | null>(null)
|
|
const [showNewModal, setShowNewModal] = useState(false)
|
|
|
|
const { data: workflows = [], isLoading } = useQuery({
|
|
queryKey: ['workflows'],
|
|
queryFn: getWorkflows,
|
|
})
|
|
|
|
const createMutation = useMutation({
|
|
mutationFn: createWorkflow,
|
|
onSuccess: wf => {
|
|
queryClient.invalidateQueries({ queryKey: ['workflows'] })
|
|
setSelectedId(wf.id)
|
|
setShowNewModal(false)
|
|
toast.success('Workflow erstellt')
|
|
},
|
|
onError: () => toast.error('Fehler beim Erstellen'),
|
|
})
|
|
|
|
const updateMutation = useMutation({
|
|
mutationFn: ({ id, config }: { id: string; config: WorkflowConfig }) =>
|
|
updateWorkflow(id, { config }),
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: ['workflows'] })
|
|
toast.success('Workflow gespeichert')
|
|
},
|
|
onError: () => toast.error('Fehler beim Speichern'),
|
|
})
|
|
|
|
const deleteMutation = useMutation({
|
|
mutationFn: deleteWorkflow,
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: ['workflows'] })
|
|
setSelectedId(null)
|
|
toast.success('Workflow gelöscht')
|
|
},
|
|
onError: () => toast.error('Fehler beim Löschen'),
|
|
})
|
|
|
|
const handleCreate = (name: string, type: WorkflowConfig['type']) => {
|
|
const defaultParams: WorkflowParams =
|
|
type === 'turntable'
|
|
? { render_engine: 'cycles', samples: 64, fps: 24, duration_s: 5 }
|
|
: type === 'multi_angle'
|
|
? { render_engine: 'cycles', samples: 128, resolution: [2048, 2048], angles: [0, 45, 90] }
|
|
: { render_engine: 'cycles', samples: 256, resolution: [2048, 2048] }
|
|
|
|
createMutation.mutate({
|
|
name,
|
|
config: { type, params: defaultParams },
|
|
is_active: true,
|
|
})
|
|
}
|
|
|
|
const selectedWorkflow = workflows.find(w => w.id === selectedId) ?? null
|
|
|
|
const typeLabel: Record<WorkflowConfig['type'], string> = {
|
|
still: 'Still',
|
|
turntable: 'Turntable',
|
|
multi_angle: 'Multi-Angle',
|
|
custom: 'Custom',
|
|
}
|
|
|
|
const typeBadgeColor: Record<WorkflowConfig['type'], string> = {
|
|
still: 'bg-orange-100 text-orange-700 dark:bg-orange-900/40 dark:text-orange-300',
|
|
turntable: 'bg-purple-100 text-purple-700 dark:bg-purple-900/40 dark:text-purple-300',
|
|
multi_angle: 'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300',
|
|
custom: 'bg-surface-hover text-content-muted',
|
|
}
|
|
|
|
return (
|
|
<div className="flex h-full">
|
|
{/* Workflow List Sidebar */}
|
|
<aside className="w-56 flex-shrink-0 border-r border-border-default bg-surface flex flex-col">
|
|
<div className="p-3 border-b border-border-default flex items-center justify-between">
|
|
<div className="flex items-center gap-2 text-sm font-semibold text-content-secondary">
|
|
<GitBranch size={16} />
|
|
Workflows
|
|
</div>
|
|
<button
|
|
onClick={() => setShowNewModal(true)}
|
|
className="p-1 rounded hover:bg-surface-hover text-content-muted hover:text-content"
|
|
title="Neuer Workflow"
|
|
>
|
|
<Plus size={16} />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="flex-1 overflow-y-auto p-2 space-y-1">
|
|
{isLoading && (
|
|
<p className="text-xs text-content-muted px-2 py-4 text-center">Lade…</p>
|
|
)}
|
|
{!isLoading && workflows.length === 0 && (
|
|
<p className="text-xs text-content-muted px-2 py-4 text-center">
|
|
Noch keine Workflows.
|
|
<br />
|
|
<button
|
|
onClick={() => setShowNewModal(true)}
|
|
className="mt-1 text-accent hover:underline"
|
|
>
|
|
+ Neu erstellen
|
|
</button>
|
|
</p>
|
|
)}
|
|
{workflows.map(wf => (
|
|
<button
|
|
key={wf.id}
|
|
onClick={() => setSelectedId(wf.id)}
|
|
className={`w-full text-left px-3 py-2.5 rounded-lg transition-colors group ${
|
|
selectedId === wf.id
|
|
? 'bg-accent-light border border-accent/30'
|
|
: 'hover:bg-surface-hover border border-transparent'
|
|
}`}
|
|
>
|
|
<div className="flex items-start justify-between gap-1">
|
|
<p className="text-sm font-medium text-content truncate">{wf.name}</p>
|
|
<button
|
|
onClick={e => {
|
|
e.stopPropagation()
|
|
if (confirm(`Workflow "${wf.name}" löschen?`)) {
|
|
deleteMutation.mutate(wf.id)
|
|
}
|
|
}}
|
|
className="opacity-0 group-hover:opacity-100 p-0.5 rounded hover:bg-red-100 hover:text-red-600 text-content-muted flex-shrink-0"
|
|
title="Löschen"
|
|
>
|
|
<Trash2 size={12} />
|
|
</button>
|
|
</div>
|
|
<span
|
|
className={`inline-block mt-1 text-xs px-1.5 py-0.5 rounded-full font-medium ${
|
|
typeBadgeColor[wf.config.type]
|
|
}`}
|
|
>
|
|
{typeLabel[wf.config.type]}
|
|
</span>
|
|
{!wf.is_active && (
|
|
<span className="ml-1 text-xs text-content-muted">(inaktiv)</span>
|
|
)}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</aside>
|
|
|
|
{/* Main Canvas Area */}
|
|
<div className="flex-1 flex flex-col min-w-0">
|
|
{/* Header */}
|
|
<div className="px-6 py-4 border-b border-border-default bg-surface flex items-center justify-between">
|
|
<div>
|
|
<h1 className="text-xl font-semibold text-content">Workflow-Editor</h1>
|
|
{selectedWorkflow && (
|
|
<p className="text-sm text-content-muted mt-0.5">{selectedWorkflow.name}</p>
|
|
)}
|
|
</div>
|
|
<button
|
|
onClick={() => setShowNewModal(true)}
|
|
className="flex items-center gap-2 px-4 py-2 rounded-lg bg-accent text-white text-sm font-medium hover:bg-accent-hover transition-colors"
|
|
>
|
|
<Plus size={16} />
|
|
Neuer Workflow
|
|
</button>
|
|
</div>
|
|
|
|
{/* Canvas or Empty State */}
|
|
{selectedWorkflow ? (
|
|
<FlowCanvas
|
|
key={selectedWorkflow.id}
|
|
workflow={selectedWorkflow}
|
|
onSave={config => updateMutation.mutate({ id: selectedWorkflow.id, config })}
|
|
isSaving={updateMutation.isPending}
|
|
/>
|
|
) : (
|
|
<div className="flex-1 flex items-center justify-center text-center">
|
|
<div>
|
|
<GitBranch size={48} className="mx-auto text-content-muted mb-4" />
|
|
<p className="text-content-secondary font-medium">Kein Workflow ausgewählt</p>
|
|
<p className="text-sm text-content-muted mt-1">
|
|
Wähle einen Workflow aus der Liste oder erstelle einen neuen.
|
|
</p>
|
|
<button
|
|
onClick={() => setShowNewModal(true)}
|
|
className="mt-4 flex items-center gap-2 px-4 py-2 mx-auto rounded-lg bg-accent text-white text-sm font-medium hover:bg-accent-hover"
|
|
>
|
|
<Plus size={16} />
|
|
Workflow erstellen
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* New Workflow Modal */}
|
|
{showNewModal && (
|
|
<NewWorkflowModal
|
|
onClose={() => setShowNewModal(false)}
|
|
onCreate={handleCreate}
|
|
isLoading={createMutation.isPending}
|
|
/>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|