- 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.
49 lines
1.5 KiB
TypeScript
49 lines
1.5 KiB
TypeScript
import type { PipelineStep } from "@/lib/image-pipeline/contracts";
|
|
import { computeHistogram, type HistogramData } from "@/lib/image-pipeline/histogram";
|
|
import { applyPipelineStep } from "@/lib/image-pipeline/render-core";
|
|
import { loadSourceBitmap } from "@/lib/image-pipeline/source-loader";
|
|
|
|
export type PreviewRenderResult = {
|
|
width: number;
|
|
height: number;
|
|
imageData: ImageData;
|
|
histogram: HistogramData;
|
|
};
|
|
|
|
export async function renderPreview(options: {
|
|
sourceUrl: string;
|
|
steps: readonly PipelineStep[];
|
|
previewWidth: number;
|
|
}): Promise<PreviewRenderResult> {
|
|
const bitmap = await loadSourceBitmap(options.sourceUrl);
|
|
const width = Math.max(1, Math.round(options.previewWidth));
|
|
const height = Math.max(1, Math.round((bitmap.height / bitmap.width) * width));
|
|
|
|
const canvas = document.createElement("canvas");
|
|
canvas.width = width;
|
|
canvas.height = height;
|
|
const context = canvas.getContext("2d", { willReadFrequently: true });
|
|
if (!context) {
|
|
throw new Error("Preview renderer could not create 2D context.");
|
|
}
|
|
|
|
context.drawImage(bitmap, 0, 0, width, height);
|
|
const imageData = context.getImageData(0, 0, width, height);
|
|
|
|
for (let index = 0; index < options.steps.length; index += 1) {
|
|
applyPipelineStep(imageData.data, options.steps[index]!, width, height);
|
|
await new Promise<void>((resolve) => {
|
|
requestAnimationFrame(() => resolve());
|
|
});
|
|
}
|
|
|
|
const histogram = computeHistogram(imageData.data);
|
|
|
|
return {
|
|
width,
|
|
height,
|
|
imageData,
|
|
histogram,
|
|
};
|
|
}
|