Matthias Meister
8703387617
- Added a fallback mechanism for resolving storage URLs in `canvas-helpers.ts`, improving reliability when URLs are not directly available. - Introduced new utility functions in `canvas.tsx` for summarizing update and resize payloads, enhancing debugging capabilities during canvas operations. - Updated `compare-node.tsx` to improve state management and rendering logic, allowing for better handling of incoming edges and display modes. - Refactored `render-node.tsx` to streamline the rendering process and include detailed logging for debugging render operations. - Updated `.gitignore` to exclude `.kilo` files, ensuring cleaner repository management.
78 lines
2.3 KiB
TypeScript
78 lines
2.3 KiB
TypeScript
"use client";
|
|
|
|
import { usePipelinePreview } from "@/hooks/use-pipeline-preview";
|
|
import type { RenderPreviewInput } from "@/lib/canvas-render-preview";
|
|
|
|
const EMPTY_STEPS: RenderPreviewInput["steps"] = [];
|
|
|
|
type CompareSurfaceProps = {
|
|
finalUrl?: string;
|
|
label?: string;
|
|
previewInput?: RenderPreviewInput;
|
|
nodeWidth: number;
|
|
clipWidthPercent?: number;
|
|
preferPreview?: boolean;
|
|
};
|
|
|
|
export default function CompareSurface({
|
|
finalUrl,
|
|
label,
|
|
previewInput,
|
|
nodeWidth,
|
|
clipWidthPercent,
|
|
preferPreview,
|
|
}: CompareSurfaceProps) {
|
|
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 { canvasRef, isRendering, error } = usePipelinePreview({
|
|
sourceUrl: previewSourceUrl,
|
|
steps: previewSteps,
|
|
nodeWidth,
|
|
previewScale: 0.7,
|
|
maxPreviewWidth: 960,
|
|
});
|
|
|
|
const hasPreview = Boolean(usePreview && previewInput);
|
|
const clipStyle =
|
|
typeof clipWidthPercent === "number"
|
|
? {
|
|
clipPath: `inset(0 ${100 - clipWidthPercent}% 0 0)`,
|
|
WebkitClipPath: `inset(0 ${100 - clipWidthPercent}% 0 0)`,
|
|
}
|
|
: undefined;
|
|
|
|
return (
|
|
<div className="pointer-events-none absolute inset-0" style={clipStyle}>
|
|
{visibleFinalUrl ? (
|
|
// eslint-disable-next-line @next/next/no-img-element
|
|
<img
|
|
src={visibleFinalUrl}
|
|
alt={label ?? "Comparison image"}
|
|
className="absolute inset-0 h-full w-full object-contain"
|
|
draggable={false}
|
|
/>
|
|
) : hasPreview ? (
|
|
<canvas
|
|
ref={canvasRef}
|
|
className="absolute inset-0 h-full w-full object-contain"
|
|
/>
|
|
) : null}
|
|
|
|
{hasPreview ? (
|
|
<div className="absolute bottom-2 left-2 rounded bg-amber-500/85 px-1.5 py-0.5 text-[10px] font-medium text-black/90 backdrop-blur-sm">
|
|
{isRendering ? "Live Preview..." : "Live Preview"}
|
|
</div>
|
|
) : null}
|
|
|
|
{hasPreview && error ? (
|
|
<div className="absolute bottom-2 right-2 rounded bg-destructive/85 px-1.5 py-0.5 text-[10px] font-medium text-white backdrop-blur-sm">
|
|
Preview error
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|