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

feat(canvas): accelerate local previews and harden edge flows

Browse Source
This commit is contained in:
Matthias Meister
2026-04-05 17:28:43 +02:00
parent 451ab0b986
commit de37b63b2b
29 changed files with 2751 additions and 358 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
components/canvas/nodes/adjustment-preview.tsx
View File

@@ -1,46 +1,18 @@
"use client";
import { useEffect, useMemo, useRef } from "react";
import { useMemo } from "react";
import { useCanvasGraph } from "@/components/canvas/canvas-graph-context";
import { usePipelinePreview } from "@/hooks/use-pipeline-preview";
import {
collectPipelineFromGraph,
getSourceImageFromGraph,
shouldFastPathPreviewPipeline,
} from "@/lib/canvas-render-preview";
import type { PipelineStep } from "@/lib/image-pipeline/contracts";
import { buildHistogramPlot } from "@/lib/image-pipeline/histogram-plot";
const PREVIEW_PIPELINE_TYPES = new Set([
"curves",
"color-adjust",
"light-adjust",
"detail-adjust",
]);
type PreviewLatencyTrace = {
sequence: number;
changedAtMs: number;
nodeType: string;
origin: string;
};
function readPreviewLatencyTrace(): PreviewLatencyTrace | null {
if (process.env.NODE_ENV === "production") {
return null;
}
const debugGlobals = globalThis as typeof globalThis & {
__LEMONSPACE_DEBUG_PREVIEW_LATENCY__?: boolean;
__LEMONSPACE_LAST_PREVIEW_TRACE__?: PreviewLatencyTrace;
};
if (debugGlobals.__LEMONSPACE_DEBUG_PREVIEW_LATENCY__ !== true) {
return null;
}
return debugGlobals.__LEMONSPACE_LAST_PREVIEW_TRACE__ ?? null;
}
const PREVIEW_PIPELINE_TYPES = new Set(["curves", "color-adjust", "light-adjust", "detail-adjust"]);
export default function AdjustmentPreview({
nodeId,
@@ -54,7 +26,6 @@ export default function AdjustmentPreview({
currentParams: unknown;
}) {
const graph = useCanvasGraph();
const lastLoggedTraceSequenceRef = useRef<number | null>(null);
const sourceUrl = useMemo(
() =>
@@ -93,36 +64,21 @@ export default function AdjustmentPreview({
});
}, [currentParams, currentType, graph, nodeId]);
useEffect(() => {
const trace = readPreviewLatencyTrace();
if (!trace) {
return;
}
const usesFastPreviewDebounce = shouldFastPathPreviewPipeline(
steps,
graph.previewNodeDataOverrides,
);
const shouldDeferHistogram = graph.previewNodeDataOverrides.has(nodeId);
if (lastLoggedTraceSequenceRef.current === trace.sequence) {
return;
}
lastLoggedTraceSequenceRef.current = trace.sequence;
console.info("[Preview latency] downstream-graph-visible", {
nodeId,
nodeType: currentType,
sourceNodeType: trace.nodeType,
sourceOrigin: trace.origin,
sinceChangeMs: performance.now() - trace.changedAtMs,
pipelineDepth: steps.length,
stepTypes: steps.map((step) => step.type),
hasSource: Boolean(sourceUrl),
});
}, [currentType, nodeId, sourceUrl, steps]);
const previewDebounceMs = usesFastPreviewDebounce ? 16 : undefined;
const { canvasRef, histogram, isRendering, hasSource, previewAspectRatio, error } =
usePipelinePreview({
sourceUrl,
steps,
nodeWidth,
includeHistogram: true,
includeHistogram: !shouldDeferHistogram,
debounceMs: previewDebounceMs,
// Die Vorschau muss in-Node gut lesbar bleiben, aber nicht in voller
// Display-Auflösung rechnen.
previewScale: 0.5,

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

@@ -59,6 +59,7 @@ export default function ColorAdjustNode({ id, data, selected, width }: NodeProps
[],
);
const { localData, applyLocalData, updateLocalData } = useNodeLocalData<ColorAdjustData>({
nodeId: id,
data,
normalize: normalizeData,
saveDelayMs: 16,

14
components/canvas/nodes/compare-surface.tsx
View File

@@ -1,7 +1,11 @@
"use client";
import { useCanvasGraph } from "@/components/canvas/canvas-graph-context";
import { usePipelinePreview } from "@/hooks/use-pipeline-preview";
import type { RenderPreviewInput } from "@/lib/canvas-render-preview";
import {
shouldFastPathPreviewPipeline,
type RenderPreviewInput,
} from "@/lib/canvas-render-preview";
const EMPTY_STEPS: RenderPreviewInput["steps"] = [];
@@ -22,16 +26,24 @@ export default function CompareSurface({
clipWidthPercent,
preferPreview,
}: CompareSurfaceProps) {
const graph = useCanvasGraph();
const usePreview = Boolean(previewInput && (preferPreview || !finalUrl));
const previewSourceUrl = usePreview ? previewInput?.sourceUrl ?? null : null;
const previewSteps = usePreview ? previewInput?.steps ?? EMPTY_STEPS : EMPTY_STEPS;
const visibleFinalUrl = usePreview ? undefined : finalUrl;
const previewDebounceMs = shouldFastPathPreviewPipeline(
previewSteps,
graph.previewNodeDataOverrides,
)
? 16
: undefined;
const { canvasRef, isRendering, error } = usePipelinePreview({
sourceUrl: previewSourceUrl,
steps: previewSteps,
nodeWidth,
includeHistogram: false,
debounceMs: previewDebounceMs,
// Compare-Nodes zeigen nur eine kompakte Live-Ansicht; kleinere Kacheln
// halten lange Workflows spürbar reaktionsfreudiger.
previewScale: 0.5,

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

@@ -59,6 +59,7 @@ export default function CurvesNode({ id, data, selected, width }: NodeProps<Curv
[],
);
const { localData, applyLocalData, updateLocalData } = useNodeLocalData<CurvesData>({
nodeId: id,
data,
normalize: normalizeData,
saveDelayMs: 16,

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

@@ -59,6 +59,7 @@ export default function DetailAdjustNode({ id, data, selected, width }: NodeProp
[],
);
const { localData, applyLocalData, updateLocalData } = useNodeLocalData<DetailAdjustData>({
nodeId: id,
data,
normalize: normalizeData,
saveDelayMs: 16,

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

@@ -59,6 +59,7 @@ export default function LightAdjustNode({ id, data, selected, width }: NodeProps
[],
);
const { localData, applyLocalData, updateLocalData } = useNodeLocalData<LightAdjustData>({
nodeId: id,
data,
normalize: normalizeData,
saveDelayMs: 16,

9
components/canvas/nodes/render-node.tsx
View File

@@ -16,6 +16,7 @@ import { useCanvasGraph } from "@/components/canvas/canvas-graph-context";
import {
findSourceNodeFromGraph,
resolveRenderPreviewInputFromGraph,
shouldFastPathPreviewPipeline,
} from "@/lib/canvas-render-preview";
import { resolveMediaAspectRatio } from "@/lib/canvas-utils";
import { parseAspectRatioString } from "@/lib/image-formats";
@@ -495,6 +496,12 @@ export default function RenderNode({ id, data, selected, width, height }: NodePr
);
const steps = renderPreviewInput.steps;
const previewDebounceMs = shouldFastPathPreviewPipeline(
steps,
graph.previewNodeDataOverrides,
)
? 16
: undefined;
const renderFingerprint = useMemo(
() => ({
@@ -560,6 +567,7 @@ export default function RenderNode({ id, data, selected, width, height }: NodePr
sourceUrl,
steps,
nodeWidth: previewNodeWidth,
debounceMs: previewDebounceMs,
// Inline-Preview: bewusst kompakt halten, damit Änderungen schneller
// sichtbar werden, besonders in langen Graphen.
previewScale: 0.5,
@@ -577,6 +585,7 @@ export default function RenderNode({ id, data, selected, width, height }: NodePr
steps,
nodeWidth: fullscreenPreviewWidth,
includeHistogram: false,
debounceMs: previewDebounceMs,
previewScale: 0.85,
maxPreviewWidth: 1920,
maxDevicePixelRatio: 1.5,

103
components/canvas/nodes/use-node-local-data.ts
View File

@@ -2,6 +2,7 @@
import { useCallback, useEffect, useRef, useState } from "react";
import { useCanvasGraphPreviewOverrides } from "@/components/canvas/canvas-graph-context";
import { useDebouncedCallback } from "@/hooks/use-debounced-callback";
function hashNodeData(value: unknown): string {
@@ -21,69 +22,67 @@ function logNodeDataDebug(event: string, payload: Record<string, unknown>): void
console.info("[Canvas node debug]", event, payload);
}
type PreviewLatencyTrace = {
sequence: number;
changedAtMs: number;
nodeType: string;
origin: "applyLocalData" | "updateLocalData";
};
function writePreviewLatencyTrace(trace: Omit<PreviewLatencyTrace, "sequence">): void {
if (process.env.NODE_ENV === "production") {
return;
}
const debugGlobals = globalThis as typeof globalThis & {
__LEMONSPACE_DEBUG_PREVIEW_LATENCY__?: boolean;
__LEMONSPACE_LAST_PREVIEW_TRACE__?: PreviewLatencyTrace;
};
if (debugGlobals.__LEMONSPACE_DEBUG_PREVIEW_LATENCY__ !== true) {
return;
}
const nextTrace: PreviewLatencyTrace = {
...trace,
sequence: (debugGlobals.__LEMONSPACE_LAST_PREVIEW_TRACE__?.sequence ?? 0) + 1,
};
debugGlobals.__LEMONSPACE_LAST_PREVIEW_TRACE__ = nextTrace;
console.info("[Preview latency] node-local-change", nextTrace);
}
export function useNodeLocalData<T>({
nodeId,
data,
normalize,
saveDelayMs,
onSave,
debugLabel,
}: {
nodeId: string;
data: unknown;
normalize: (value: unknown) => T;
saveDelayMs: number;
onSave: (value: T) => Promise<void> | void;
debugLabel: string;
}) {
const { setPreviewNodeDataOverride, clearPreviewNodeDataOverride } =
useCanvasGraphPreviewOverrides();
const [localData, setLocalDataState] = useState<T>(() => normalize(data));
const localDataRef = useRef(localData);
const persistedDataRef = useRef(localData);
const hasPendingLocalChangesRef = useRef(false);
const localChangeVersionRef = useRef(0);
const isMountedRef = useRef(true);
useEffect(() => {
localDataRef.current = localData;
}, [localData]);
const queueSave = useDebouncedCallback(() => {
void onSave(localDataRef.current);
const savedValue = localDataRef.current;
const savedVersion = localChangeVersionRef.current;
Promise.resolve(onSave(savedValue))
.then(() => {
if (!isMountedRef.current || savedVersion !== localChangeVersionRef.current) {
return;
}
hasPendingLocalChangesRef.current = false;
})
.catch(() => {
if (!isMountedRef.current || savedVersion !== localChangeVersionRef.current) {
return;
}
hasPendingLocalChangesRef.current = false;
localDataRef.current = persistedDataRef.current;
setLocalDataState(persistedDataRef.current);
clearPreviewNodeDataOverride(nodeId);
});
}, saveDelayMs);
useEffect(() => {
const incomingData = normalize(data);
persistedDataRef.current = incomingData;
const incomingHash = hashNodeData(incomingData);
const localHash = hashNodeData(localDataRef.current);
if (incomingHash === localHash) {
hasPendingLocalChangesRef.current = false;
clearPreviewNodeDataOverride(nodeId);
return;
}
@@ -99,44 +98,46 @@ export function useNodeLocalData<T>({
const timer = window.setTimeout(() => {
localDataRef.current = incomingData;
setLocalDataState(incomingData);
clearPreviewNodeDataOverride(nodeId);
}, 0);
return () => {
window.clearTimeout(timer);
};
}, [data, debugLabel, normalize]);
}, [clearPreviewNodeDataOverride, data, debugLabel, nodeId, normalize]);
useEffect(() => {
return () => {
isMountedRef.current = false;
queueSave.cancel();
clearPreviewNodeDataOverride(nodeId);
};
}, [clearPreviewNodeDataOverride, nodeId, queueSave]);
const applyLocalData = useCallback(
(next: T) => {
localChangeVersionRef.current += 1;
hasPendingLocalChangesRef.current = true;
writePreviewLatencyTrace({
changedAtMs: performance.now(),
nodeType: debugLabel,
origin: "applyLocalData",
});
localDataRef.current = next;
setLocalDataState(next);
setPreviewNodeDataOverride(nodeId, next);
queueSave();
},
[debugLabel, queueSave],
[debugLabel, nodeId, queueSave, setPreviewNodeDataOverride],
);
const updateLocalData = useCallback(
(updater: (current: T) => T) => {
const next = updater(localDataRef.current);
localChangeVersionRef.current += 1;
hasPendingLocalChangesRef.current = true;
setLocalDataState((current) => {
const next = updater(current);
writePreviewLatencyTrace({
changedAtMs: performance.now(),
nodeType: debugLabel,
origin: "updateLocalData",
});
localDataRef.current = next;
queueSave();
return next;
});
localDataRef.current = next;
setLocalDataState(next);
setPreviewNodeDataOverride(nodeId, next);
queueSave();
},
[debugLabel, queueSave],
[debugLabel, nodeId, queueSave, setPreviewNodeDataOverride],
);
return {