cbfa14a40b
- Implemented visual feedback and cursor changes for scissors mode in dark and light themes, improving user interaction during edge manipulation. - Updated node template picker to include new keywords for AI image generation, enhancing searchability. - Renamed and categorized node types for clarity, including updates to asset and prompt nodes. - Added support for video nodes and adjusted related components for improved media handling on the canvas.
74 lines
2.4 KiB
TypeScript
74 lines
2.4 KiB
TypeScript
"use client";
|
|
|
|
const nodeTemplates = [
|
|
{ type: "image", label: "Bild", icon: "🖼️", category: "Quelle" },
|
|
{ type: "asset", label: "FreePik", icon: "🛍️", category: "Quelle" },
|
|
{ type: "video", label: "Pexels", icon: "🎬", category: "Quelle" },
|
|
{ type: "text", label: "Text", icon: "📝", category: "Quelle" },
|
|
{ type: "prompt", label: "KI-Bild", icon: "✨", category: "Quelle" },
|
|
{ type: "note", label: "Notiz", icon: "📌", category: "Layout" },
|
|
{ type: "frame", label: "Frame", icon: "🖥️", category: "Layout" },
|
|
{ type: "group", label: "Gruppe", icon: "📁", category: "Layout" },
|
|
{ type: "compare", label: "Vergleich", icon: "🔀", category: "Layout" },
|
|
] as const;
|
|
|
|
const categories = [...new Set(nodeTemplates.map((template) => template.category))];
|
|
|
|
function SidebarItem({
|
|
type,
|
|
label,
|
|
icon,
|
|
}: {
|
|
type: string;
|
|
label: string;
|
|
icon: string;
|
|
}) {
|
|
const onDragStart = (event: React.DragEvent) => {
|
|
event.dataTransfer.setData("application/lemonspace-node-type", type);
|
|
event.dataTransfer.effectAllowed = "move";
|
|
};
|
|
|
|
return (
|
|
<div
|
|
draggable
|
|
onDragStart={onDragStart}
|
|
className="flex cursor-grab items-center gap-2 rounded-lg border bg-card px-3 py-2 text-sm transition-colors hover:bg-accent active:cursor-grabbing"
|
|
>
|
|
<span>{icon}</span>
|
|
<span>{label}</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function CanvasSidebar() {
|
|
return (
|
|
<aside className="flex w-56 flex-col border-r bg-background">
|
|
<div className="border-b px-4 py-3">
|
|
<h2 className="text-sm font-semibold">Nodes</h2>
|
|
<p className="text-xs text-muted-foreground">Auf den Canvas ziehen</p>
|
|
</div>
|
|
<div className="flex-1 overflow-y-auto p-3">
|
|
{categories.map((category) => (
|
|
<div key={category} className="mb-4">
|
|
<h3 className="mb-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">
|
|
{category}
|
|
</h3>
|
|
<div className="flex flex-col gap-1.5">
|
|
{nodeTemplates
|
|
.filter((template) => template.category === category)
|
|
.map((template) => (
|
|
<SidebarItem
|
|
key={template.type}
|
|
type={template.type}
|
|
label={template.label}
|
|
icon={template.icon}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</aside>
|
|
);
|
|
}
|