feat: introduce image editing capabilities and enhance canvas component organization

- Added new image editing node types including curves, color adjustment, light adjustment, detail adjustment, and render, expanding the functionality of the canvas.
- Updated the canvas command palette and sidebar to categorize and display new image editing nodes, improving user navigation and accessibility.
- Implemented collapsible categories in the sidebar for better organization of node types, enhancing the overall user experience.
- Refactored canvas components to support the new image editing features, ensuring seamless integration with existing functionalities.
This commit is contained in:
2026-03-29 22:33:59 +02:00
parent 81f0b1d7a3
commit db98fabcc6
9 changed files with 369 additions and 27 deletions

View File

@@ -102,20 +102,23 @@ export default function CanvasToolbar({
>
{NODE_CATEGORIES_ORDERED.map((categoryId: NodeCategoryId) => {
const entries = byCategory.get(categoryId) ?? [];
const creatable = entries.filter(isNodePaletteEnabled);
if (creatable.length === 0) return null;
if (entries.length === 0) return null;
return (
<div key={categoryId}>
<DropdownMenuLabel className="text-xs font-medium text-muted-foreground">
{NODE_CATEGORY_META[categoryId].label}
</DropdownMenuLabel>
{creatable.map((entry) => {
{entries.map((entry) => {
const template = getTemplateForCatalogType(entry.type);
if (!template) return null;
const enabled = isNodePaletteEnabled(entry) && Boolean(template);
return (
<DropdownMenuItem
key={entry.type}
onSelect={() => void handleAddNode(template)}
disabled={!enabled}
onSelect={() => {
if (!template) return;
void handleAddNode(template);
}}
>
{entry.label}
</DropdownMenuItem>