matthias/lemonspace_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance canvas functionality with new node types and validation

Browse Source 
- Added support for new canvas node types: curves, color-adjust, light-adjust, detail-adjust, and render.
- Implemented validation for adjustment nodes to restrict incoming edges to one.
- Updated canvas connection validation to improve user feedback on invalid connections.
- Enhanced node creation and rendering logic to accommodate new node types and their properties.
- Refactored related components and utilities for better maintainability and performance.
This commit is contained in:
Matthias
2026-04-02 11:39:05 +02:00
parent 9bab9bb93d
commit f3c5c2d8f1
52 changed files with 5755 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
components/canvas/canvas-node-template-picker.tsx
View File

@@ -3,11 +3,15 @@
import {
FolderOpen,
Frame,
Focus,
GitCompare,
ImageDown,
Image,
Package,
Palette,
Sparkles,
StickyNote,
Sun,
Type,
Video,
type LucideIcon,
@@ -29,6 +33,11 @@ const NODE_ICONS: Record<CanvasNodeTemplate["type"], LucideIcon> = {
group: FolderOpen,
asset: Package,
video: Video,
curves: Sparkles,
"color-adjust": Palette,
"light-adjust": Sun,
"detail-adjust": Focus,
render: ImageDown,
};
const NODE_SEARCH_KEYWORDS: Partial<
@@ -43,6 +52,11 @@ const NODE_SEARCH_KEYWORDS: Partial<
group: ["group", "gruppe", "folder"],
asset: ["asset", "freepik", "stock"],
video: ["video", "pexels", "clip"],
curves: ["curves", "tone", "contrast"],
"color-adjust": ["color", "hue", "saturation"],
"light-adjust": ["light", "exposure", "brightness"],
"detail-adjust": ["detail", "sharp", "grain"],
render: ["render", "export", "download"],
};
export type CanvasNodeTemplatePickerProps = {

7
components/canvas/canvas-placement-context.tsx
View File

@@ -11,11 +11,12 @@ import { useStore, type Edge as RFEdge } from "@xyflow/react";
import type { Id } from "@/convex/_generated/dataModel";
import { NODE_DEFAULTS, NODE_HANDLE_MAP } from "@/lib/canvas-utils";
import type { CanvasNodeType } from "@/lib/canvas-node-types";
import { isOptimisticEdgeId } from "./canvas-helpers";
type CreateNodeArgs = {
canvasId: Id<"canvases">;
type: string;
type: CanvasNodeType;
positionX: number;
positionY: number;
width: number;
@@ -28,7 +29,7 @@ type CreateNodeArgs = {
type CreateNodeWithEdgeSplitArgs = {
canvasId: Id<"canvases">;
type: string;
type: CanvasNodeType;
positionX: number;
positionY: number;
width: number;
@@ -70,7 +71,7 @@ type CreateNodeWithEdgeToTargetMutation = (
type FlowPoint = { x: number; y: number };
type CreateNodeWithIntersectionInput = {
type: string;
type: CanvasNodeType;
position: FlowPoint;
width?: number;
height?: number;

17
components/canvas/canvas-reconnect.ts
View File

@@ -18,6 +18,11 @@ type UseCanvasReconnectHandlersParams = {
targetHandle?: string;
}) => Promise<unknown>;
runRemoveEdgeMutation: (args: { edgeId: Id<"edges"> }) => Promise<unknown>;
validateConnection?: (
oldEdge: RFEdge,
newConnection: Connection,
) => string | null;
onInvalidConnection?: (message: string) => void;
};
export function useCanvasReconnectHandlers({
@@ -27,6 +32,8 @@ export function useCanvasReconnectHandlers({
setEdges,
runCreateEdgeMutation,
runRemoveEdgeMutation,
validateConnection,
onInvalidConnection,
}: UseCanvasReconnectHandlersParams): {
onReconnectStart: () => void;
onReconnect: (oldEdge: RFEdge, newConnection: Connection) => void;
@@ -45,11 +52,19 @@ export function useCanvasReconnectHandlers({
const onReconnect = useCallback(
(oldEdge: RFEdge, newConnection: Connection) => {
const validationError = validateConnection?.(oldEdge, newConnection) ?? null;
if (validationError) {
edgeReconnectSuccessful.current = true;
pendingReconnectRef.current = null;
onInvalidConnection?.(validationError);
return;
}
edgeReconnectSuccessful.current = true;
pendingReconnectRef.current = { oldEdge, newConnection };
setEdges((currentEdges) => reconnectEdge(oldEdge, newConnection, currentEdges));
},
[edgeReconnectSuccessful, setEdges],
[edgeReconnectSuccessful, onInvalidConnection, setEdges, validateConnection],
);
const onReconnectEnd = useCallback(

121
components/canvas/canvas.tsx
View File

@@ -65,6 +65,11 @@ import {
import { api } from "@/convex/_generated/api";
import type { Doc, Id } from "@/convex/_generated/dataModel";
import { authClient } from "@/lib/auth-client";
import {
isAdjustmentNodeType,
isCanvasNodeType,
type CanvasNodeType,
} from "@/lib/canvas-node-types";
import { nodeTypes } from "./node-types";
import {
@@ -157,6 +162,54 @@ function hasStorageId(node: Doc<"nodes">): boolean {
return typeof data?.storageId === "string" && data.storageId.length > 0;
}
const ADJUSTMENT_ALLOWED_SOURCE_TYPES = new Set([
"image",
"asset",
"ai-image",
"curves",
"color-adjust",
"light-adjust",
"detail-adjust",
]);
const ADJUSTMENT_DISALLOWED_TARGET_TYPES = new Set(["prompt", "ai-image"]);
function validateCanvasConnection(
connection: Connection,
nodes: RFNode[],
edges: RFEdge[],
edgeToReplaceId?: string,
): string | null {
if (!connection.source || !connection.target) return "Unvollstaendige Verbindung.";
if (connection.source === connection.target) return "Node kann nicht mit sich selbst verbunden werden.";
const sourceNode = nodes.find((node) => node.id === connection.source);
const targetNode = nodes.find((node) => node.id === connection.target);
if (!sourceNode || !targetNode) return "Verbindung enthaelt unbekannte Nodes.";
const sourceType = sourceNode.type ?? "";
const targetType = targetNode.type ?? "";
if (isAdjustmentNodeType(targetType)) {
if (!ADJUSTMENT_ALLOWED_SOURCE_TYPES.has(sourceType)) {
return "Adjustment-Nodes akzeptieren nur Bild-, Asset-, KI-Bild- oder Adjustment-Input.";
}
const incomingCount = edges.filter(
(edge) => edge.target === connection.target && edge.id !== edgeToReplaceId,
).length;
if (incomingCount >= 1) {
return "Adjustment-Nodes erlauben genau eine eingehende Verbindung.";
}
}
if (isAdjustmentNodeType(sourceType) && ADJUSTMENT_DISALLOWED_TARGET_TYPES.has(targetType)) {
return "Adjustment-Ausgaben koennen nicht an Prompt- oder KI-Bild-Nodes angeschlossen werden.";
}
return null;
}
function CanvasInner({ canvasId }: CanvasInnerProps) {
const t = useTranslations('toasts');
const { screenToFlowPosition } = useReactFlow();
@@ -899,7 +952,9 @@ function CanvasInner({ canvasId }: CanvasInnerProps) {
try {
if (op.type === "createNode") {
const realId = await createNodeRaw(op.payload);
const realId = await createNodeRaw(
op.payload as Parameters<typeof createNodeRaw>[0],
);
await remapOptimisticNodeLocally(op.payload.clientRequestId, realId);
await syncPendingMoveForClientRequestRef.current(
op.payload.clientRequestId,
@@ -907,7 +962,9 @@ function CanvasInner({ canvasId }: CanvasInnerProps) {
);
setEdgeSyncNonce((value) => value + 1);
} else if (op.type === "createNodeWithEdgeFromSource") {
const realId = await createNodeWithEdgeFromSourceRaw(op.payload);
const realId = await createNodeWithEdgeFromSourceRaw(
op.payload as Parameters<typeof createNodeWithEdgeFromSourceRaw>[0],
);
await remapOptimisticNodeLocally(op.payload.clientRequestId, realId);
await syncPendingMoveForClientRequestRef.current(
op.payload.clientRequestId,
@@ -915,7 +972,9 @@ function CanvasInner({ canvasId }: CanvasInnerProps) {
);
setEdgeSyncNonce((value) => value + 1);
} else if (op.type === "createNodeWithEdgeToTarget") {
const realId = await createNodeWithEdgeToTargetRaw(op.payload);
const realId = await createNodeWithEdgeToTargetRaw(
op.payload as Parameters<typeof createNodeWithEdgeToTargetRaw>[0],
);
await remapOptimisticNodeLocally(op.payload.clientRequestId, realId);
await syncPendingMoveForClientRequestRef.current(
op.payload.clientRequestId,
@@ -923,7 +982,9 @@ function CanvasInner({ canvasId }: CanvasInnerProps) {
);
setEdgeSyncNonce((value) => value + 1);
} else if (op.type === "createNodeWithEdgeSplit") {
const realId = await createNodeWithEdgeSplitRaw(op.payload);
const realId = await createNodeWithEdgeSplitRaw(
op.payload as Parameters<typeof createNodeWithEdgeSplitRaw>[0],
);
await remapOptimisticNodeLocally(op.payload.clientRequestId, realId);
await syncPendingMoveForClientRequestRef.current(
op.payload.clientRequestId,
@@ -1625,6 +1686,11 @@ function CanvasInner({ canvasId }: CanvasInnerProps) {
setEdges,
runCreateEdgeMutation,
runRemoveEdgeMutation,
validateConnection: (oldEdge, nextConnection) =>
validateCanvasConnection(nextConnection, nodes, edges, oldEdge.id),
onInvalidConnection: (message) => {
toast.warning("Verbindung abgelehnt", message);
},
});
// ─── Convex → Lokaler State Sync ──────────────────────────────
@@ -2262,17 +2328,23 @@ function CanvasInner({ canvasId }: CanvasInnerProps) {
// ─── Neue Verbindung → Convex Edge ────────────────────────────
const onConnect = useCallback(
(connection: Connection) => {
if (connection.source && connection.target) {
void runCreateEdgeMutation({
canvasId,
sourceNodeId: connection.source as Id<"nodes">,
targetNodeId: connection.target as Id<"nodes">,
sourceHandle: connection.sourceHandle ?? undefined,
targetHandle: connection.targetHandle ?? undefined,
});
const validationError = validateCanvasConnection(connection, nodes, edges);
if (validationError) {
toast.warning("Verbindung abgelehnt", validationError);
return;
}
if (!connection.source || !connection.target) return;
void runCreateEdgeMutation({
canvasId,
sourceNodeId: connection.source as Id<"nodes">,
targetNodeId: connection.target as Id<"nodes">,
sourceHandle: connection.sourceHandle ?? undefined,
targetHandle: connection.targetHandle ?? undefined,
});
},
[canvasId, runCreateEdgeMutation],
[canvasId, edges, nodes, runCreateEdgeMutation],
);
const onConnectEnd = useCallback<OnConnectEnd>(
@@ -2477,19 +2549,29 @@ function CanvasInner({ canvasId }: CanvasInnerProps) {
}
// Support both plain type string (sidebar) and JSON payload (browser panels)
let nodeType: string;
let nodeType: CanvasNodeType | null = null;
let payloadData: Record<string, unknown> | undefined;
try {
const parsed = JSON.parse(rawData);
if (typeof parsed === "object" && parsed.type) {
nodeType = parsed.type;
if (
typeof parsed === "object" &&
parsed !== null &&
typeof (parsed as { type?: unknown }).type === "string" &&
isCanvasNodeType((parsed as { type: string }).type)
) {
nodeType = (parsed as { type: CanvasNodeType }).type;
payloadData = parsed.data;
} else {
nodeType = rawData;
}
} catch {
nodeType = rawData;
if (isCanvasNodeType(rawData)) {
nodeType = rawData;
}
}
if (!nodeType) {
toast.warning("Node-Typ nicht verfuegbar", "Unbekannter Node konnte nicht erstellt werden.");
return;
}
const position = screenToFlowPosition({
@@ -2526,6 +2608,7 @@ function CanvasInner({ canvasId }: CanvasInnerProps) {
},
[
screenToFlowPosition,
t,
canvasId,
generateUploadUrl,
isSyncOnline,

10
components/canvas/node-types.ts
View File

@@ -8,6 +8,11 @@ import NoteNode from "./nodes/note-node";
import CompareNode from "./nodes/compare-node";
import AssetNode from "./nodes/asset-node";
import VideoNode from "./nodes/video-node";
import CurvesNode from "./nodes/curves-node";
import ColorAdjustNode from "./nodes/color-adjust-node";
import LightAdjustNode from "./nodes/light-adjust-node";
import DetailAdjustNode from "./nodes/detail-adjust-node";
import RenderNode from "./nodes/render-node";
/**
* Node-Type-Map für React Flow.
@@ -27,4 +32,9 @@ export const nodeTypes = {
compare: CompareNode,
asset: AssetNode,
video: VideoNode,
curves: CurvesNode,
"color-adjust": ColorAdjustNode,
"light-adjust": LightAdjustNode,
"detail-adjust": DetailAdjustNode,
render: RenderNode,
} as const;

38
components/canvas/nodes/adjustment-controls.tsx Normal file
View File

@@ -0,0 +1,38 @@
"use client";
import { Slider } from "@/components/ui/slider";
export function SliderRow({
label,
value,
min,
max,
step = 1,
onChange,
}: {
label: string;
value: number;
min: number;
max: number;
step?: number;
onChange: (nextValue: number) => void;
}) {
return (
<div className="space-y-1">
<div className="flex items-center justify-between text-[11px] text-muted-foreground">
<span>{label}</span>
<span className="font-medium text-foreground">{value.toFixed(step < 1 ? 2 : 0)}</span>
</div>
<Slider
value={[value]}
min={min}
max={max}
step={step}
onValueChange={(values) => {
onChange(values[0] ?? value);
}}
className="nodrag nowheel"
/>
</div>
);
}

220
components/canvas/nodes/adjustment-preview.tsx Normal file
View File

@@ -0,0 +1,220 @@
"use client";
import { useMemo } from "react";
import { useStore, type Node } from "@xyflow/react";
import { usePipelinePreview } from "@/hooks/use-pipeline-preview";
import { collectPipeline, getSourceImage, type PipelineStep } from "@/lib/image-pipeline/contracts";
const PREVIEW_PIPELINE_TYPES = new Set([
"curves",
"color-adjust",
"light-adjust",
"detail-adjust",
]);
function resolveNodeImageUrl(node: Node): string | null {
const data = (node.data ?? {}) as Record<string, unknown>;
const directUrl = typeof data.url === "string" ? data.url : null;
if (directUrl && directUrl.length > 0) {
return directUrl;
}
const previewUrl = typeof data.previewUrl === "string" ? data.previewUrl : null;
if (previewUrl && previewUrl.length > 0) {
return previewUrl;
}
return null;
}
function compactHistogram(values: readonly number[], points = 64): number[] {
if (points <= 0) {
return [];
}
if (values.length === 0) {
return Array.from({ length: points }, () => 0);
}
const bucket = values.length / points;
const compacted: number[] = [];
for (let pointIndex = 0; pointIndex < points; pointIndex += 1) {
let sum = 0;
const start = Math.floor(pointIndex * bucket);
const end = Math.min(values.length, Math.floor((pointIndex + 1) * bucket) || start + 1);
for (let index = start; index < end; index += 1) {
sum += values[index] ?? 0;
}
compacted.push(sum);
}
return compacted;
}
function histogramPolyline(values: readonly number[], maxValue: number, width: number, height: number): string {
if (values.length === 0) {
return "";
}
const divisor = Math.max(1, values.length - 1);
return values
.map((value, index) => {
const x = (index / divisor) * width;
const normalized = maxValue > 0 ? value / maxValue : 0;
const y = height - normalized * height;
return `${x.toFixed(2)},${y.toFixed(2)}`;
})
.join(" ");
}
export default function AdjustmentPreview({
nodeId,
nodeWidth,
currentType,
currentParams,
}: {
nodeId: string;
nodeWidth: number;
currentType: string;
currentParams: unknown;
}) {
const nodes = useStore((state) => state.nodes);
const edges = useStore((state) => state.edges);
const pipelineNodes = useMemo(
() => nodes.map((node) => ({ id: node.id, type: node.type ?? "", data: node.data })),
[nodes],
);
const pipelineEdges = useMemo(
() => edges.map((edge) => ({ source: edge.source, target: edge.target })),
[edges],
);
const sourceUrl = useMemo(
() =>
getSourceImage({
nodeId,
nodes: pipelineNodes,
edges: pipelineEdges,
isSourceNode: (node) =>
node.type === "image" || node.type === "ai-image" || node.type === "asset",
getSourceImageFromNode: (node) => {
const sourceNode = nodes.find((candidate) => candidate.id === node.id);
return sourceNode ? resolveNodeImageUrl(sourceNode) : null;
},
}),
[nodeId, nodes, pipelineEdges, pipelineNodes],
);
const steps = useMemo(() => {
const collected = collectPipeline({
nodeId,
nodes: pipelineNodes,
edges: pipelineEdges,
isPipelineNode: (node) => PREVIEW_PIPELINE_TYPES.has(node.type ?? ""),
});
return collected.map((step) => {
if (step.nodeId === nodeId && step.type === currentType) {
return {
...step,
params: currentParams,
} as PipelineStep;
}
return step as PipelineStep;
});
}, [currentParams, currentType, nodeId, pipelineEdges, pipelineNodes]);
const { canvasRef, histogram, isRendering, hasSource, previewAspectRatio, error } =
usePipelinePreview({
sourceUrl,
steps,
nodeWidth,
});
const histogramSeries = useMemo(() => {
const red = compactHistogram(histogram.red, 64);
const green = compactHistogram(histogram.green, 64);
const blue = compactHistogram(histogram.blue, 64);
const rgb = compactHistogram(histogram.rgb, 64);
const max = Math.max(1, ...red, ...green, ...blue, ...rgb);
return { red, green, blue, rgb, max };
}, [histogram.blue, histogram.green, histogram.red, histogram.rgb]);
const histogramPolylines = useMemo(() => {
const width = 96;
const height = 44;
return {
red: histogramPolyline(histogramSeries.red, histogramSeries.max, width, height),
green: histogramPolyline(histogramSeries.green, histogramSeries.max, width, height),
blue: histogramPolyline(histogramSeries.blue, histogramSeries.max, width, height),
rgb: histogramPolyline(histogramSeries.rgb, histogramSeries.max, width, height),
};
}, [histogramSeries.blue, histogramSeries.green, histogramSeries.max, histogramSeries.red, histogramSeries.rgb]);
return (
<div className="space-y-2">
<div
className="relative overflow-hidden rounded-md border border-border bg-muted/30"
style={{ aspectRatio: `${Math.max(0.25, previewAspectRatio)}` }}
>
{!hasSource ? (
<div className="absolute inset-0 flex items-center justify-center px-3 text-center text-[11px] text-muted-foreground">
Verbinde eine Bild-, Asset- oder KI-Bild-Node fuer Live-Preview.
</div>
) : null}
{hasSource ? (
<canvas
ref={canvasRef}
className="h-full w-full"
/>
) : null}
{isRendering ? (
<div className="absolute right-1 top-1 rounded bg-background/80 px-1.5 py-0.5 text-[10px] text-muted-foreground">
Rendering...
</div>
) : null}
<div className="absolute bottom-2 right-2 z-10 w-28 rounded-md border border-border/80 bg-background/85 px-2 py-1.5 backdrop-blur-sm">
<svg
viewBox="0 0 96 44"
className="h-11 w-full"
role="img"
aria-label="Histogramm als RGB-Linienkurven"
>
<polyline
points={histogramPolylines.rgb}
fill="none"
stroke="rgba(248, 250, 252, 0.9)"
strokeWidth={1.6}
strokeLinecap="round"
strokeLinejoin="round"
/>
<polyline
points={histogramPolylines.red}
fill="none"
stroke="rgba(248, 113, 113, 0.9)"
strokeWidth={1.2}
strokeLinecap="round"
strokeLinejoin="round"
/>
<polyline
points={histogramPolylines.green}
fill="none"
stroke="rgba(74, 222, 128, 0.85)"
strokeWidth={1.2}
strokeLinecap="round"
strokeLinejoin="round"
/>
<polyline
points={histogramPolylines.blue}
fill="none"
stroke="rgba(96, 165, 250, 0.88)"
strokeWidth={1.2}
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</div>
</div>
{error ? <p className="text-[11px] text-destructive">{error}</p> : null}
</div>
);
}

25
components/canvas/nodes/base-node-wrapper.tsx
View File

@@ -11,6 +11,7 @@ import {
} from "@xyflow/react";
import { Trash2, Copy } from "lucide-react";
import { useCanvasPlacement } from "@/components/canvas/canvas-placement-context";
import { isCanvasNodeType } from "@/lib/canvas-node-types";
import { NodeErrorBoundary } from "./node-error-boundary";
interface ResizeConfig {
@@ -38,6 +39,11 @@ const RESIZE_CONFIGS: Record<string, ResizeConfig> = {
"ai-image": { minWidth: 200, minHeight: 208, keepAspectRatio: false },
compare: { minWidth: 300, minHeight: 200 },
prompt: { minWidth: 260, minHeight: 220 },
curves: { minWidth: 240, minHeight: 320 },
"color-adjust": { minWidth: 240, minHeight: 360 },
"light-adjust": { minWidth: 240, minHeight: 360 },
"detail-adjust": { minWidth: 240, minHeight: 360 },
render: { minWidth: 260, minHeight: 300, keepAspectRatio: true },
text: { minWidth: 220, minHeight: 90 },
note: { minWidth: 200, minHeight: 90 },
};
@@ -58,6 +64,19 @@ const INTERNAL_FIELDS = new Set([
"retryCount",
"url",
"canvasId",
"lastRenderedAt",
"lastRenderedHash",
"lastRenderWidth",
"lastRenderHeight",
"lastRenderFormat",
"lastRenderMimeType",
"lastRenderSizeBytes",
"lastRenderQuality",
"lastRenderSourceWidth",
"lastRenderSourceHeight",
"lastRenderWasSizeClamped",
"lastRenderError",
"lastRenderErrorHash",
]);
function NodeToolbarActions({
@@ -128,7 +147,10 @@ function NodeToolbarActions({
// Fire-and-forget: optimistic update makes the duplicate appear instantly
void createNodeWithIntersection({
type: node.type ?? "text",
type:
typeof node.type === "string" && isCanvasNodeType(node.type)
? node.type
: "text",
position: {
x: originalPosition.x + 50,
y: originalPosition.y + 50,
@@ -213,6 +235,7 @@ export default function BaseNodeWrapper({
analyzing: "border-yellow-400 animate-pulse",
clarifying: "border-amber-400",
executing: "border-yellow-400 animate-pulse",
rendering: "border-yellow-400 animate-pulse",
done: "border-green-500",
error: "border-red-500",
};

257
components/canvas/nodes/color-adjust-node.tsx Normal file
View File

@@ -0,0 +1,257 @@
"use client";
import { useEffect, useMemo, useRef, useState } from "react";
import { Handle, Position, type Node, type NodeProps } from "@xyflow/react";
import { useMutation } from "convex/react";
import { Palette } from "lucide-react";
import { api } from "@/convex/_generated/api";
import type { Id } from "@/convex/_generated/dataModel";
import { useAuthQuery } from "@/hooks/use-auth-query";
import { useDebouncedCallback } from "@/hooks/use-debounced-callback";
import { useCanvasSync } from "@/components/canvas/canvas-sync-context";
import { SliderRow } from "@/components/canvas/nodes/adjustment-controls";
import BaseNodeWrapper from "@/components/canvas/nodes/base-node-wrapper";
import AdjustmentPreview from "@/components/canvas/nodes/adjustment-preview";
import {
cloneAdjustmentData,
DEFAULT_COLOR_ADJUST_DATA,
normalizeColorAdjustData,
type ColorAdjustData,
} from "@/lib/image-pipeline/adjustment-types";
import { COLOR_PRESETS } from "@/lib/image-pipeline/presets";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { toast } from "@/lib/toast";
type ColorAdjustNodeData = ColorAdjustData & {
_status?: string;
_statusMessage?: string;
};
export type ColorAdjustNodeType = Node<ColorAdjustNodeData, "color-adjust">;
type PresetDoc = {
_id: Id<"adjustmentPresets">;
name: string;
params: unknown;
};
export default function ColorAdjustNode({ id, data, selected, width }: NodeProps<ColorAdjustNodeType>) {
const { queueNodeDataUpdate } = useCanvasSync();
const savePreset = useMutation(api.presets.save);
const userPresets = (useAuthQuery(api.presets.list, { nodeType: "color-adjust" }) ?? []) as PresetDoc[];
const [localData, setLocalData] = useState<ColorAdjustData>(() =>
normalizeColorAdjustData({ ...cloneAdjustmentData(DEFAULT_COLOR_ADJUST_DATA), ...data }),
);
const [presetSelection, setPresetSelection] = useState("custom");
const localDataRef = useRef(localData);
useEffect(() => {
localDataRef.current = localData;
}, [localData]);
useEffect(() => {
const timer = window.setTimeout(() => {
setLocalData(
normalizeColorAdjustData({ ...cloneAdjustmentData(DEFAULT_COLOR_ADJUST_DATA), ...data }),
);
}, 0);
return () => {
window.clearTimeout(timer);
};
}, [data]);
const queueSave = useDebouncedCallback(() => {
void queueNodeDataUpdate({
nodeId: id as Id<"nodes">,
data: localDataRef.current,
});
}, 16);
const updateData = (updater: (draft: ColorAdjustData) => ColorAdjustData) => {
setPresetSelection("custom");
setLocalData((current) => {
const next = updater(current);
localDataRef.current = next;
queueSave();
return next;
});
};
const builtinOptions = useMemo(() => Object.entries(COLOR_PRESETS), []);
const applyPresetValue = (value: string) => {
if (value === "custom") {
setPresetSelection("custom");
return;
}
if (value.startsWith("builtin:")) {
const key = value.replace("builtin:", "");
const preset = COLOR_PRESETS[key];
if (!preset) return;
const next = cloneAdjustmentData(preset);
setPresetSelection(value);
setLocalData(next);
localDataRef.current = next;
queueSave();
return;
}
if (value.startsWith("user:")) {
const presetId = value.replace("user:", "") as Id<"adjustmentPresets">;
const preset = userPresets.find((entry) => entry._id === presetId);
if (!preset) return;
const next = normalizeColorAdjustData(preset.params);
setPresetSelection(value);
setLocalData(next);
localDataRef.current = next;
queueSave();
}
};
const handleSavePreset = async () => {
const name = window.prompt("Preset-Name");
if (!name) return;
await savePreset({
name,
nodeType: "color-adjust",
params: localData,
});
toast.success("Preset gespeichert");
};
return (
<BaseNodeWrapper
nodeType="color-adjust"
selected={selected}
status={data._status}
statusMessage={data._statusMessage}
className="min-w-[240px] border-cyan-500/30"
>
<Handle
type="target"
position={Position.Left}
className="!h-3 !w-3 !border-2 !border-background !bg-cyan-500"
/>
<div className="space-y-3 p-3">
<div className="flex items-center gap-1.5 text-xs font-medium text-cyan-700 dark:text-cyan-400">
<Palette className="h-3.5 w-3.5" />
Farbe
</div>
<div className="flex items-center gap-2">
<Select value={presetSelection} onValueChange={applyPresetValue}>
<SelectTrigger className="nodrag h-8 text-xs" size="sm">
<SelectValue placeholder="Preset" />
</SelectTrigger>
<SelectContent className="nodrag">
<SelectItem value="custom">Custom</SelectItem>
{builtinOptions.map(([name]) => (
<SelectItem key={name} value={`builtin:${name}`}>
Built-in: {name}
</SelectItem>
))}
{userPresets.map((preset) => (
<SelectItem key={preset._id} value={`user:${preset._id}`}>
User: {preset.name}
</SelectItem>
))}
</SelectContent>
</Select>
<button
type="button"
className="nodrag rounded-md border px-2 py-1 text-[11px]"
onClick={() => {
void handleSavePreset();
}}
>
Save
</button>
</div>
<AdjustmentPreview
nodeId={id}
nodeWidth={width ?? 240}
currentType="color-adjust"
currentParams={localData}
/>
<div className="space-y-2 rounded-md border border-border/80 bg-background/70 p-2">
<SliderRow
label="Hue"
value={localData.hsl.hue}
min={-180}
max={180}
onChange={(value) =>
updateData((current) => ({
...current,
hsl: { ...current.hsl, hue: value },
preset: null,
}))
}
/>
<SliderRow
label="Saturation"
value={localData.hsl.saturation}
min={-100}
max={100}
onChange={(value) =>
updateData((current) => ({
...current,
hsl: { ...current.hsl, saturation: value },
preset: null,
}))
}
/>
<SliderRow
label="Luminance"
value={localData.hsl.luminance}
min={-100}
max={100}
onChange={(value) =>
updateData((current) => ({
...current,
hsl: { ...current.hsl, luminance: value },
preset: null,
}))
}
/>
<SliderRow
label="Temperature"
value={localData.temperature}
min={-100}
max={100}
onChange={(value) =>
updateData((current) => ({ ...current, temperature: value, preset: null }))
}
/>
<SliderRow
label="Tint"
value={localData.tint}
min={-100}
max={100}
onChange={(value) =>
updateData((current) => ({ ...current, tint: value, preset: null }))
}
/>
<SliderRow
label="Vibrance"
value={localData.vibrance}
min={-100}
max={100}
onChange={(value) =>
updateData((current) => ({ ...current, vibrance: value, preset: null }))
}
/>
</div>
</div>
<Handle
type="source"
position={Position.Right}
className="!h-3 !w-3 !border-2 !border-background !bg-cyan-500"
/>
</BaseNodeWrapper>
);
}

232
components/canvas/nodes/curves-node.tsx Normal file
View File

@@ -0,0 +1,232 @@
"use client";
import { useEffect, useMemo, useRef, useState } from "react";
import { Handle, Position, type Node, type NodeProps } from "@xyflow/react";
import { useMutation } from "convex/react";
import { TrendingUp } from "lucide-react";
import { api } from "@/convex/_generated/api";
import type { Id } from "@/convex/_generated/dataModel";
import { useAuthQuery } from "@/hooks/use-auth-query";
import { useDebouncedCallback } from "@/hooks/use-debounced-callback";
import { useCanvasSync } from "@/components/canvas/canvas-sync-context";
import { SliderRow } from "@/components/canvas/nodes/adjustment-controls";
import BaseNodeWrapper from "@/components/canvas/nodes/base-node-wrapper";
import AdjustmentPreview from "@/components/canvas/nodes/adjustment-preview";
import {
cloneAdjustmentData,
DEFAULT_CURVES_DATA,
normalizeCurvesData,
type CurvesData,
} from "@/lib/image-pipeline/adjustment-types";
import { CURVE_PRESETS } from "@/lib/image-pipeline/presets";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { toast } from "@/lib/toast";
type CurvesNodeData = CurvesData & {
_status?: string;
_statusMessage?: string;
};
export type CurvesNodeType = Node<CurvesNodeData, "curves">;
type PresetDoc = {
_id: Id<"adjustmentPresets">;
name: string;
params: unknown;
};
export default function CurvesNode({ id, data, selected, width }: NodeProps<CurvesNodeType>) {
const { queueNodeDataUpdate } = useCanvasSync();
const savePreset = useMutation(api.presets.save);
const userPresets = (useAuthQuery(api.presets.list, { nodeType: "curves" }) ?? []) as PresetDoc[];
const [localData, setLocalData] = useState<CurvesData>(() =>
normalizeCurvesData({ ...cloneAdjustmentData(DEFAULT_CURVES_DATA), ...data }),
);
const [presetSelection, setPresetSelection] = useState("custom");
const localDataRef = useRef(localData);
useEffect(() => {
localDataRef.current = localData;
}, [localData]);
useEffect(() => {
const timer = window.setTimeout(() => {
setLocalData(
normalizeCurvesData({ ...cloneAdjustmentData(DEFAULT_CURVES_DATA), ...data }),
);
}, 0);
return () => {
window.clearTimeout(timer);
};
}, [data]);
const queueSave = useDebouncedCallback(() => {
void queueNodeDataUpdate({
nodeId: id as Id<"nodes">,
data: localDataRef.current,
});
}, 16);
const updateData = (updater: (draft: CurvesData) => CurvesData) => {
setPresetSelection("custom");
setLocalData((current) => {
const next = updater(current);
localDataRef.current = next;
queueSave();
return next;
});
};
const builtinOptions = useMemo(() => Object.entries(CURVE_PRESETS), []);
const applyPresetValue = (value: string) => {
if (value === "custom") {
setPresetSelection("custom");
return;
}
if (value.startsWith("builtin:")) {
const key = value.replace("builtin:", "");
const preset = CURVE_PRESETS[key];
if (!preset) return;
setPresetSelection(value);
setLocalData(cloneAdjustmentData(preset));
localDataRef.current = cloneAdjustmentData(preset);
queueSave();
return;
}
if (value.startsWith("user:")) {
const presetId = value.replace("user:", "") as Id<"adjustmentPresets">;
const preset = userPresets.find((entry) => entry._id === presetId);
if (!preset) return;
const next = normalizeCurvesData(preset.params);
setPresetSelection(value);
setLocalData(next);
localDataRef.current = next;
queueSave();
}
};
const handleSavePreset = async () => {
const name = window.prompt("Preset-Name");
if (!name) return;
await savePreset({
name,
nodeType: "curves",
params: localData,
});
toast.success("Preset gespeichert");
};
return (
<BaseNodeWrapper
nodeType="curves"
selected={selected}
status={data._status}
statusMessage={data._statusMessage}
className="min-w-[240px] border-emerald-500/30"
>
<Handle
type="target"
position={Position.Left}
className="!h-3 !w-3 !border-2 !border-background !bg-emerald-500"
/>
<div className="space-y-3 p-3">
<div className="flex items-center gap-1.5 text-xs font-medium text-emerald-700 dark:text-emerald-400">
<TrendingUp className="h-3.5 w-3.5" />
Kurven
</div>
<div className="flex items-center gap-2">
<Select value={presetSelection} onValueChange={applyPresetValue}>
<SelectTrigger className="nodrag h-8 text-xs" size="sm">
<SelectValue placeholder="Preset" />
</SelectTrigger>
<SelectContent className="nodrag">
<SelectItem value="custom">Custom</SelectItem>
{builtinOptions.map(([name]) => (
<SelectItem key={name} value={`builtin:${name}`}>
Built-in: {name}
</SelectItem>
))}
{userPresets.map((preset) => (
<SelectItem key={preset._id} value={`user:${preset._id}`}>
User: {preset.name}
</SelectItem>
))}
</SelectContent>
</Select>
<button
type="button"
className="nodrag rounded-md border px-2 py-1 text-[11px]"
onClick={() => {
void handleSavePreset();
}}
>
Save
</button>
</div>
<AdjustmentPreview
nodeId={id}
nodeWidth={width ?? 240}
currentType="curves"
currentParams={localData}
/>
<div className="space-y-2 rounded-md border border-border/80 bg-background/70 p-2">
<SliderRow
label="Black Point"
value={localData.levels.blackPoint}
min={0}
max={255}
onChange={(value) =>
updateData((current) => ({
...current,
levels: { ...current.levels, blackPoint: value },
preset: null,
}))
}
/>
<SliderRow
label="White Point"
value={localData.levels.whitePoint}
min={0}
max={255}
onChange={(value) =>
updateData((current) => ({
...current,
levels: { ...current.levels, whitePoint: value },
preset: null,
}))
}
/>
<SliderRow
label="Gamma"
value={localData.levels.gamma}
min={0.1}
max={3}
step={0.01}
onChange={(value) =>
updateData((current) => ({
...current,
levels: { ...current.levels, gamma: value },
preset: null,
}))
}
/>
</div>
</div>
<Handle
type="source"
position={Position.Right}
className="!h-3 !w-3 !border-2 !border-background !bg-emerald-500"
/>
</BaseNodeWrapper>
);
}

198
components/canvas/nodes/detail-adjust-node.tsx Normal file
View File

@@ -0,0 +1,198 @@
"use client";
import { useEffect, useMemo, useRef, useState } from "react";
import { Handle, Position, type Node, type NodeProps } from "@xyflow/react";
import { useMutation } from "convex/react";
import { Focus } from "lucide-react";
import { api } from "@/convex/_generated/api";
import type { Id } from "@/convex/_generated/dataModel";
import { useAuthQuery } from "@/hooks/use-auth-query";
import { useDebouncedCallback } from "@/hooks/use-debounced-callback";
import { useCanvasSync } from "@/components/canvas/canvas-sync-context";
import { SliderRow } from "@/components/canvas/nodes/adjustment-controls";
import BaseNodeWrapper from "@/components/canvas/nodes/base-node-wrapper";
import AdjustmentPreview from "@/components/canvas/nodes/adjustment-preview";
import {
cloneAdjustmentData,
DEFAULT_DETAIL_ADJUST_DATA,
normalizeDetailAdjustData,
type DetailAdjustData,
} from "@/lib/image-pipeline/adjustment-types";
import { DETAIL_PRESETS } from "@/lib/image-pipeline/presets";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { toast } from "@/lib/toast";
type DetailAdjustNodeData = DetailAdjustData & {
_status?: string;
_statusMessage?: string;
};
export type DetailAdjustNodeType = Node<DetailAdjustNodeData, "detail-adjust">;
type PresetDoc = {
_id: Id<"adjustmentPresets">;
name: string;
params: unknown;
};
export default function DetailAdjustNode({ id, data, selected, width }: NodeProps<DetailAdjustNodeType>) {
const { queueNodeDataUpdate } = useCanvasSync();
const savePreset = useMutation(api.presets.save);
const userPresets = (useAuthQuery(api.presets.list, { nodeType: "detail-adjust" }) ?? []) as PresetDoc[];
const [localData, setLocalData] = useState<DetailAdjustData>(() =>
normalizeDetailAdjustData({ ...cloneAdjustmentData(DEFAULT_DETAIL_ADJUST_DATA), ...data }),
);
const [presetSelection, setPresetSelection] = useState("custom");
const localDataRef = useRef(localData);
useEffect(() => {
localDataRef.current = localData;
}, [localData]);
useEffect(() => {
const timer = window.setTimeout(() => {
setLocalData(
normalizeDetailAdjustData({ ...cloneAdjustmentData(DEFAULT_DETAIL_ADJUST_DATA), ...data }),
);
}, 0);
return () => {
window.clearTimeout(timer);
};
}, [data]);
const queueSave = useDebouncedCallback(() => {
void queueNodeDataUpdate({
nodeId: id as Id<"nodes">,
data: localDataRef.current,
});
}, 16);
const updateData = (updater: (draft: DetailAdjustData) => DetailAdjustData) => {
setPresetSelection("custom");
setLocalData((current) => {
const next = updater(current);
localDataRef.current = next;
queueSave();
return next;
});
};
const builtinOptions = useMemo(() => Object.entries(DETAIL_PRESETS), []);
const applyPresetValue = (value: string) => {
if (value === "custom") {
setPresetSelection("custom");
return;
}
if (value.startsWith("builtin:")) {
const key = value.replace("builtin:", "");
const preset = DETAIL_PRESETS[key];
if (!preset) return;
const next = cloneAdjustmentData(preset);
setPresetSelection(value);
setLocalData(next);
localDataRef.current = next;
queueSave();
return;
}
if (value.startsWith("user:")) {
const presetId = value.replace("user:", "") as Id<"adjustmentPresets">;
const preset = userPresets.find((entry) => entry._id === presetId);
if (!preset) return;
const next = normalizeDetailAdjustData(preset.params);
setPresetSelection(value);
setLocalData(next);
localDataRef.current = next;
queueSave();
}
};
const handleSavePreset = async () => {
const name = window.prompt("Preset-Name");
if (!name) return;
await savePreset({
name,
nodeType: "detail-adjust",
params: localData,
});
toast.success("Preset gespeichert");
};
return (
<BaseNodeWrapper
nodeType="detail-adjust"
selected={selected}
status={data._status}
statusMessage={data._statusMessage}
className="min-w-[240px] border-indigo-500/30"
>
<Handle
type="target"
position={Position.Left}
className="!h-3 !w-3 !border-2 !border-background !bg-indigo-500"
/>
<div className="space-y-3 p-3">
<div className="flex items-center gap-1.5 text-xs font-medium text-indigo-700 dark:text-indigo-300">
<Focus className="h-3.5 w-3.5" />
Detail
</div>
<div className="flex items-center gap-2">
<Select value={presetSelection} onValueChange={applyPresetValue}>
<SelectTrigger className="nodrag h-8 text-xs" size="sm">
<SelectValue placeholder="Preset" />
</SelectTrigger>
<SelectContent className="nodrag">
<SelectItem value="custom">Custom</SelectItem>
{builtinOptions.map(([name]) => (
<SelectItem key={name} value={`builtin:${name}`}>
Built-in: {name}
</SelectItem>
))}
{userPresets.map((preset) => (
<SelectItem key={preset._id} value={`user:${preset._id}`}>
User: {preset.name}
</SelectItem>
))}
</SelectContent>
</Select>
<button
type="button"
className="nodrag rounded-md border px-2 py-1 text-[11px]"
onClick={() => {
void handleSavePreset();
}}
>
Save
</button>
</div>
<AdjustmentPreview
nodeId={id}
nodeWidth={width ?? 240}
currentType="detail-adjust"
currentParams={localData}
/>
<div className="space-y-2 rounded-md border border-border/80 bg-background/70 p-2">
<SliderRow label="Sharpen" value={localData.sharpen.amount} min={0} max={500} onChange={(value) => updateData((current) => ({ ...current, sharpen: { ...current.sharpen, amount: value }, preset: null }))} />
<SliderRow label="Radius" value={localData.sharpen.radius} min={0.5} max={5} step={0.01} onChange={(value) => updateData((current) => ({ ...current, sharpen: { ...current.sharpen, radius: value }, preset: null }))} />
<SliderRow label="Threshold" value={localData.sharpen.threshold} min={0} max={255} onChange={(value) => updateData((current) => ({ ...current, sharpen: { ...current.sharpen, threshold: value }, preset: null }))} />
<SliderRow label="Clarity" value={localData.clarity} min={-100} max={100} onChange={(value) => updateData((current) => ({ ...current, clarity: value, preset: null }))} />
<SliderRow label="Denoise Luma" value={localData.denoise.luminance} min={0} max={100} onChange={(value) => updateData((current) => ({ ...current, denoise: { ...current.denoise, luminance: value }, preset: null }))} />
<SliderRow label="Denoise Color" value={localData.denoise.color} min={0} max={100} onChange={(value) => updateData((current) => ({ ...current, denoise: { ...current.denoise, color: value }, preset: null }))} />
<SliderRow label="Grain" value={localData.grain.amount} min={0} max={100} onChange={(value) => updateData((current) => ({ ...current, grain: { ...current.grain, amount: value }, preset: null }))} />
</div>
</div>
<Handle
type="source"
position={Position.Right}
className="!h-3 !w-3 !border-2 !border-background !bg-indigo-500"
/>
</BaseNodeWrapper>
);
}

199
components/canvas/nodes/light-adjust-node.tsx Normal file
View File

@@ -0,0 +1,199 @@
"use client";
import { useEffect, useMemo, useRef, useState } from "react";
import { Handle, Position, type Node, type NodeProps } from "@xyflow/react";
import { useMutation } from "convex/react";
import { Sun } from "lucide-react";
import { api } from "@/convex/_generated/api";
import type { Id } from "@/convex/_generated/dataModel";
import { useAuthQuery } from "@/hooks/use-auth-query";
import { useDebouncedCallback } from "@/hooks/use-debounced-callback";
import { useCanvasSync } from "@/components/canvas/canvas-sync-context";
import { SliderRow } from "@/components/canvas/nodes/adjustment-controls";
import BaseNodeWrapper from "@/components/canvas/nodes/base-node-wrapper";
import AdjustmentPreview from "@/components/canvas/nodes/adjustment-preview";
import {
cloneAdjustmentData,
DEFAULT_LIGHT_ADJUST_DATA,
normalizeLightAdjustData,
type LightAdjustData,
} from "@/lib/image-pipeline/adjustment-types";
import { LIGHT_PRESETS } from "@/lib/image-pipeline/presets";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { toast } from "@/lib/toast";
type LightAdjustNodeData = LightAdjustData & {
_status?: string;
_statusMessage?: string;
};
export type LightAdjustNodeType = Node<LightAdjustNodeData, "light-adjust">;
type PresetDoc = {
_id: Id<"adjustmentPresets">;
name: string;
params: unknown;
};
export default function LightAdjustNode({ id, data, selected, width }: NodeProps<LightAdjustNodeType>) {
const { queueNodeDataUpdate } = useCanvasSync();
const savePreset = useMutation(api.presets.save);
const userPresets = (useAuthQuery(api.presets.list, { nodeType: "light-adjust" }) ?? []) as PresetDoc[];
const [localData, setLocalData] = useState<LightAdjustData>(() =>
normalizeLightAdjustData({ ...cloneAdjustmentData(DEFAULT_LIGHT_ADJUST_DATA), ...data }),
);
const [presetSelection, setPresetSelection] = useState("custom");
const localDataRef = useRef(localData);
useEffect(() => {
localDataRef.current = localData;
}, [localData]);
useEffect(() => {
const timer = window.setTimeout(() => {
setLocalData(
normalizeLightAdjustData({ ...cloneAdjustmentData(DEFAULT_LIGHT_ADJUST_DATA), ...data }),
);
}, 0);
return () => {
window.clearTimeout(timer);
};
}, [data]);
const queueSave = useDebouncedCallback(() => {
void queueNodeDataUpdate({
nodeId: id as Id<"nodes">,
data: localDataRef.current,
});
}, 16);
const updateData = (updater: (draft: LightAdjustData) => LightAdjustData) => {
setPresetSelection("custom");
setLocalData((current) => {
const next = updater(current);
localDataRef.current = next;
queueSave();
return next;
});
};
const builtinOptions = useMemo(() => Object.entries(LIGHT_PRESETS), []);
const applyPresetValue = (value: string) => {
if (value === "custom") {
setPresetSelection("custom");
return;
}
if (value.startsWith("builtin:")) {
const key = value.replace("builtin:", "");
const preset = LIGHT_PRESETS[key];
if (!preset) return;
const next = cloneAdjustmentData(preset);
setPresetSelection(value);
setLocalData(next);
localDataRef.current = next;
queueSave();
return;
}
if (value.startsWith("user:")) {
const presetId = value.replace("user:", "") as Id<"adjustmentPresets">;
const preset = userPresets.find((entry) => entry._id === presetId);
if (!preset) return;
const next = normalizeLightAdjustData(preset.params);
setPresetSelection(value);
setLocalData(next);
localDataRef.current = next;
queueSave();
}
};
const handleSavePreset = async () => {
const name = window.prompt("Preset-Name");
if (!name) return;
await savePreset({
name,
nodeType: "light-adjust",
params: localData,
});
toast.success("Preset gespeichert");
};
return (
<BaseNodeWrapper
nodeType="light-adjust"
selected={selected}
status={data._status}
statusMessage={data._statusMessage}
className="min-w-[240px] border-amber-500/30"
>
<Handle
type="target"
position={Position.Left}
className="!h-3 !w-3 !border-2 !border-background !bg-amber-500"
/>
<div className="space-y-3 p-3">
<div className="flex items-center gap-1.5 text-xs font-medium text-amber-700 dark:text-amber-300">
<Sun className="h-3.5 w-3.5" />
Licht
</div>
<div className="flex items-center gap-2">
<Select value={presetSelection} onValueChange={applyPresetValue}>
<SelectTrigger className="nodrag h-8 text-xs" size="sm">
<SelectValue placeholder="Preset" />
</SelectTrigger>
<SelectContent className="nodrag">
<SelectItem value="custom">Custom</SelectItem>
{builtinOptions.map(([name]) => (
<SelectItem key={name} value={`builtin:${name}`}>
Built-in: {name}
</SelectItem>
))}
{userPresets.map((preset) => (
<SelectItem key={preset._id} value={`user:${preset._id}`}>
User: {preset.name}
</SelectItem>
))}
</SelectContent>
</Select>
<button
type="button"
className="nodrag rounded-md border px-2 py-1 text-[11px]"
onClick={() => {
void handleSavePreset();
}}
>
Save
</button>
</div>
<AdjustmentPreview
nodeId={id}
nodeWidth={width ?? 240}
currentType="light-adjust"
currentParams={localData}
/>
<div className="space-y-2 rounded-md border border-border/80 bg-background/70 p-2">
<SliderRow label="Brightness" value={localData.brightness} min={-100} max={100} onChange={(value) => updateData((current) => ({ ...current, brightness: value, preset: null }))} />
<SliderRow label="Contrast" value={localData.contrast} min={-100} max={100} onChange={(value) => updateData((current) => ({ ...current, contrast: value, preset: null }))} />
<SliderRow label="Exposure" value={localData.exposure} min={-5} max={5} step={0.01} onChange={(value) => updateData((current) => ({ ...current, exposure: value, preset: null }))} />
<SliderRow label="Highlights" value={localData.highlights} min={-100} max={100} onChange={(value) => updateData((current) => ({ ...current, highlights: value, preset: null }))} />
<SliderRow label="Shadows" value={localData.shadows} min={-100} max={100} onChange={(value) => updateData((current) => ({ ...current, shadows: value, preset: null }))} />
<SliderRow label="Whites" value={localData.whites} min={-100} max={100} onChange={(value) => updateData((current) => ({ ...current, whites: value, preset: null }))} />
<SliderRow label="Blacks" value={localData.blacks} min={-100} max={100} onChange={(value) => updateData((current) => ({ ...current, blacks: value, preset: null }))} />
<SliderRow label="Vignette" value={localData.vignette.amount} min={0} max={1} step={0.01} onChange={(value) => updateData((current) => ({ ...current, vignette: { ...current.vignette, amount: value }, preset: null }))} />
</div>
</div>
<Handle
type="source"
position={Position.Right}
className="!h-3 !w-3 !border-2 !border-background !bg-amber-500"
/>
</BaseNodeWrapper>
);
}

1213
components/canvas/nodes/render-node.tsx Normal file
View File

File diff suppressed because it is too large Load Diff