Enhance canvas functionality by adding media preview capabilities and image upload handling. Introduce compressed image previews during uploads, improve media library integration, and implement retry logic for bridge edge creation. Update dashboard to display media previews and optimize image node handling.
This commit is contained in:
Matthias
@@ -43,6 +43,7 @@ const RESIZE_CONFIGS: Record<string, ResizeConfig> = {
|
||||
"color-adjust": { minWidth: 300, minHeight: 760 },
|
||||
"light-adjust": { minWidth: 300, minHeight: 860 },
|
||||
"detail-adjust": { minWidth: 300, minHeight: 820 },
|
||||
crop: { minWidth: 320, minHeight: 520 },
|
||||
render: { minWidth: 260, minHeight: 300, keepAspectRatio: true },
|
||||
text: { minWidth: 220, minHeight: 90 },
|
||||
note: { minWidth: 200, minHeight: 90 },
|
||||
|
||||
740
components/canvas/nodes/crop-node.tsx
Normal file
740
components/canvas/nodes/crop-node.tsx
Normal file
@@ -0,0 +1,740 @@
|
||||
"use client";
|
||||
|
||||
import { useCallback, useMemo, useRef, type PointerEvent as ReactPointerEvent } from "react";
|
||||
import { Handle, Position, type Node, type NodeProps } from "@xyflow/react";
|
||||
import { Crop } from "lucide-react";
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
import { useCanvasGraph } from "@/components/canvas/canvas-graph-context";
|
||||
import { useCanvasSync } from "@/components/canvas/canvas-sync-context";
|
||||
import BaseNodeWrapper from "@/components/canvas/nodes/base-node-wrapper";
|
||||
import { useNodeLocalData } from "@/components/canvas/nodes/use-node-local-data";
|
||||
import { usePipelinePreview } from "@/hooks/use-pipeline-preview";
|
||||
import {
|
||||
collectPipelineFromGraph,
|
||||
getSourceImageFromGraph,
|
||||
shouldFastPathPreviewPipeline,
|
||||
} from "@/lib/canvas-render-preview";
|
||||
import {
|
||||
normalizeCropNodeData,
|
||||
type CropFitMode,
|
||||
type CropNodeData,
|
||||
type CropResizeMode,
|
||||
} from "@/lib/image-pipeline/crop-node-data";
|
||||
import type { Id } from "@/convex/_generated/dataModel";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
|
||||
type CropNodeViewData = CropNodeData & {
|
||||
_status?: string;
|
||||
_statusMessage?: string;
|
||||
};
|
||||
|
||||
export type CropNodeType = Node<CropNodeViewData, "crop">;
|
||||
|
||||
const PREVIEW_PIPELINE_TYPES = new Set([
|
||||
"curves",
|
||||
"color-adjust",
|
||||
"light-adjust",
|
||||
"detail-adjust",
|
||||
"crop",
|
||||
]);
|
||||
|
||||
const CUSTOM_DIMENSION_FALLBACK = 1024;
|
||||
const CROP_MIN_SIZE = 0.01;
|
||||
|
||||
type CropHandle = "n" | "s" | "e" | "w" | "ne" | "nw" | "se" | "sw";
|
||||
|
||||
type CropInteractionState = {
|
||||
pointerId: number;
|
||||
mode: "move" | "resize";
|
||||
handle?: CropHandle;
|
||||
startX: number;
|
||||
startY: number;
|
||||
previewWidth: number;
|
||||
previewHeight: number;
|
||||
startCrop: CropNodeData["crop"];
|
||||
keepAspect: boolean;
|
||||
aspectRatio: number;
|
||||
};
|
||||
|
||||
function clamp(value: number, min: number, max: number): number {
|
||||
return Math.max(min, Math.min(max, value));
|
||||
}
|
||||
|
||||
function parseNumberInput(value: string): number | null {
|
||||
const parsed = Number(value);
|
||||
if (!Number.isFinite(parsed)) {
|
||||
return null;
|
||||
}
|
||||
return parsed;
|
||||
}
|
||||
|
||||
function formatPercent(value: number): string {
|
||||
return `${Math.round(value * 100)}%`;
|
||||
}
|
||||
|
||||
function clampCropRect(rect: CropNodeData["crop"]): CropNodeData["crop"] {
|
||||
const width = clamp(rect.width, CROP_MIN_SIZE, 1);
|
||||
const height = clamp(rect.height, CROP_MIN_SIZE, 1);
|
||||
const x = clamp(rect.x, 0, Math.max(0, 1 - width));
|
||||
const y = clamp(rect.y, 0, Math.max(0, 1 - height));
|
||||
|
||||
return {
|
||||
x,
|
||||
y,
|
||||
width,
|
||||
height,
|
||||
};
|
||||
}
|
||||
|
||||
function resizeCropRect(
|
||||
start: CropNodeData["crop"],
|
||||
handle: CropHandle,
|
||||
deltaX: number,
|
||||
deltaY: number,
|
||||
keepAspect: boolean,
|
||||
aspectRatio: number,
|
||||
): CropNodeData["crop"] {
|
||||
const startRight = start.x + start.width;
|
||||
const startBottom = start.y + start.height;
|
||||
|
||||
if (!keepAspect) {
|
||||
let left = start.x;
|
||||
let top = start.y;
|
||||
let right = startRight;
|
||||
let bottom = startBottom;
|
||||
|
||||
if (handle.includes("w")) {
|
||||
left = clamp(start.x + deltaX, 0, startRight - CROP_MIN_SIZE);
|
||||
}
|
||||
if (handle.includes("e")) {
|
||||
right = clamp(startRight + deltaX, start.x + CROP_MIN_SIZE, 1);
|
||||
}
|
||||
if (handle.includes("n")) {
|
||||
top = clamp(start.y + deltaY, 0, startBottom - CROP_MIN_SIZE);
|
||||
}
|
||||
if (handle.includes("s")) {
|
||||
bottom = clamp(startBottom + deltaY, start.y + CROP_MIN_SIZE, 1);
|
||||
}
|
||||
|
||||
return clampCropRect({
|
||||
x: left,
|
||||
y: top,
|
||||
width: right - left,
|
||||
height: bottom - top,
|
||||
});
|
||||
}
|
||||
|
||||
const aspect = Math.max(CROP_MIN_SIZE, aspectRatio);
|
||||
|
||||
if (handle === "e" || handle === "w") {
|
||||
const centerY = start.y + start.height / 2;
|
||||
const maxWidth = handle === "e" ? 1 - start.x : startRight;
|
||||
const minWidth = Math.max(CROP_MIN_SIZE, CROP_MIN_SIZE * aspect);
|
||||
const rawWidth = handle === "e" ? start.width + deltaX : start.width - deltaX;
|
||||
const width = clamp(rawWidth, minWidth, Math.max(minWidth, maxWidth));
|
||||
const height = width / aspect;
|
||||
const y = clamp(centerY - height / 2, 0, Math.max(0, 1 - height));
|
||||
const x = handle === "e" ? start.x : startRight - width;
|
||||
return clampCropRect({ x, y, width, height });
|
||||
}
|
||||
|
||||
if (handle === "n" || handle === "s") {
|
||||
const centerX = start.x + start.width / 2;
|
||||
const maxHeight = handle === "s" ? 1 - start.y : startBottom;
|
||||
const minHeight = Math.max(CROP_MIN_SIZE, CROP_MIN_SIZE / aspect);
|
||||
const rawHeight = handle === "s" ? start.height + deltaY : start.height - deltaY;
|
||||
const height = clamp(rawHeight, minHeight, Math.max(minHeight, maxHeight));
|
||||
const width = height * aspect;
|
||||
const x = clamp(centerX - width / 2, 0, Math.max(0, 1 - width));
|
||||
const y = handle === "s" ? start.y : startBottom - height;
|
||||
return clampCropRect({ x, y, width, height });
|
||||
}
|
||||
|
||||
const movesRight = handle.includes("e");
|
||||
const movesDown = handle.includes("s");
|
||||
const rawWidth = start.width + (movesRight ? deltaX : -deltaX);
|
||||
const rawHeight = start.height + (movesDown ? deltaY : -deltaY);
|
||||
|
||||
const widthByHeight = rawHeight * aspect;
|
||||
const heightByWidth = rawWidth / aspect;
|
||||
const useWidth = Math.abs(rawWidth - start.width) >= Math.abs(rawHeight - start.height);
|
||||
let width = useWidth ? rawWidth : widthByHeight;
|
||||
let height = useWidth ? heightByWidth : rawHeight;
|
||||
|
||||
const anchorX = movesRight ? start.x : startRight;
|
||||
const anchorY = movesDown ? start.y : startBottom;
|
||||
const maxWidth = movesRight ? 1 - anchorX : anchorX;
|
||||
const maxHeight = movesDown ? 1 - anchorY : anchorY;
|
||||
const maxScaleByWidth = maxWidth / Math.max(CROP_MIN_SIZE, width);
|
||||
const maxScaleByHeight = maxHeight / Math.max(CROP_MIN_SIZE, height);
|
||||
const maxScale = Math.min(1, maxScaleByWidth, maxScaleByHeight);
|
||||
width *= maxScale;
|
||||
height *= maxScale;
|
||||
|
||||
const minScaleByWidth = Math.max(1, CROP_MIN_SIZE / Math.max(CROP_MIN_SIZE, width));
|
||||
const minScaleByHeight = Math.max(1, CROP_MIN_SIZE / Math.max(CROP_MIN_SIZE, height));
|
||||
const minScale = Math.max(minScaleByWidth, minScaleByHeight);
|
||||
width *= minScale;
|
||||
height *= minScale;
|
||||
|
||||
const x = movesRight ? anchorX : anchorX - width;
|
||||
const y = movesDown ? anchorY : anchorY - height;
|
||||
return clampCropRect({ x, y, width, height });
|
||||
}
|
||||
|
||||
export default function CropNode({ id, data, selected, width }: NodeProps<CropNodeType>) {
|
||||
const tNodes = useTranslations("nodes");
|
||||
const { queueNodeDataUpdate } = useCanvasSync();
|
||||
const graph = useCanvasGraph();
|
||||
|
||||
const normalizeData = useCallback((value: unknown) => normalizeCropNodeData(value), []);
|
||||
const previewAreaRef = useRef<HTMLDivElement | null>(null);
|
||||
const interactionRef = useRef<CropInteractionState | null>(null);
|
||||
const { localData, updateLocalData } = useNodeLocalData<CropNodeData>({
|
||||
nodeId: id,
|
||||
data,
|
||||
normalize: normalizeData,
|
||||
saveDelayMs: 40,
|
||||
onSave: (next) =>
|
||||
queueNodeDataUpdate({
|
||||
nodeId: id as Id<"nodes">,
|
||||
data: next,
|
||||
}),
|
||||
debugLabel: "crop",
|
||||
});
|
||||
|
||||
const sourceUrl = useMemo(
|
||||
() =>
|
||||
getSourceImageFromGraph(graph, {
|
||||
nodeId: id,
|
||||
isSourceNode: (node) =>
|
||||
node.type === "image" ||
|
||||
node.type === "ai-image" ||
|
||||
node.type === "asset" ||
|
||||
node.type === "video" ||
|
||||
node.type === "ai-video",
|
||||
getSourceImageFromNode: (node) => {
|
||||
const sourceData = (node.data ?? {}) as Record<string, unknown>;
|
||||
const directUrl = typeof sourceData.url === "string" ? sourceData.url : null;
|
||||
if (directUrl && directUrl.length > 0) {
|
||||
return directUrl;
|
||||
}
|
||||
const previewUrl =
|
||||
typeof sourceData.previewUrl === "string" ? sourceData.previewUrl : null;
|
||||
return previewUrl && previewUrl.length > 0 ? previewUrl : null;
|
||||
},
|
||||
}),
|
||||
[graph, id],
|
||||
);
|
||||
|
||||
const steps = useMemo(() => {
|
||||
const collected = collectPipelineFromGraph(graph, {
|
||||
nodeId: id,
|
||||
isPipelineNode: (node) => PREVIEW_PIPELINE_TYPES.has(node.type ?? ""),
|
||||
});
|
||||
|
||||
return collected.map((step) => {
|
||||
if (step.nodeId === id && step.type === "crop") {
|
||||
return {
|
||||
...step,
|
||||
params: localData,
|
||||
};
|
||||
}
|
||||
return step;
|
||||
});
|
||||
}, [graph, id, localData]);
|
||||
|
||||
const previewDebounceMs = shouldFastPathPreviewPipeline(steps, graph.previewNodeDataOverrides)
|
||||
? 16
|
||||
: undefined;
|
||||
|
||||
const { canvasRef, hasSource, isRendering, previewAspectRatio, error } = usePipelinePreview({
|
||||
sourceUrl,
|
||||
steps,
|
||||
nodeWidth: Math.max(250, Math.round(width ?? 300)),
|
||||
includeHistogram: false,
|
||||
debounceMs: previewDebounceMs,
|
||||
previewScale: 0.5,
|
||||
maxPreviewWidth: 720,
|
||||
maxDevicePixelRatio: 1.25,
|
||||
});
|
||||
|
||||
const outputResolutionLabel =
|
||||
localData.resize.mode === "custom"
|
||||
? `${localData.resize.width ?? CUSTOM_DIMENSION_FALLBACK} x ${localData.resize.height ?? CUSTOM_DIMENSION_FALLBACK}`
|
||||
: tNodes("adjustments.crop.sourceResolution");
|
||||
|
||||
const updateCropField = (field: keyof CropNodeData["crop"], value: number) => {
|
||||
updateLocalData((current) =>
|
||||
normalizeCropNodeData({
|
||||
...current,
|
||||
crop: {
|
||||
...current.crop,
|
||||
[field]: value,
|
||||
},
|
||||
}),
|
||||
);
|
||||
};
|
||||
|
||||
const updateResize = (next: Partial<CropNodeData["resize"]>) => {
|
||||
updateLocalData((current) =>
|
||||
normalizeCropNodeData({
|
||||
...current,
|
||||
resize: {
|
||||
...current.resize,
|
||||
...next,
|
||||
},
|
||||
}),
|
||||
);
|
||||
};
|
||||
|
||||
const beginCropInteraction = useCallback(
|
||||
(event: ReactPointerEvent<HTMLElement>, mode: "move" | "resize", handle?: CropHandle) => {
|
||||
if (!hasSource) {
|
||||
return;
|
||||
}
|
||||
|
||||
const previewElement = previewAreaRef.current;
|
||||
if (!previewElement) {
|
||||
return;
|
||||
}
|
||||
|
||||
const bounds = previewElement.getBoundingClientRect();
|
||||
if (bounds.width <= 0 || bounds.height <= 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
const pointerId = Number.isFinite(event.pointerId) ? event.pointerId : 1;
|
||||
event.currentTarget.setPointerCapture?.(pointerId);
|
||||
|
||||
interactionRef.current = {
|
||||
pointerId,
|
||||
mode,
|
||||
handle,
|
||||
startX: event.clientX,
|
||||
startY: event.clientY,
|
||||
previewWidth: bounds.width,
|
||||
previewHeight: bounds.height,
|
||||
startCrop: localData.crop,
|
||||
keepAspect: localData.resize.keepAspect,
|
||||
aspectRatio: localData.crop.width / Math.max(CROP_MIN_SIZE, localData.crop.height),
|
||||
};
|
||||
},
|
||||
[hasSource, localData.crop, localData.resize.keepAspect],
|
||||
);
|
||||
|
||||
const updateCropInteraction = useCallback(
|
||||
(event: ReactPointerEvent<HTMLElement>) => {
|
||||
const activeInteraction = interactionRef.current;
|
||||
if (!activeInteraction) {
|
||||
return;
|
||||
}
|
||||
|
||||
const pointerId = Number.isFinite(event.pointerId) ? event.pointerId : 1;
|
||||
if (pointerId !== activeInteraction.pointerId) {
|
||||
return;
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
const deltaX = (event.clientX - activeInteraction.startX) / activeInteraction.previewWidth;
|
||||
const deltaY = (event.clientY - activeInteraction.startY) / activeInteraction.previewHeight;
|
||||
const nextCrop =
|
||||
activeInteraction.mode === "move"
|
||||
? clampCropRect({
|
||||
...activeInteraction.startCrop,
|
||||
x: activeInteraction.startCrop.x + deltaX,
|
||||
y: activeInteraction.startCrop.y + deltaY,
|
||||
})
|
||||
: resizeCropRect(
|
||||
activeInteraction.startCrop,
|
||||
activeInteraction.handle ?? "se",
|
||||
deltaX,
|
||||
deltaY,
|
||||
activeInteraction.keepAspect,
|
||||
activeInteraction.aspectRatio,
|
||||
);
|
||||
|
||||
updateLocalData((current) =>
|
||||
normalizeCropNodeData({
|
||||
...current,
|
||||
crop: nextCrop,
|
||||
}),
|
||||
);
|
||||
},
|
||||
[updateLocalData],
|
||||
);
|
||||
|
||||
const endCropInteraction = useCallback((event: ReactPointerEvent<HTMLElement>) => {
|
||||
const activeInteraction = interactionRef.current;
|
||||
if (!activeInteraction) {
|
||||
return;
|
||||
}
|
||||
|
||||
const pointerId = Number.isFinite(event.pointerId) ? event.pointerId : 1;
|
||||
if (pointerId !== activeInteraction.pointerId) {
|
||||
return;
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
event.currentTarget.releasePointerCapture?.(pointerId);
|
||||
interactionRef.current = null;
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<BaseNodeWrapper
|
||||
nodeType="crop"
|
||||
selected={selected}
|
||||
status={data._status}
|
||||
statusMessage={data._statusMessage}
|
||||
className="min-w-[320px] border-violet-500/30"
|
||||
>
|
||||
<Handle
|
||||
type="target"
|
||||
position={Position.Left}
|
||||
className="!h-3 !w-3 !border-2 !border-background !bg-violet-500"
|
||||
/>
|
||||
|
||||
<div className="space-y-3 p-3">
|
||||
<div className="flex items-center gap-1.5 text-xs font-medium text-violet-700 dark:text-violet-400">
|
||||
<Crop className="h-3.5 w-3.5" />
|
||||
{tNodes("adjustments.crop.title")}
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div
|
||||
ref={previewAreaRef}
|
||||
data-testid="crop-preview-area"
|
||||
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">
|
||||
{tNodes("adjustments.crop.previewHint")}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{hasSource ? <canvas ref={canvasRef} className="h-full w-full" /> : null}
|
||||
|
||||
{hasSource ? (
|
||||
<div className="pointer-events-none absolute inset-0">
|
||||
<div
|
||||
data-testid="crop-overlay"
|
||||
className="nodrag pointer-events-auto absolute cursor-move border border-violet-300 bg-violet-500/10"
|
||||
style={{
|
||||
left: `${localData.crop.x * 100}%`,
|
||||
top: `${localData.crop.y * 100}%`,
|
||||
width: `${localData.crop.width * 100}%`,
|
||||
height: `${localData.crop.height * 100}%`,
|
||||
}}
|
||||
onPointerDown={(event) => beginCropInteraction(event, "move")}
|
||||
onPointerMove={updateCropInteraction}
|
||||
onPointerUp={endCropInteraction}
|
||||
onPointerCancel={endCropInteraction}
|
||||
>
|
||||
<div className="pointer-events-none absolute left-1/3 top-0 h-full w-px bg-violet-200/70" />
|
||||
<div className="pointer-events-none absolute left-2/3 top-0 h-full w-px bg-violet-200/70" />
|
||||
<div className="pointer-events-none absolute left-0 top-1/3 h-px w-full bg-violet-200/70" />
|
||||
<div className="pointer-events-none absolute left-0 top-2/3 h-px w-full bg-violet-200/70" />
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
data-testid="crop-handle-nw"
|
||||
className="nodrag pointer-events-auto absolute h-3 w-3 -translate-x-1/2 -translate-y-1/2 cursor-nwse-resize rounded-full border border-background bg-violet-500"
|
||||
style={{ left: `${localData.crop.x * 100}%`, top: `${localData.crop.y * 100}%` }}
|
||||
onPointerDown={(event) => beginCropInteraction(event, "resize", "nw")}
|
||||
onPointerMove={updateCropInteraction}
|
||||
onPointerUp={endCropInteraction}
|
||||
onPointerCancel={endCropInteraction}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
data-testid="crop-handle-n"
|
||||
className="nodrag pointer-events-auto absolute h-3 w-3 -translate-x-1/2 -translate-y-1/2 cursor-ns-resize rounded-full border border-background bg-violet-500"
|
||||
style={{
|
||||
left: `${(localData.crop.x + localData.crop.width / 2) * 100}%`,
|
||||
top: `${localData.crop.y * 100}%`,
|
||||
}}
|
||||
onPointerDown={(event) => beginCropInteraction(event, "resize", "n")}
|
||||
onPointerMove={updateCropInteraction}
|
||||
onPointerUp={endCropInteraction}
|
||||
onPointerCancel={endCropInteraction}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
data-testid="crop-handle-ne"
|
||||
className="nodrag pointer-events-auto absolute h-3 w-3 -translate-x-1/2 -translate-y-1/2 cursor-nesw-resize rounded-full border border-background bg-violet-500"
|
||||
style={{
|
||||
left: `${(localData.crop.x + localData.crop.width) * 100}%`,
|
||||
top: `${localData.crop.y * 100}%`,
|
||||
}}
|
||||
onPointerDown={(event) => beginCropInteraction(event, "resize", "ne")}
|
||||
onPointerMove={updateCropInteraction}
|
||||
onPointerUp={endCropInteraction}
|
||||
onPointerCancel={endCropInteraction}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
data-testid="crop-handle-e"
|
||||
className="nodrag pointer-events-auto absolute h-3 w-3 -translate-x-1/2 -translate-y-1/2 cursor-ew-resize rounded-full border border-background bg-violet-500"
|
||||
style={{
|
||||
left: `${(localData.crop.x + localData.crop.width) * 100}%`,
|
||||
top: `${(localData.crop.y + localData.crop.height / 2) * 100}%`,
|
||||
}}
|
||||
onPointerDown={(event) => beginCropInteraction(event, "resize", "e")}
|
||||
onPointerMove={updateCropInteraction}
|
||||
onPointerUp={endCropInteraction}
|
||||
onPointerCancel={endCropInteraction}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
data-testid="crop-handle-se"
|
||||
className="nodrag pointer-events-auto absolute h-3 w-3 -translate-x-1/2 -translate-y-1/2 cursor-nwse-resize rounded-full border border-background bg-violet-500"
|
||||
style={{
|
||||
left: `${(localData.crop.x + localData.crop.width) * 100}%`,
|
||||
top: `${(localData.crop.y + localData.crop.height) * 100}%`,
|
||||
}}
|
||||
onPointerDown={(event) => beginCropInteraction(event, "resize", "se")}
|
||||
onPointerMove={updateCropInteraction}
|
||||
onPointerUp={endCropInteraction}
|
||||
onPointerCancel={endCropInteraction}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
data-testid="crop-handle-s"
|
||||
className="nodrag pointer-events-auto absolute h-3 w-3 -translate-x-1/2 -translate-y-1/2 cursor-ns-resize rounded-full border border-background bg-violet-500"
|
||||
style={{
|
||||
left: `${(localData.crop.x + localData.crop.width / 2) * 100}%`,
|
||||
top: `${(localData.crop.y + localData.crop.height) * 100}%`,
|
||||
}}
|
||||
onPointerDown={(event) => beginCropInteraction(event, "resize", "s")}
|
||||
onPointerMove={updateCropInteraction}
|
||||
onPointerUp={endCropInteraction}
|
||||
onPointerCancel={endCropInteraction}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
data-testid="crop-handle-sw"
|
||||
className="nodrag pointer-events-auto absolute h-3 w-3 -translate-x-1/2 -translate-y-1/2 cursor-nesw-resize rounded-full border border-background bg-violet-500"
|
||||
style={{
|
||||
left: `${localData.crop.x * 100}%`,
|
||||
top: `${(localData.crop.y + localData.crop.height) * 100}%`,
|
||||
}}
|
||||
onPointerDown={(event) => beginCropInteraction(event, "resize", "sw")}
|
||||
onPointerMove={updateCropInteraction}
|
||||
onPointerUp={endCropInteraction}
|
||||
onPointerCancel={endCropInteraction}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
data-testid="crop-handle-w"
|
||||
className="nodrag pointer-events-auto absolute h-3 w-3 -translate-x-1/2 -translate-y-1/2 cursor-ew-resize rounded-full border border-background bg-violet-500"
|
||||
style={{
|
||||
left: `${localData.crop.x * 100}%`,
|
||||
top: `${(localData.crop.y + localData.crop.height / 2) * 100}%`,
|
||||
}}
|
||||
onPointerDown={(event) => beginCropInteraction(event, "resize", "w")}
|
||||
onPointerMove={updateCropInteraction}
|
||||
onPointerUp={endCropInteraction}
|
||||
onPointerCancel={endCropInteraction}
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{isRendering ? (
|
||||
<div className="absolute right-1 top-1 rounded bg-background/80 px-1.5 py-0.5 text-[10px] text-muted-foreground">
|
||||
{tNodes("adjustments.crop.previewRendering")}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between rounded-md border border-border/70 bg-muted/30 px-2 py-1 text-[11px] text-muted-foreground">
|
||||
<span>{tNodes("adjustments.crop.outputResolutionLabel")}</span>
|
||||
<span className="font-medium text-foreground">{outputResolutionLabel}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<label className="space-y-1 text-[11px] text-muted-foreground">
|
||||
<span>{tNodes("adjustments.crop.fields.x")}</span>
|
||||
<input
|
||||
type="number"
|
||||
min={0}
|
||||
max={1}
|
||||
step={0.01}
|
||||
value={localData.crop.x}
|
||||
onChange={(event) => {
|
||||
const parsed = parseNumberInput(event.target.value);
|
||||
if (parsed === null) return;
|
||||
updateCropField("x", clamp(parsed, 0, 1));
|
||||
}}
|
||||
className="nodrag nowheel h-8 w-full rounded-md border border-input bg-background px-2 text-xs"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label className="space-y-1 text-[11px] text-muted-foreground">
|
||||
<span>{tNodes("adjustments.crop.fields.y")}</span>
|
||||
<input
|
||||
type="number"
|
||||
min={0}
|
||||
max={1}
|
||||
step={0.01}
|
||||
value={localData.crop.y}
|
||||
onChange={(event) => {
|
||||
const parsed = parseNumberInput(event.target.value);
|
||||
if (parsed === null) return;
|
||||
updateCropField("y", clamp(parsed, 0, 1));
|
||||
}}
|
||||
className="nodrag nowheel h-8 w-full rounded-md border border-input bg-background px-2 text-xs"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label className="space-y-1 text-[11px] text-muted-foreground">
|
||||
<span>{tNodes("adjustments.crop.fields.width")}</span>
|
||||
<input
|
||||
type="number"
|
||||
min={0.01}
|
||||
max={1}
|
||||
step={0.01}
|
||||
value={localData.crop.width}
|
||||
onChange={(event) => {
|
||||
const parsed = parseNumberInput(event.target.value);
|
||||
if (parsed === null) return;
|
||||
updateCropField("width", clamp(parsed, 0.01, 1));
|
||||
}}
|
||||
className="nodrag nowheel h-8 w-full rounded-md border border-input bg-background px-2 text-xs"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label className="space-y-1 text-[11px] text-muted-foreground">
|
||||
<span>{tNodes("adjustments.crop.fields.height")}</span>
|
||||
<input
|
||||
type="number"
|
||||
min={0.01}
|
||||
max={1}
|
||||
step={0.01}
|
||||
value={localData.crop.height}
|
||||
onChange={(event) => {
|
||||
const parsed = parseNumberInput(event.target.value);
|
||||
if (parsed === null) return;
|
||||
updateCropField("height", clamp(parsed, 0.01, 1));
|
||||
}}
|
||||
className="nodrag nowheel h-8 w-full rounded-md border border-input bg-background px-2 text-xs"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-2 text-[11px]">
|
||||
<div className="space-y-1">
|
||||
<div className="text-muted-foreground">{tNodes("adjustments.crop.resizeMode")}</div>
|
||||
<Select
|
||||
value={localData.resize.mode}
|
||||
onValueChange={(value: CropResizeMode) => {
|
||||
updateResize({ mode: value });
|
||||
}}
|
||||
>
|
||||
<SelectTrigger className="nodrag h-8 text-xs" size="sm">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent className="nodrag">
|
||||
<SelectItem value="source">{tNodes("adjustments.crop.resizeModes.source")}</SelectItem>
|
||||
<SelectItem value="custom">{tNodes("adjustments.crop.resizeModes.custom")}</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<div className="text-muted-foreground">{tNodes("adjustments.crop.fitMode")}</div>
|
||||
<Select
|
||||
value={localData.resize.fit}
|
||||
onValueChange={(value: CropFitMode) => {
|
||||
updateResize({ fit: value });
|
||||
}}
|
||||
>
|
||||
<SelectTrigger className="nodrag h-8 text-xs" size="sm">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent className="nodrag">
|
||||
<SelectItem value="cover">{tNodes("adjustments.crop.fitModes.cover")}</SelectItem>
|
||||
<SelectItem value="contain">{tNodes("adjustments.crop.fitModes.contain")}</SelectItem>
|
||||
<SelectItem value="fill">{tNodes("adjustments.crop.fitModes.fill")}</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{localData.resize.mode === "custom" ? (
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<label className="space-y-1 text-[11px] text-muted-foreground">
|
||||
<span>{tNodes("adjustments.crop.fields.outputWidth")}</span>
|
||||
<input
|
||||
type="number"
|
||||
min={1}
|
||||
max={16384}
|
||||
step={1}
|
||||
value={localData.resize.width ?? CUSTOM_DIMENSION_FALLBACK}
|
||||
onChange={(event) => {
|
||||
const parsed = parseNumberInput(event.target.value);
|
||||
if (parsed === null) return;
|
||||
updateResize({ width: Math.round(clamp(parsed, 1, 16384)) });
|
||||
}}
|
||||
className="nodrag nowheel h-8 w-full rounded-md border border-input bg-background px-2 text-xs"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label className="space-y-1 text-[11px] text-muted-foreground">
|
||||
<span>{tNodes("adjustments.crop.fields.outputHeight")}</span>
|
||||
<input
|
||||
type="number"
|
||||
min={1}
|
||||
max={16384}
|
||||
step={1}
|
||||
value={localData.resize.height ?? CUSTOM_DIMENSION_FALLBACK}
|
||||
onChange={(event) => {
|
||||
const parsed = parseNumberInput(event.target.value);
|
||||
if (parsed === null) return;
|
||||
updateResize({ height: Math.round(clamp(parsed, 1, 16384)) });
|
||||
}}
|
||||
className="nodrag nowheel h-8 w-full rounded-md border border-input bg-background px-2 text-xs"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<label className="flex items-center gap-2 text-[11px] text-muted-foreground">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={localData.resize.keepAspect}
|
||||
onChange={(event) => updateResize({ keepAspect: event.target.checked })}
|
||||
className="nodrag h-3.5 w-3.5 rounded border-input"
|
||||
/>
|
||||
{tNodes("adjustments.crop.keepAspect")}
|
||||
</label>
|
||||
|
||||
<div className="text-[10px] text-muted-foreground">
|
||||
{tNodes("adjustments.crop.cropSummary", {
|
||||
x: formatPercent(localData.crop.x),
|
||||
y: formatPercent(localData.crop.y),
|
||||
width: formatPercent(localData.crop.width),
|
||||
height: formatPercent(localData.crop.height),
|
||||
})}
|
||||
</div>
|
||||
|
||||
{error ? <p className="text-[11px] text-destructive">{error}</p> : null}
|
||||
</div>
|
||||
|
||||
<Handle
|
||||
type="source"
|
||||
position={Position.Right}
|
||||
className="!h-3 !w-3 !border-2 !border-background !bg-violet-500"
|
||||
/>
|
||||
</BaseNodeWrapper>
|
||||
);
|
||||
}
|
||||
@@ -14,6 +14,10 @@ import { useTranslations } from "next-intl";
|
||||
import { api } from "@/convex/_generated/api";
|
||||
import type { Id } from "@/convex/_generated/dataModel";
|
||||
import BaseNodeWrapper from "./base-node-wrapper";
|
||||
import {
|
||||
MediaLibraryDialog,
|
||||
type MediaLibraryItem,
|
||||
} from "@/components/media/media-library-dialog";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
@@ -21,9 +25,17 @@ import {
|
||||
} from "@/components/ui/dialog";
|
||||
import { toast } from "@/lib/toast";
|
||||
import { computeMediaNodeSize } from "@/lib/canvas-utils";
|
||||
import {
|
||||
emitDashboardSnapshotCacheInvalidationSignal,
|
||||
invalidateDashboardSnapshotForLastSignedInUser,
|
||||
} from "@/lib/dashboard-snapshot-cache";
|
||||
import { useCanvasSync } from "@/components/canvas/canvas-sync-context";
|
||||
import { useMutation } from "convex/react";
|
||||
import { Progress } from "@/components/ui/progress";
|
||||
import {
|
||||
createCompressedImagePreview,
|
||||
getImageDimensions,
|
||||
} from "@/components/canvas/canvas-media-utils";
|
||||
|
||||
const ALLOWED_IMAGE_TYPES = new Set([
|
||||
"image/png",
|
||||
@@ -34,45 +46,22 @@ const MAX_IMAGE_BYTES = 10 * 1024 * 1024;
|
||||
const OPTIMISTIC_NODE_PREFIX = "optimistic_";
|
||||
|
||||
type ImageNodeData = {
|
||||
canvasId?: string;
|
||||
storageId?: string;
|
||||
previewStorageId?: string;
|
||||
url?: string;
|
||||
filename?: string;
|
||||
mimeType?: string;
|
||||
width?: number;
|
||||
height?: number;
|
||||
previewWidth?: number;
|
||||
previewHeight?: number;
|
||||
_status?: string;
|
||||
_statusMessage?: string;
|
||||
};
|
||||
|
||||
export type ImageNode = Node<ImageNodeData, "image">;
|
||||
|
||||
async function getImageDimensions(file: File): Promise<{ width: number; height: number }> {
|
||||
return await new Promise((resolve, reject) => {
|
||||
const objectUrl = URL.createObjectURL(file);
|
||||
const image = new window.Image();
|
||||
|
||||
image.onload = () => {
|
||||
const width = image.naturalWidth;
|
||||
const height = image.naturalHeight;
|
||||
URL.revokeObjectURL(objectUrl);
|
||||
|
||||
if (!width || !height) {
|
||||
reject(new Error("Could not read image dimensions"));
|
||||
return;
|
||||
}
|
||||
|
||||
resolve({ width, height });
|
||||
};
|
||||
|
||||
image.onerror = () => {
|
||||
URL.revokeObjectURL(objectUrl);
|
||||
reject(new Error("Could not decode image"));
|
||||
};
|
||||
|
||||
image.src = objectUrl;
|
||||
});
|
||||
}
|
||||
|
||||
export default function ImageNode({
|
||||
id,
|
||||
data,
|
||||
@@ -82,6 +71,7 @@ export default function ImageNode({
|
||||
}: NodeProps<ImageNode>) {
|
||||
const t = useTranslations('toasts');
|
||||
const generateUploadUrl = useMutation(api.storage.generateUploadUrl);
|
||||
const registerUploadedImageMedia = useMutation(api.storage.registerUploadedImageMedia);
|
||||
const { queueNodeDataUpdate, queueNodeResize, status } = useCanvasSync();
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
const [uploadPhase, setUploadPhase] = useState<"idle" | "uploading" | "syncing">("idle");
|
||||
@@ -89,9 +79,48 @@ export default function ImageNode({
|
||||
const [pendingUploadStorageId, setPendingUploadStorageId] = useState<string | null>(
|
||||
null,
|
||||
);
|
||||
const [mediaLibraryPhase, setMediaLibraryPhase] = useState<
|
||||
"idle" | "applying" | "syncing"
|
||||
>("idle");
|
||||
const [pendingMediaLibraryStorageId, setPendingMediaLibraryStorageId] = useState<
|
||||
string | null
|
||||
>(null);
|
||||
const [isDragOver, setIsDragOver] = useState(false);
|
||||
const [isFullscreenOpen, setIsFullscreenOpen] = useState(false);
|
||||
const [isMediaLibraryOpen, setIsMediaLibraryOpen] = useState(false);
|
||||
const hasAutoSizedRef = useRef(false);
|
||||
const canvasId = data.canvasId as Id<"canvases"> | undefined;
|
||||
const isOptimisticNodeId =
|
||||
typeof id === "string" && id.startsWith(OPTIMISTIC_NODE_PREFIX);
|
||||
const isNodeStable = !isOptimisticNodeId;
|
||||
|
||||
const registerUploadInMediaLibrary = useCallback(
|
||||
(args: {
|
||||
storageId: string;
|
||||
filename?: string;
|
||||
mimeType?: string;
|
||||
width?: number;
|
||||
height?: number;
|
||||
nodeId?: Id<"nodes">;
|
||||
}) => {
|
||||
if (!canvasId) {
|
||||
return;
|
||||
}
|
||||
|
||||
void registerUploadedImageMedia({
|
||||
canvasId,
|
||||
storageId: args.storageId as Id<"_storage">,
|
||||
nodeId: args.nodeId,
|
||||
filename: args.filename,
|
||||
mimeType: args.mimeType,
|
||||
width: args.width,
|
||||
height: args.height,
|
||||
}).catch((error: unknown) => {
|
||||
console.warn("[ImageNode] registerUploadedImageMedia failed", error);
|
||||
});
|
||||
},
|
||||
[canvasId, registerUploadedImageMedia],
|
||||
);
|
||||
|
||||
const isPendingUploadSynced =
|
||||
pendingUploadStorageId !== null &&
|
||||
@@ -99,7 +128,35 @@ export default function ImageNode({
|
||||
typeof data.url === "string" &&
|
||||
data.url.length > 0;
|
||||
const isWaitingForCanvasSync = pendingUploadStorageId !== null && !isPendingUploadSynced;
|
||||
const isPendingMediaLibrarySynced =
|
||||
pendingMediaLibraryStorageId !== null &&
|
||||
data.storageId === pendingMediaLibraryStorageId &&
|
||||
typeof data.url === "string" &&
|
||||
data.url.length > 0;
|
||||
const isWaitingForMediaLibrarySync =
|
||||
pendingMediaLibraryStorageId !== null && !isPendingMediaLibrarySynced;
|
||||
const isUploading = uploadPhase !== "idle" || isWaitingForCanvasSync;
|
||||
const isApplyingMediaLibrary =
|
||||
mediaLibraryPhase !== "idle" || isWaitingForMediaLibrarySync;
|
||||
const isNodeLoading = isUploading || isApplyingMediaLibrary;
|
||||
|
||||
useEffect(() => {
|
||||
if (!isPendingUploadSynced) {
|
||||
return;
|
||||
}
|
||||
|
||||
setPendingUploadStorageId(null);
|
||||
setUploadPhase("idle");
|
||||
}, [isPendingUploadSynced]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isPendingMediaLibrarySynced) {
|
||||
return;
|
||||
}
|
||||
|
||||
setPendingMediaLibraryStorageId(null);
|
||||
setMediaLibraryPhase("idle");
|
||||
}, [isPendingMediaLibrarySynced]);
|
||||
|
||||
useEffect(() => {
|
||||
if (typeof id === "string" && id.startsWith(OPTIMISTIC_NODE_PREFIX)) {
|
||||
@@ -170,6 +227,13 @@ export default function ImageNode({
|
||||
|
||||
try {
|
||||
let dimensions: { width: number; height: number } | undefined;
|
||||
let previewUpload:
|
||||
| {
|
||||
previewStorageId: string;
|
||||
previewWidth: number;
|
||||
previewHeight: number;
|
||||
}
|
||||
| undefined;
|
||||
try {
|
||||
dimensions = await getImageDimensions(file);
|
||||
} catch {
|
||||
@@ -208,6 +272,30 @@ export default function ImageNode({
|
||||
},
|
||||
);
|
||||
|
||||
try {
|
||||
const preview = await createCompressedImagePreview(file);
|
||||
const previewUploadUrl = await generateUploadUrl();
|
||||
const previewUploadResult = await fetch(previewUploadUrl, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": preview.blob.type || "image/webp" },
|
||||
body: preview.blob,
|
||||
});
|
||||
|
||||
if (!previewUploadResult.ok) {
|
||||
throw new Error(`Preview upload failed: ${previewUploadResult.status}`);
|
||||
}
|
||||
|
||||
const { storageId: previewStorageId } =
|
||||
(await previewUploadResult.json()) as { storageId: string };
|
||||
previewUpload = {
|
||||
previewStorageId,
|
||||
previewWidth: preview.width,
|
||||
previewHeight: preview.height,
|
||||
};
|
||||
} catch (previewError) {
|
||||
console.warn("[ImageNode] preview generation/upload failed", previewError);
|
||||
}
|
||||
|
||||
setUploadProgress(100);
|
||||
setPendingUploadStorageId(storageId);
|
||||
setUploadPhase("syncing");
|
||||
@@ -216,6 +304,7 @@ export default function ImageNode({
|
||||
nodeId: id as Id<"nodes">,
|
||||
data: {
|
||||
storageId,
|
||||
...(previewUpload ?? {}),
|
||||
filename: file.name,
|
||||
mimeType: file.type,
|
||||
...(dimensions ? { width: dimensions.width, height: dimensions.height } : {}),
|
||||
@@ -235,6 +324,22 @@ export default function ImageNode({
|
||||
});
|
||||
}
|
||||
|
||||
const nodeIdForRegistration =
|
||||
typeof id === "string" && !id.startsWith(OPTIMISTIC_NODE_PREFIX)
|
||||
? (id as Id<"nodes">)
|
||||
: undefined;
|
||||
|
||||
registerUploadInMediaLibrary({
|
||||
storageId,
|
||||
filename: file.name,
|
||||
mimeType: file.type,
|
||||
width: dimensions?.width,
|
||||
height: dimensions?.height,
|
||||
nodeId: nodeIdForRegistration,
|
||||
});
|
||||
invalidateDashboardSnapshotForLastSignedInUser();
|
||||
emitDashboardSnapshotCacheInvalidationSignal();
|
||||
|
||||
toast.success(t('canvas.imageUploaded'));
|
||||
setUploadPhase("idle");
|
||||
} catch (err) {
|
||||
@@ -254,16 +359,69 @@ export default function ImageNode({
|
||||
isUploading,
|
||||
queueNodeDataUpdate,
|
||||
queueNodeResize,
|
||||
registerUploadInMediaLibrary,
|
||||
status.isOffline,
|
||||
t,
|
||||
],
|
||||
);
|
||||
|
||||
const handlePickFromMediaLibrary = useCallback(
|
||||
async (item: MediaLibraryItem) => {
|
||||
if (isNodeLoading) {
|
||||
return;
|
||||
}
|
||||
|
||||
setMediaLibraryPhase("applying");
|
||||
setPendingMediaLibraryStorageId(item.storageId);
|
||||
|
||||
try {
|
||||
await queueNodeDataUpdate({
|
||||
nodeId: id as Id<"nodes">,
|
||||
data: {
|
||||
storageId: item.storageId,
|
||||
previewStorageId: item.previewStorageId,
|
||||
filename: item.filename,
|
||||
mimeType: item.mimeType,
|
||||
width: item.width,
|
||||
height: item.height,
|
||||
previewWidth: item.previewWidth,
|
||||
previewHeight: item.previewHeight,
|
||||
},
|
||||
});
|
||||
setMediaLibraryPhase("syncing");
|
||||
|
||||
if (typeof item.width === "number" && typeof item.height === "number") {
|
||||
const targetSize = computeMediaNodeSize("image", {
|
||||
intrinsicWidth: item.width,
|
||||
intrinsicHeight: item.height,
|
||||
});
|
||||
|
||||
await queueNodeResize({
|
||||
nodeId: id as Id<"nodes">,
|
||||
width: targetSize.width,
|
||||
height: targetSize.height,
|
||||
});
|
||||
}
|
||||
|
||||
setIsMediaLibraryOpen(false);
|
||||
} catch (error) {
|
||||
console.error("Failed to apply media library image", error);
|
||||
setPendingMediaLibraryStorageId(null);
|
||||
setMediaLibraryPhase("idle");
|
||||
toast.error(
|
||||
t('canvas.uploadFailed'),
|
||||
error instanceof Error ? error.message : undefined,
|
||||
);
|
||||
}
|
||||
},
|
||||
[id, isNodeLoading, queueNodeDataUpdate, queueNodeResize, t],
|
||||
);
|
||||
|
||||
const handleClick = useCallback(() => {
|
||||
if (!data.url && !isUploading) {
|
||||
if (!data.url && !isNodeLoading) {
|
||||
fileInputRef.current?.click();
|
||||
}
|
||||
}, [data.url, isUploading]);
|
||||
}, [data.url, isNodeLoading]);
|
||||
|
||||
const handleFileChange = useCallback(
|
||||
(e: ChangeEvent<HTMLInputElement>) => {
|
||||
@@ -294,26 +452,31 @@ export default function ImageNode({
|
||||
e.stopPropagation();
|
||||
setIsDragOver(false);
|
||||
|
||||
if (isUploading) return;
|
||||
if (isNodeLoading) return;
|
||||
const file = e.dataTransfer.files?.[0];
|
||||
if (file && file.type.startsWith("image/")) {
|
||||
uploadFile(file);
|
||||
}
|
||||
},
|
||||
[isUploading, uploadFile]
|
||||
[isNodeLoading, uploadFile]
|
||||
);
|
||||
|
||||
const handleReplace = useCallback(() => {
|
||||
if (isUploading) return;
|
||||
if (isNodeLoading) return;
|
||||
fileInputRef.current?.click();
|
||||
}, [isUploading]);
|
||||
}, [isNodeLoading]);
|
||||
|
||||
const showFilename = Boolean(data.filename && data.url);
|
||||
const effectiveUploadProgress = isWaitingForCanvasSync ? 100 : uploadProgress;
|
||||
const uploadingLabel =
|
||||
isWaitingForCanvasSync
|
||||
const effectiveUploadProgress = isUploading
|
||||
? isWaitingForCanvasSync
|
||||
? 100
|
||||
: uploadProgress
|
||||
: 100;
|
||||
const uploadingLabel = isUploading
|
||||
? isWaitingForCanvasSync
|
||||
? "100% — wird synchronisiert…"
|
||||
: "Wird hochgeladen…";
|
||||
: "Wird hochgeladen…"
|
||||
: "Bild wird uebernommen…";
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -347,18 +510,18 @@ export default function ImageNode({
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="text-xs font-medium text-muted-foreground">🖼️ Bild</div>
|
||||
{data.url && (
|
||||
<button
|
||||
onClick={handleReplace}
|
||||
disabled={isUploading}
|
||||
className="nodrag text-xs text-muted-foreground transition-colors hover:text-foreground disabled:cursor-not-allowed disabled:opacity-60"
|
||||
>
|
||||
Ersetzen
|
||||
<button
|
||||
onClick={handleReplace}
|
||||
disabled={isNodeLoading}
|
||||
className="nodrag text-xs text-muted-foreground transition-colors hover:text-foreground disabled:cursor-not-allowed disabled:opacity-60"
|
||||
>
|
||||
Ersetzen
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="relative min-h-0 overflow-hidden rounded-lg bg-muted/30">
|
||||
{isUploading ? (
|
||||
{isNodeLoading ? (
|
||||
<div className="flex h-full w-full items-center justify-center bg-muted">
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<span className="text-xs text-muted-foreground">{uploadingLabel}</span>
|
||||
@@ -397,6 +560,21 @@ export default function ImageNode({
|
||||
<span className="mb-1 text-lg">📁</span>
|
||||
<span>Klicken oder hierhin ziehen</span>
|
||||
<span className="mt-0.5 text-xs">PNG, JPG, WebP</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={(event) => {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
if (!isNodeStable) {
|
||||
return;
|
||||
}
|
||||
setIsMediaLibraryOpen(true);
|
||||
}}
|
||||
disabled={isNodeLoading || !isNodeStable}
|
||||
className="nodrag mt-3 inline-flex items-center rounded-md border border-border bg-background px-2.5 py-1 text-xs font-medium text-foreground transition-colors hover:bg-accent disabled:cursor-not-allowed disabled:opacity-60"
|
||||
>
|
||||
{isNodeStable ? "Aus Mediathek" : "Mediathek wird vorbereitet..."}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@@ -410,7 +588,7 @@ export default function ImageNode({
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
accept="image/png,image/jpeg,image/webp"
|
||||
disabled={isUploading}
|
||||
disabled={isNodeLoading}
|
||||
onChange={handleFileChange}
|
||||
className="hidden"
|
||||
/>
|
||||
@@ -453,6 +631,13 @@ export default function ImageNode({
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
<MediaLibraryDialog
|
||||
open={isMediaLibraryOpen}
|
||||
onOpenChange={setIsMediaLibraryOpen}
|
||||
onPick={handlePickFromMediaLibrary}
|
||||
pickCtaLabel="Uebernehmen"
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user