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

Enhance adjustment nodes with localized labels and improved state management

Browse Source 
- Integrated localization for slider labels and prompts in color-adjust, curves, detail-adjust, and light-adjust nodes.
- Updated preset handling to include user-friendly prompts for saving presets.
- Improved state management for slider values and preset selections, enhancing user experience.
- Added reset actions to adjustment nodes for better control over user adjustments.
This commit is contained in:
Matthias
2026-04-02 23:56:45 +02:00
parent b0a844d3a3
commit ef98acd0de
8 changed files with 393 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

152
components/canvas/canvas.tsx
View File

@@ -336,7 +336,11 @@ function CanvasInner({ canvasId }: CanvasInnerProps) {
const pendingResizeAfterCreateRef = useRef(
new Map<string, { width: number; height: number }>(),
);
const pendingDataAfterCreateRef = useRef(new Map<string, unknown>());
const resolvedRealIdByClientRequestRef = useRef(new Map<string, Id<"nodes">>());
const pendingCreatePromiseByClientRequestRef = useRef(
new Map<string, Promise<Id<"nodes">>>(),
);
const pendingEdgeSplitByClientRequestRef = useRef(
new Map<string, PendingEdgeSplit>(),
);
@@ -580,6 +584,29 @@ function CanvasInner({ canvasId }: CanvasInnerProps) {
const isSyncOnline =
isBrowserOnline === true && connectionState.isWebSocketConnected === true;
const trackPendingNodeCreate = useCallback(
(
clientRequestId: string,
createPromise: Promise<Id<"nodes">>,
): Promise<Id<"nodes">> => {
const trackedPromise = createPromise
.then((realId) => {
resolvedRealIdByClientRequestRef.current.set(clientRequestId, realId);
return realId;
})
.finally(() => {
pendingCreatePromiseByClientRequestRef.current.delete(clientRequestId);
});
pendingCreatePromiseByClientRequestRef.current.set(
clientRequestId,
trackedPromise,
);
return trackedPromise;
},
[],
);
useEffect(() => {
const handleOnline = () => setIsBrowserOnline(true);
const handleOffline = () => setIsBrowserOnline(false);
@@ -763,6 +790,8 @@ function CanvasInner({ canvasId }: CanvasInnerProps) {
pendingMoveAfterCreateRef.current.delete(args.clientRequestId);
pendingResizeAfterCreateRef.current.delete(args.clientRequestId);
pendingDataAfterCreateRef.current.delete(args.clientRequestId);
pendingCreatePromiseByClientRequestRef.current.delete(args.clientRequestId);
pendingEdgeSplitByClientRequestRef.current.delete(args.clientRequestId);
pendingConnectionCreatesRef.current.delete(args.clientRequestId);
resolvedRealIdByClientRequestRef.current.delete(args.clientRequestId);
@@ -848,24 +877,28 @@ function CanvasInner({ canvasId }: CanvasInnerProps) {
const payload = { ...args, clientRequestId };
if (isSyncOnline) {
return await createNode(payload);
return await trackPendingNodeCreate(clientRequestId, createNode(payload));
}
const optimisticNodeId = addOptimisticNodeLocally(payload);
await enqueueSyncMutationRef.current("createNode", payload);
return optimisticNodeId;
},
[addOptimisticNodeLocally, createNode, isSyncOnline],
[addOptimisticNodeLocally, createNode, isSyncOnline, trackPendingNodeCreate],
);
const runCreateNodeWithEdgeFromSourceOnlineOnly = useCallback(
async (args: Parameters<typeof createNodeWithEdgeFromSource>[0]) => {
const clientRequestId = args.clientRequestId ?? crypto.randomUUID();
const payload = { ...args, clientRequestId };
const sourceNodeId = payload.sourceNodeId as string;
pendingConnectionCreatesRef.current.add(clientRequestId);
if (isSyncOnline) {
return await createNodeWithEdgeFromSource(payload);
if (isSyncOnline && !isOptimisticNodeId(sourceNodeId)) {
return await trackPendingNodeCreate(
clientRequestId,
createNodeWithEdgeFromSource(payload),
);
}
const optimisticNodeId = addOptimisticNodeLocally(payload);
@@ -876,6 +909,24 @@ function CanvasInner({ canvasId }: CanvasInnerProps) {
sourceHandle: payload.sourceHandle,
targetHandle: payload.targetHandle,
});
if (isSyncOnline) {
try {
const realId = await trackPendingNodeCreate(clientRequestId, createNodeWithEdgeFromSourceRaw({
...payload,
}));
await remapOptimisticNodeLocally(clientRequestId, realId);
return realId;
} catch (error) {
removeOptimisticCreateLocally({
clientRequestId,
removeNode: true,
removeEdge: true,
});
throw error;
}
}
await enqueueSyncMutationRef.current(
"createNodeWithEdgeFromSource",
payload,
@@ -886,7 +937,11 @@ function CanvasInner({ canvasId }: CanvasInnerProps) {
addOptimisticEdgeLocally,
addOptimisticNodeLocally,
createNodeWithEdgeFromSource,
createNodeWithEdgeFromSourceRaw,
isSyncOnline,
remapOptimisticNodeLocally,
removeOptimisticCreateLocally,
trackPendingNodeCreate,
],
);
@@ -894,10 +949,14 @@ function CanvasInner({ canvasId }: CanvasInnerProps) {
async (args: Parameters<typeof createNodeWithEdgeToTarget>[0]) => {
const clientRequestId = args.clientRequestId ?? crypto.randomUUID();
const payload = { ...args, clientRequestId };
const targetNodeId = payload.targetNodeId as string;
pendingConnectionCreatesRef.current.add(clientRequestId);
if (isSyncOnline) {
return await createNodeWithEdgeToTarget(payload);
if (isSyncOnline && !isOptimisticNodeId(targetNodeId)) {
return await trackPendingNodeCreate(
clientRequestId,
createNodeWithEdgeToTarget(payload),
);
}
const optimisticNodeId = addOptimisticNodeLocally(payload);
@@ -908,6 +967,24 @@ function CanvasInner({ canvasId }: CanvasInnerProps) {
sourceHandle: payload.sourceHandle,
targetHandle: payload.targetHandle,
});
if (isSyncOnline) {
try {
const realId = await trackPendingNodeCreate(clientRequestId, createNodeWithEdgeToTargetRaw({
...payload,
}));
await remapOptimisticNodeLocally(clientRequestId, realId);
return realId;
} catch (error) {
removeOptimisticCreateLocally({
clientRequestId,
removeNode: true,
removeEdge: true,
});
throw error;
}
}
await enqueueSyncMutationRef.current("createNodeWithEdgeToTarget", payload);
return optimisticNodeId;
},
@@ -915,7 +992,11 @@ function CanvasInner({ canvasId }: CanvasInnerProps) {
addOptimisticEdgeLocally,
addOptimisticNodeLocally,
createNodeWithEdgeToTarget,
createNodeWithEdgeToTargetRaw,
isSyncOnline,
remapOptimisticNodeLocally,
removeOptimisticCreateLocally,
trackPendingNodeCreate,
],
);
@@ -1287,6 +1368,19 @@ function CanvasInner({ canvasId }: CanvasInnerProps) {
[enqueueSyncMutation],
);
const flushPendingDataForClientRequest = useCallback(
async (clientRequestId: string, realId: Id<"nodes">): Promise<void> => {
if (!pendingDataAfterCreateRef.current.has(clientRequestId)) return;
const pendingData = pendingDataAfterCreateRef.current.get(clientRequestId);
pendingDataAfterCreateRef.current.delete(clientRequestId);
await enqueueSyncMutation("updateData", {
nodeId: realId,
data: pendingData,
});
},
[enqueueSyncMutation],
);
const runResizeNodeMutation = useCallback(
async (args: { nodeId: Id<"nodes">; width: number; height: number }) => {
const rawNodeId = args.nodeId as string;
@@ -1336,9 +1430,44 @@ function CanvasInner({ canvasId }: CanvasInnerProps) {
const runUpdateNodeDataMutation = useCallback(
async (args: { nodeId: Id<"nodes">; data: unknown }) => {
await enqueueSyncMutation("updateData", args);
const rawNodeId = args.nodeId as string;
if (!isOptimisticNodeId(rawNodeId)) {
await enqueueSyncMutation("updateData", args);
return;
}
if (!isSyncOnline) {
await enqueueSyncMutation("updateData", args);
return;
}
const clientRequestId = clientRequestIdFromOptimisticNodeId(rawNodeId);
const resolvedRealId = clientRequestId
? resolvedRealIdByClientRequestRef.current.get(clientRequestId)
: undefined;
if (resolvedRealId) {
await enqueueSyncMutation("updateData", {
nodeId: resolvedRealId,
data: args.data,
});
return;
}
if (clientRequestId) {
pendingDataAfterCreateRef.current.set(clientRequestId, args.data);
}
if (process.env.NODE_ENV !== "production") {
console.info("[Canvas sync debug] deferred updateData for optimistic node", {
nodeId: rawNodeId,
clientRequestId,
resolvedRealId: resolvedRealId ?? null,
hasData: args.data !== undefined,
});
}
},
[enqueueSyncMutation],
[enqueueSyncMutation, isSyncOnline],
);
const runBatchRemoveNodesMutation = useCallback(
@@ -1590,6 +1719,7 @@ function CanvasInner({ canvasId }: CanvasInnerProps) {
);
pendingMoveAfterCreateRef.current.delete(clientRequestId);
pendingResizeAfterCreateRef.current.delete(clientRequestId);
pendingDataAfterCreateRef.current.delete(clientRequestId);
pendingEdgeSplitByClientRequestRef.current.delete(clientRequestId);
pendingConnectionCreatesRef.current.delete(clientRequestId);
resolvedRealIdByClientRequestRef.current.delete(clientRequestId);
@@ -1642,6 +1772,7 @@ function CanvasInner({ canvasId }: CanvasInnerProps) {
});
}
await flushPendingResizeForClientRequest(clientRequestId, realId);
await flushPendingDataForClientRequest(clientRequestId, realId);
return;
}
@@ -1663,11 +1794,13 @@ function CanvasInner({ canvasId }: CanvasInnerProps) {
positionY: pendingMove.positionY,
});
await flushPendingResizeForClientRequest(clientRequestId, realId);
await flushPendingDataForClientRequest(clientRequestId, realId);
return;
}
resolvedRealIdByClientRequestRef.current.set(clientRequestId, realId);
await flushPendingResizeForClientRequest(clientRequestId, realId);
await flushPendingDataForClientRequest(clientRequestId, realId);
return;
}
@@ -1700,6 +1833,7 @@ function CanvasInner({ canvasId }: CanvasInnerProps) {
error: String(error),
});
}
await flushPendingDataForClientRequest(clientRequestId, r);
} else {
pendingLocalPositionUntilConvexMatchesRef.current.set(r as string, {
x: p.positionX,
@@ -1710,11 +1844,13 @@ function CanvasInner({ canvasId }: CanvasInnerProps) {
positionX: p.positionX,
positionY: p.positionY,
});
await flushPendingDataForClientRequest(clientRequestId, r);
}
},
[
canvasId,
runBatchRemoveNodesMutation,
flushPendingDataForClientRequest,
flushPendingResizeForClientRequest,
runMoveNodeMutation,
runSplitEdgeAtExistingNodeMutation,

40
components/canvas/nodes/color-adjust-node.tsx
View File

@@ -3,6 +3,7 @@
import { useEffect, useMemo, useRef, useState } from "react";
import { Handle, Position, type Node, type NodeProps } from "@xyflow/react";
import { useMutation } from "convex/react";
import { useTranslations } from "next-intl";
import { Palette } from "lucide-react";
import { api } from "@/convex/_generated/api";
@@ -41,6 +42,9 @@ type PresetDoc = {
};
export default function ColorAdjustNode({ id, data, selected, width }: NodeProps<ColorAdjustNodeType>) {
const tCommon = useTranslations("common");
const tNodes = useTranslations("nodes");
const tToasts = useTranslations("toasts");
const { queueNodeDataUpdate } = useCanvasSync();
const savePreset = useMutation(api.presets.save);
const userPresets = (useAuthQuery(api.presets.list, { nodeType: "color-adjust" }) ?? []) as PresetDoc[];
@@ -88,48 +92,48 @@ export default function ColorAdjustNode({ id, data, selected, width }: NodeProps
() => [
{
id: "hue",
label: "Hue",
label: tNodes("adjustments.colorAdjust.sliders.hue"),
min: -180,
max: 180,
value: DEFAULT_COLOR_ADJUST_DATA.hsl.hue,
},
{
id: "saturation",
label: "Saturation",
label: tNodes("adjustments.colorAdjust.sliders.saturation"),
min: -100,
max: 100,
value: DEFAULT_COLOR_ADJUST_DATA.hsl.saturation,
},
{
id: "luminance",
label: "Luminance",
label: tNodes("adjustments.colorAdjust.sliders.luminance"),
min: -100,
max: 100,
value: DEFAULT_COLOR_ADJUST_DATA.hsl.luminance,
},
{
id: "temperature",
label: "Temperature",
label: tNodes("adjustments.colorAdjust.sliders.temperature"),
min: -100,
max: 100,
value: DEFAULT_COLOR_ADJUST_DATA.temperature,
},
{
id: "tint",
label: "Tint",
label: tNodes("adjustments.colorAdjust.sliders.tint"),
min: -100,
max: 100,
value: DEFAULT_COLOR_ADJUST_DATA.tint,
},
{
id: "vibrance",
label: "Vibrance",
label: tNodes("adjustments.colorAdjust.sliders.vibrance"),
min: -100,
max: 100,
value: DEFAULT_COLOR_ADJUST_DATA.vibrance,
},
],
[],
[tNodes],
);
const sliderValues = useMemo<SliderValue[]>(
() => [
@@ -179,14 +183,14 @@ export default function ColorAdjustNode({ id, data, selected, width }: NodeProps
};
const handleSavePreset = async () => {
const name = window.prompt("Preset-Name");
const name = window.prompt(tNodes("adjustments.common.presetNamePrompt"));
if (!name) return;
await savePreset({
name,
nodeType: "color-adjust",
params: localData,
});
toast.success("Preset gespeichert");
toast.success(tToasts("canvas.adjustmentPresetSaved"));
};
return (
@@ -206,24 +210,24 @@ export default function ColorAdjustNode({ id, data, selected, width }: NodeProps
<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
{tNodes("adjustments.colorAdjust.title")}
</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" />
<SelectValue placeholder={tNodes("adjustments.common.presetPlaceholder")} />
</SelectTrigger>
<SelectContent className="nodrag">
<SelectItem value="custom">Custom</SelectItem>
<SelectItem value="custom">{tNodes("custom")}</SelectItem>
{builtinOptions.map(([name]) => (
<SelectItem key={name} value={`builtin:${name}`}>
Built-in: {name}
{tNodes("adjustments.common.builtinPresetLabel", { name })}
</SelectItem>
))}
{userPresets.map((preset) => (
<SelectItem key={preset._id} value={`user:${preset._id}`}>
User: {preset.name}
{tNodes("adjustments.common.userPresetLabel", { name: preset.name })}
</SelectItem>
))}
</SelectContent>
@@ -235,7 +239,7 @@ export default function ColorAdjustNode({ id, data, selected, width }: NodeProps
void handleSavePreset();
}}
>
Save
{tCommon("save")}
</button>
</div>
@@ -254,6 +258,7 @@ export default function ColorAdjustNode({ id, data, selected, width }: NodeProps
fillClassName="bg-cyan-500/35 dark:bg-cyan-400/35"
handleClassName="bg-cyan-500 dark:bg-cyan-400"
trackClassName="bg-cyan-500/10 dark:bg-cyan-500/15"
actions={[{ id: "reset", label: tCommon("reset") }]}
onChange={(values) => {
const valueById = new Map(values.map((entry) => [entry.id, entry.value]));
updateData((current) => ({
@@ -270,11 +275,6 @@ export default function ColorAdjustNode({ id, data, selected, width }: NodeProps
preset: null,
}));
}}
onAction={async (actionId) => {
if (actionId === "apply") {
queueSave();
}
}}
/>
</div>

34
components/canvas/nodes/curves-node.tsx
View File

@@ -3,6 +3,7 @@
import { useEffect, useMemo, useRef, useState } from "react";
import { Handle, Position, type Node, type NodeProps } from "@xyflow/react";
import { useMutation } from "convex/react";
import { useTranslations } from "next-intl";
import { TrendingUp } from "lucide-react";
import { api } from "@/convex/_generated/api";
@@ -41,6 +42,9 @@ type PresetDoc = {
};
export default function CurvesNode({ id, data, selected, width }: NodeProps<CurvesNodeType>) {
const tCommon = useTranslations("common");
const tNodes = useTranslations("nodes");
const tToasts = useTranslations("toasts");
const { queueNodeDataUpdate } = useCanvasSync();
const savePreset = useMutation(api.presets.save);
const userPresets = (useAuthQuery(api.presets.list, { nodeType: "curves" }) ?? []) as PresetDoc[];
@@ -88,21 +92,21 @@ export default function CurvesNode({ id, data, selected, width }: NodeProps<Curv
() => [
{
id: "black-point",
label: "Black Point",
label: tNodes("adjustments.curves.sliders.blackPoint"),
min: 0,
max: 255,
value: DEFAULT_CURVES_DATA.levels.blackPoint,
},
{
id: "white-point",
label: "White Point",
label: tNodes("adjustments.curves.sliders.whitePoint"),
min: 0,
max: 255,
value: DEFAULT_CURVES_DATA.levels.whitePoint,
},
{
id: "gamma",
label: "Gamma",
label: tNodes("adjustments.curves.sliders.gamma"),
min: 0.1,
max: 3,
step: 0.01,
@@ -110,7 +114,7 @@ export default function CurvesNode({ id, data, selected, width }: NodeProps<Curv
value: DEFAULT_CURVES_DATA.levels.gamma,
},
],
[],
[tNodes],
);
const sliderValues = useMemo<SliderValue[]>(
() => [
@@ -151,14 +155,14 @@ export default function CurvesNode({ id, data, selected, width }: NodeProps<Curv
};
const handleSavePreset = async () => {
const name = window.prompt("Preset-Name");
const name = window.prompt(tNodes("adjustments.common.presetNamePrompt"));
if (!name) return;
await savePreset({
name,
nodeType: "curves",
params: localData,
});
toast.success("Preset gespeichert");
toast.success(tToasts("canvas.adjustmentPresetSaved"));
};
return (
@@ -178,24 +182,24 @@ export default function CurvesNode({ id, data, selected, width }: NodeProps<Curv
<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
{tNodes("adjustments.curves.title")}
</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" />
<SelectValue placeholder={tNodes("adjustments.common.presetPlaceholder")} />
</SelectTrigger>
<SelectContent className="nodrag">
<SelectItem value="custom">Custom</SelectItem>
<SelectItem value="custom">{tNodes("custom")}</SelectItem>
{builtinOptions.map(([name]) => (
<SelectItem key={name} value={`builtin:${name}`}>
Built-in: {name}
{tNodes("adjustments.common.builtinPresetLabel", { name })}
</SelectItem>
))}
{userPresets.map((preset) => (
<SelectItem key={preset._id} value={`user:${preset._id}`}>
User: {preset.name}
{tNodes("adjustments.common.userPresetLabel", { name: preset.name })}
</SelectItem>
))}
</SelectContent>
@@ -207,7 +211,7 @@ export default function CurvesNode({ id, data, selected, width }: NodeProps<Curv
void handleSavePreset();
}}
>
Save
{tCommon("save")}
</button>
</div>
@@ -226,6 +230,7 @@ export default function CurvesNode({ id, data, selected, width }: NodeProps<Curv
fillClassName="bg-emerald-500/35 dark:bg-emerald-400/35"
handleClassName="bg-emerald-500 dark:bg-emerald-400"
trackClassName="bg-emerald-500/10 dark:bg-emerald-500/15"
actions={[{ id: "reset", label: tCommon("reset") }]}
onChange={(values) => {
const valueById = new Map(values.map((entry) => [entry.id, entry.value]));
updateData((current) => ({
@@ -239,11 +244,6 @@ export default function CurvesNode({ id, data, selected, width }: NodeProps<Curv
preset: null,
}));
}}
onAction={async (actionId) => {
if (actionId === "apply") {
queueSave();
}
}}
/>
</div>

42
components/canvas/nodes/detail-adjust-node.tsx
View File

@@ -3,6 +3,7 @@
import { useEffect, useMemo, useRef, useState } from "react";
import { Handle, Position, type Node, type NodeProps } from "@xyflow/react";
import { useMutation } from "convex/react";
import { useTranslations } from "next-intl";
import { Focus } from "lucide-react";
import { api } from "@/convex/_generated/api";
@@ -41,6 +42,9 @@ type PresetDoc = {
};
export default function DetailAdjustNode({ id, data, selected, width }: NodeProps<DetailAdjustNodeType>) {
const tCommon = useTranslations("common");
const tNodes = useTranslations("nodes");
const tToasts = useTranslations("toasts");
const { queueNodeDataUpdate } = useCanvasSync();
const savePreset = useMutation(api.presets.save);
const userPresets = (useAuthQuery(api.presets.list, { nodeType: "detail-adjust" }) ?? []) as PresetDoc[];
@@ -88,14 +92,14 @@ export default function DetailAdjustNode({ id, data, selected, width }: NodeProp
() => [
{
id: "sharpen-amount",
label: "Sharpen",
label: tNodes("adjustments.detailAdjust.sliders.sharpen"),
min: 0,
max: 500,
value: DEFAULT_DETAIL_ADJUST_DATA.sharpen.amount,
},
{
id: "sharpen-radius",
label: "Radius",
label: tNodes("adjustments.detailAdjust.sliders.radius"),
min: 0.5,
max: 5,
step: 0.01,
@@ -104,41 +108,41 @@ export default function DetailAdjustNode({ id, data, selected, width }: NodeProp
},
{
id: "sharpen-threshold",
label: "Threshold",
label: tNodes("adjustments.detailAdjust.sliders.threshold"),
min: 0,
max: 255,
value: DEFAULT_DETAIL_ADJUST_DATA.sharpen.threshold,
},
{
id: "clarity",
label: "Clarity",
label: tNodes("adjustments.detailAdjust.sliders.clarity"),
min: -100,
max: 100,
value: DEFAULT_DETAIL_ADJUST_DATA.clarity,
},
{
id: "denoise-luminance",
label: "Denoise Luma",
label: tNodes("adjustments.detailAdjust.sliders.denoiseLuma"),
min: 0,
max: 100,
value: DEFAULT_DETAIL_ADJUST_DATA.denoise.luminance,
},
{
id: "denoise-color",
label: "Denoise Color",
label: tNodes("adjustments.detailAdjust.sliders.denoiseColor"),
min: 0,
max: 100,
value: DEFAULT_DETAIL_ADJUST_DATA.denoise.color,
},
{
id: "grain-amount",
label: "Grain",
label: tNodes("adjustments.detailAdjust.sliders.grain"),
min: 0,
max: 100,
value: DEFAULT_DETAIL_ADJUST_DATA.grain.amount,
},
],
[],
[tNodes],
);
const sliderValues = useMemo<SliderValue[]>(
() => [
@@ -190,14 +194,14 @@ export default function DetailAdjustNode({ id, data, selected, width }: NodeProp
};
const handleSavePreset = async () => {
const name = window.prompt("Preset-Name");
const name = window.prompt(tNodes("adjustments.common.presetNamePrompt"));
if (!name) return;
await savePreset({
name,
nodeType: "detail-adjust",
params: localData,
});
toast.success("Preset gespeichert");
toast.success(tToasts("canvas.adjustmentPresetSaved"));
};
return (
@@ -217,24 +221,24 @@ export default function DetailAdjustNode({ id, data, selected, width }: NodeProp
<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
{tNodes("adjustments.detailAdjust.title")}
</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" />
<SelectValue placeholder={tNodes("adjustments.common.presetPlaceholder")} />
</SelectTrigger>
<SelectContent className="nodrag">
<SelectItem value="custom">Custom</SelectItem>
<SelectItem value="custom">{tNodes("custom")}</SelectItem>
{builtinOptions.map(([name]) => (
<SelectItem key={name} value={`builtin:${name}`}>
Built-in: {name}
{tNodes("adjustments.common.builtinPresetLabel", { name })}
</SelectItem>
))}
{userPresets.map((preset) => (
<SelectItem key={preset._id} value={`user:${preset._id}`}>
User: {preset.name}
{tNodes("adjustments.common.userPresetLabel", { name: preset.name })}
</SelectItem>
))}
</SelectContent>
@@ -246,7 +250,7 @@ export default function DetailAdjustNode({ id, data, selected, width }: NodeProp
void handleSavePreset();
}}
>
Save
{tCommon("save")}
</button>
</div>
@@ -265,6 +269,7 @@ export default function DetailAdjustNode({ id, data, selected, width }: NodeProp
fillClassName="bg-indigo-500/35 dark:bg-indigo-400/35"
handleClassName="bg-indigo-500 dark:bg-indigo-400"
trackClassName="bg-indigo-500/10 dark:bg-indigo-500/15"
actions={[{ id: "reset", label: tCommon("reset") }]}
onChange={(values) => {
const valueById = new Map(values.map((entry) => [entry.id, entry.value]));
updateData((current) => ({
@@ -288,11 +293,6 @@ export default function DetailAdjustNode({ id, data, selected, width }: NodeProp
preset: null,
}));
}}
onAction={async (actionId) => {
if (actionId === "apply") {
queueSave();
}
}}
/>
</div>

44
components/canvas/nodes/light-adjust-node.tsx
View File

@@ -3,6 +3,7 @@
import { useEffect, useMemo, useRef, useState } from "react";
import { Handle, Position, type Node, type NodeProps } from "@xyflow/react";
import { useMutation } from "convex/react";
import { useTranslations } from "next-intl";
import { Sun } from "lucide-react";
import { api } from "@/convex/_generated/api";
@@ -41,6 +42,9 @@ type PresetDoc = {
};
export default function LightAdjustNode({ id, data, selected, width }: NodeProps<LightAdjustNodeType>) {
const tCommon = useTranslations("common");
const tNodes = useTranslations("nodes");
const tToasts = useTranslations("toasts");
const { queueNodeDataUpdate } = useCanvasSync();
const savePreset = useMutation(api.presets.save);
const userPresets = (useAuthQuery(api.presets.list, { nodeType: "light-adjust" }) ?? []) as PresetDoc[];
@@ -88,21 +92,21 @@ export default function LightAdjustNode({ id, data, selected, width }: NodeProps
() => [
{
id: "brightness",
label: "Brightness",
label: tNodes("adjustments.lightAdjust.sliders.brightness"),
min: -100,
max: 100,
value: DEFAULT_LIGHT_ADJUST_DATA.brightness,
},
{
id: "contrast",
label: "Contrast",
label: tNodes("adjustments.lightAdjust.sliders.contrast"),
min: -100,
max: 100,
value: DEFAULT_LIGHT_ADJUST_DATA.contrast,
},
{
id: "exposure",
label: "Exposure",
label: tNodes("adjustments.lightAdjust.sliders.exposure"),
min: -5,
max: 5,
step: 0.01,
@@ -111,35 +115,35 @@ export default function LightAdjustNode({ id, data, selected, width }: NodeProps
},
{
id: "highlights",
label: "Highlights",
label: tNodes("adjustments.lightAdjust.sliders.highlights"),
min: -100,
max: 100,
value: DEFAULT_LIGHT_ADJUST_DATA.highlights,
},
{
id: "shadows",
label: "Shadows",
label: tNodes("adjustments.lightAdjust.sliders.shadows"),
min: -100,
max: 100,
value: DEFAULT_LIGHT_ADJUST_DATA.shadows,
},
{
id: "whites",
label: "Whites",
label: tNodes("adjustments.lightAdjust.sliders.whites"),
min: -100,
max: 100,
value: DEFAULT_LIGHT_ADJUST_DATA.whites,
},
{
id: "blacks",
label: "Blacks",
label: tNodes("adjustments.lightAdjust.sliders.blacks"),
min: -100,
max: 100,
value: DEFAULT_LIGHT_ADJUST_DATA.blacks,
},
{
id: "vignette-amount",
label: "Vignette",
label: tNodes("adjustments.lightAdjust.sliders.vignette"),
min: 0,
max: 1,
step: 0.01,
@@ -147,7 +151,7 @@ export default function LightAdjustNode({ id, data, selected, width }: NodeProps
value: DEFAULT_LIGHT_ADJUST_DATA.vignette.amount,
},
],
[],
[tNodes],
);
const sliderValues = useMemo<SliderValue[]>(
() => [
@@ -201,14 +205,14 @@ export default function LightAdjustNode({ id, data, selected, width }: NodeProps
};
const handleSavePreset = async () => {
const name = window.prompt("Preset-Name");
const name = window.prompt(tNodes("adjustments.common.presetNamePrompt"));
if (!name) return;
await savePreset({
name,
nodeType: "light-adjust",
params: localData,
});
toast.success("Preset gespeichert");
toast.success(tToasts("canvas.adjustmentPresetSaved"));
};
return (
@@ -228,24 +232,24 @@ export default function LightAdjustNode({ id, data, selected, width }: NodeProps
<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
{tNodes("adjustments.lightAdjust.title")}
</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" />
<SelectValue placeholder={tNodes("adjustments.common.presetPlaceholder")} />
</SelectTrigger>
<SelectContent className="nodrag">
<SelectItem value="custom">Custom</SelectItem>
<SelectItem value="custom">{tNodes("custom")}</SelectItem>
{builtinOptions.map(([name]) => (
<SelectItem key={name} value={`builtin:${name}`}>
Built-in: {name}
{tNodes("adjustments.common.builtinPresetLabel", { name })}
</SelectItem>
))}
{userPresets.map((preset) => (
<SelectItem key={preset._id} value={`user:${preset._id}`}>
User: {preset.name}
{tNodes("adjustments.common.userPresetLabel", { name: preset.name })}
</SelectItem>
))}
</SelectContent>
@@ -257,7 +261,7 @@ export default function LightAdjustNode({ id, data, selected, width }: NodeProps
void handleSavePreset();
}}
>
Save
{tCommon("save")}
</button>
</div>
@@ -276,6 +280,7 @@ export default function LightAdjustNode({ id, data, selected, width }: NodeProps
fillClassName="bg-amber-500/35 dark:bg-amber-400/35"
handleClassName="bg-amber-500 dark:bg-amber-400"
trackClassName="bg-amber-500/10 dark:bg-amber-500/15"
actions={[{ id: "reset", label: tCommon("reset") }]}
onChange={(values) => {
const valueById = new Map(values.map((entry) => [entry.id, entry.value]));
updateData((current) => ({
@@ -294,11 +299,6 @@ export default function LightAdjustNode({ id, data, selected, width }: NodeProps
preset: null,
}));
}}
onAction={async (actionId) => {
if (actionId === "apply") {
queueSave();
}
}}
/>
</div>

68
convex/nodes.ts
View File

@@ -46,6 +46,14 @@ type NodeCreateMutationName =
| "nodes.createWithEdgeFromSource"
| "nodes.createWithEdgeToTarget";
const OPTIMISTIC_NODE_PREFIX = "optimistic_";
const NODE_CREATE_MUTATIONS: NodeCreateMutationName[] = [
"nodes.create",
"nodes.createWithEdgeSplit",
"nodes.createWithEdgeFromSource",
"nodes.createWithEdgeToTarget",
];
const DISALLOWED_ADJUSTMENT_DATA_KEYS = [
"blob",
"blobUrl",
@@ -491,6 +499,42 @@ async function rememberIdempotentNodeCreateResult(
});
}
function getClientRequestIdFromOptimisticNodeId(nodeId: string): string | null {
if (!nodeId.startsWith(OPTIMISTIC_NODE_PREFIX)) {
return null;
}
const clientRequestId = nodeId.slice(OPTIMISTIC_NODE_PREFIX.length);
return clientRequestId.length > 0 ? clientRequestId : null;
}
async function resolveNodeReferenceForWrite(
ctx: MutationCtx,
args: {
userId: string;
canvasId: Id<"canvases">;
nodeId: string;
},
): Promise<Id<"nodes">> {
const clientRequestId = getClientRequestIdFromOptimisticNodeId(args.nodeId);
if (!clientRequestId) {
return args.nodeId as Id<"nodes">;
}
for (const mutation of NODE_CREATE_MUTATIONS) {
const resolvedNodeId = await getIdempotentNodeCreateResult(ctx, {
userId: args.userId,
mutation,
clientRequestId,
canvasId: args.canvasId,
});
if (resolvedNodeId) {
return resolvedNodeId;
}
}
throw new Error(`Referenced node not found for optimistic id ${args.nodeId}`);
}
// ============================================================================
// Queries
// ============================================================================
@@ -923,7 +967,7 @@ export const createWithEdgeFromSource = mutation({
parentId: v.optional(v.id("nodes")),
zIndex: v.optional(v.number()),
clientRequestId: v.optional(v.string()),
sourceNodeId: v.id("nodes"),
sourceNodeId: v.string(),
sourceHandle: v.optional(v.string()),
targetHandle: v.optional(v.string()),
},
@@ -941,7 +985,12 @@ export const createWithEdgeFromSource = mutation({
return existingNodeId;
}
const source = await ctx.db.get(args.sourceNodeId);
const sourceNodeId = await resolveNodeReferenceForWrite(ctx, {
userId: user.userId,
canvasId: args.canvasId,
nodeId: args.sourceNodeId,
});
const source = await ctx.db.get(sourceNodeId);
if (!source || source.canvasId !== args.canvasId) {
throw new Error("Source node not found");
}
@@ -973,7 +1022,7 @@ export const createWithEdgeFromSource = mutation({
await ctx.db.insert("edges", {
canvasId: args.canvasId,
sourceNodeId: args.sourceNodeId,
sourceNodeId,
targetNodeId: nodeId,
sourceHandle: args.sourceHandle,
targetHandle: args.targetHandle,
@@ -1008,7 +1057,7 @@ export const createWithEdgeToTarget = mutation({
parentId: v.optional(v.id("nodes")),
zIndex: v.optional(v.number()),
clientRequestId: v.optional(v.string()),
targetNodeId: v.id("nodes"),
targetNodeId: v.string(),
sourceHandle: v.optional(v.string()),
targetHandle: v.optional(v.string()),
},
@@ -1026,7 +1075,12 @@ export const createWithEdgeToTarget = mutation({
return existingNodeId;
}
const target = await ctx.db.get(args.targetNodeId);
const targetNodeId = await resolveNodeReferenceForWrite(ctx, {
userId: user.userId,
canvasId: args.canvasId,
nodeId: args.targetNodeId,
});
const target = await ctx.db.get(targetNodeId);
if (!target || target.canvasId !== args.canvasId) {
throw new Error("Target node not found");
}
@@ -1034,7 +1088,7 @@ export const createWithEdgeToTarget = mutation({
await assertConnectionPolicyForTypes(ctx, {
sourceType: args.type,
targetType: target.type,
targetNodeId: args.targetNodeId,
targetNodeId,
});
const normalizedData = normalizeNodeDataForWrite(args.type, args.data);
@@ -1056,7 +1110,7 @@ export const createWithEdgeToTarget = mutation({
await ctx.db.insert("edges", {
canvasId: args.canvasId,
sourceNodeId: nodeId,
targetNodeId: args.targetNodeId,
targetNodeId,
sourceHandle: args.sourceHandle,
targetHandle: args.targetHandle,
});

54
messages/de.json
View File

@@ -1,6 +1,7 @@
{
"common": {
"save": "Speichern",
"reset": "Zurücksetzen",
"cancel": "Abbrechen",
"delete": "Löschen",
"close": "Schließen",
@@ -55,6 +56,58 @@
"compareProcessed": "Verarbeitet",
"custom": "Benutzerdefiniert",
"customize": "Anpassen",
"adjustments": {
"common": {
"presetPlaceholder": "Voreinstellung",
"presetNamePrompt": "Name der Voreinstellung",
"builtinPresetLabel": "Standard: {name}",
"userPresetLabel": "Benutzer: {name}"
},
"curves": {
"title": "Kurven",
"sliders": {
"blackPoint": "Schwarzpunkt",
"whitePoint": "Weißpunkt",
"gamma": "Gamma"
}
},
"colorAdjust": {
"title": "Farbe",
"sliders": {
"hue": "Farbton",
"saturation": "Sättigung",
"luminance": "Luminanz",
"temperature": "Temperatur",
"tint": "Tönung",
"vibrance": "Dynamik"
}
},
"lightAdjust": {
"title": "Licht",
"sliders": {
"brightness": "Helligkeit",
"contrast": "Kontrast",
"exposure": "Belichtung",
"highlights": "Lichter",
"shadows": "Schatten",
"whites": "Weißtöne",
"blacks": "Schwärzen",
"vignette": "Vignette"
}
},
"detailAdjust": {
"title": "Details",
"sliders": {
"sharpen": "Schärfen",
"radius": "Radius",
"threshold": "Schwellwert",
"clarity": "Klarheit",
"denoiseLuma": "Entrauschen Luma",
"denoiseColor": "Entrauschen Farbe",
"grain": "Körnung"
}
}
},
"prompts": {
"prompt1": "Prompt 1",
"prompt2": "Prompt 2",
@@ -121,6 +174,7 @@
"toasts": {
"canvas": {
"imageUploaded": "Bild hochgeladen",
"adjustmentPresetSaved": "Voreinstellung gespeichert",
"uploadFailed": "Upload fehlgeschlagen",
"uploadFormatError": "Format „{format}“ wird nicht unterstützt. Erlaubt: PNG, JPG, WebP.",
"uploadSizeError": "Maximale Dateigröße: {maxMb} MB.",

54
messages/en.json
View File

@@ -1,6 +1,7 @@
{
"common": {
"save": "Save",
"reset": "Reset",
"cancel": "Cancel",
"delete": "Delete",
"close": "Close",
@@ -55,6 +56,58 @@
"compareProcessed": "Processed",
"custom": "Custom",
"customize": "Customize",
"adjustments": {
"common": {
"presetPlaceholder": "Preset",
"presetNamePrompt": "Preset name",
"builtinPresetLabel": "Built-in: {name}",
"userPresetLabel": "User: {name}"
},
"curves": {
"title": "Curves",
"sliders": {
"blackPoint": "Black Point",
"whitePoint": "White Point",
"gamma": "Gamma"
}
},
"colorAdjust": {
"title": "Color",
"sliders": {
"hue": "Hue",
"saturation": "Saturation",
"luminance": "Luminance",
"temperature": "Temperature",
"tint": "Tint",
"vibrance": "Vibrance"
}
},
"lightAdjust": {
"title": "Light",
"sliders": {
"brightness": "Brightness",
"contrast": "Contrast",
"exposure": "Exposure",
"highlights": "Highlights",
"shadows": "Shadows",
"whites": "Whites",
"blacks": "Blacks",
"vignette": "Vignette"
}
},
"detailAdjust": {
"title": "Detail",
"sliders": {
"sharpen": "Sharpen",
"radius": "Radius",
"threshold": "Threshold",
"clarity": "Clarity",
"denoiseLuma": "Denoise Luma",
"denoiseColor": "Denoise Color",
"grain": "Grain"
}
}
},
"prompts": {
"prompt1": "Prompt 1",
"prompt2": "Prompt 2",
@@ -121,6 +174,7 @@
"toasts": {
"canvas": {
"imageUploaded": "Image uploaded",
"adjustmentPresetSaved": "Preset saved",
"uploadFailed": "Upload failed",
"uploadFormatError": "Format \"{format}\" is not supported. Allowed: PNG, JPG, WebP.",
"uploadSizeError": "Maximum file size: {maxMb} MB.",