bc3bbf9d69
- Introduced a new "asset" node type in the canvas sidebar for better resource management. - Updated image node components to support dynamic image dimensions and improved resizing logic. - Enhanced prompt and AI image nodes to utilize reference images from asset nodes, improving integration and functionality. - Refactored canvas utilities to accommodate new asset configurations and maintain consistent media handling.
73 lines
2.3 KiB
TypeScript
73 lines
2.3 KiB
TypeScript
"use client";
|
|
|
|
const nodeTemplates = [
|
|
{ type: "image", label: "Bild", icon: "🖼️", category: "Quelle" },
|
|
{ type: "asset", label: "Asset", icon: "🛍️", category: "Quelle" },
|
|
{ type: "text", label: "Text", icon: "📝", category: "Quelle" },
|
|
{ type: "prompt", label: "Prompt", 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>
|
|
);
|
|
}
|