feat: enhance canvas and layout components with new features and improvements
- Added remote image patterns to the Next.js configuration for enhanced image handling. - Updated TypeScript configuration to exclude the 'implement' directory. - Refactored layout component to fetch initial authentication token and pass it to Providers. - Replaced CanvasToolbar with CanvasSidebar for improved UI layout and functionality. - Enhanced Canvas component with new drag-and-drop file upload capabilities and batch node movement. - Updated various node components to support new status handling and improved user interactions. - Added debounced saving for note and prompt nodes to optimize performance.
This commit is contained in:
Matthias
@@ -1,66 +1,78 @@
|
||||
"use client";
|
||||
|
||||
import { Handle, Position, type Node, type NodeProps } from "@xyflow/react";
|
||||
|
||||
import { Handle, Position, type NodeProps, type Node } from "@xyflow/react";
|
||||
import BaseNodeWrapper from "./base-node-wrapper";
|
||||
|
||||
export type AiImageNodeData = {
|
||||
type AiImageNodeData = {
|
||||
url?: string;
|
||||
prompt?: string;
|
||||
model?: string;
|
||||
status?: "idle" | "executing" | "done" | "error";
|
||||
errorMessage?: string;
|
||||
_status?: string;
|
||||
_statusMessage?: string;
|
||||
};
|
||||
|
||||
export type AiImageNode = Node<AiImageNodeData, "ai-image">;
|
||||
|
||||
export default function AiImageNode({ data, selected }: NodeProps<AiImageNode>) {
|
||||
const status = data.status ?? "idle";
|
||||
export default function AiImageNode({
|
||||
data,
|
||||
selected,
|
||||
}: NodeProps<AiImageNode>) {
|
||||
const status = data._status ?? "idle";
|
||||
|
||||
return (
|
||||
<BaseNodeWrapper selected={selected} status={status} className="p-2">
|
||||
<div className="mb-1 text-xs font-medium text-emerald-500">KI-Bild</div>
|
||||
|
||||
{status === "executing" ? (
|
||||
<div className="flex h-36 w-56 items-center justify-center rounded-lg bg-muted">
|
||||
<div className="h-6 w-6 animate-spin rounded-full border-2 border-primary border-t-transparent" />
|
||||
<BaseNodeWrapper
|
||||
selected={selected}
|
||||
status={status}
|
||||
statusMessage={data._statusMessage}
|
||||
>
|
||||
<div className="p-2">
|
||||
<div className="text-xs font-medium text-emerald-500 mb-1">
|
||||
🤖 KI-Bild
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{status === "done" && data.url ? (
|
||||
<img
|
||||
src={data.url}
|
||||
alt={data.prompt ?? "KI-generiertes Bild"}
|
||||
className="max-w-[280px] rounded-lg object-cover"
|
||||
draggable={false}
|
||||
/>
|
||||
) : null}
|
||||
{status === "executing" && (
|
||||
<div className="flex h-36 w-56 items-center justify-center rounded-lg bg-muted">
|
||||
<div className="h-6 w-6 animate-spin rounded-full border-2 border-primary border-t-transparent" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{status === "error" ? (
|
||||
<div className="flex h-36 w-56 items-center justify-center rounded-lg bg-red-50 text-sm text-red-600 dark:bg-red-950/20">
|
||||
{data.errorMessage ?? "Fehler bei der Generierung"}
|
||||
</div>
|
||||
) : null}
|
||||
{status === "done" && data.url && (
|
||||
<img
|
||||
src={data.url}
|
||||
alt={data.prompt ?? "KI-generiertes Bild"}
|
||||
className="rounded-lg object-cover max-w-[260px]"
|
||||
draggable={false}
|
||||
/>
|
||||
)}
|
||||
|
||||
{status === "idle" ? (
|
||||
<div className="flex h-36 w-56 items-center justify-center rounded-lg border-2 border-dashed text-sm text-muted-foreground">
|
||||
Prompt verbinden
|
||||
</div>
|
||||
) : null}
|
||||
{status === "error" && (
|
||||
<div className="flex h-36 w-56 items-center justify-center rounded-lg bg-red-50 dark:bg-red-950/20 text-sm text-red-600">
|
||||
{data._statusMessage ?? "Fehler bei der Generierung"}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{data.prompt && status === "done" ? (
|
||||
<p className="mt-1 max-w-[280px] truncate text-xs text-muted-foreground">{data.prompt}</p>
|
||||
) : null}
|
||||
{status === "idle" && (
|
||||
<div className="flex h-36 w-56 items-center justify-center rounded-lg border-2 border-dashed text-sm text-muted-foreground">
|
||||
Prompt verbinden
|
||||
</div>
|
||||
)}
|
||||
|
||||
{data.prompt && status === "done" && (
|
||||
<p className="mt-1 text-xs text-muted-foreground truncate max-w-[260px]">
|
||||
{data.prompt}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Handle
|
||||
type="target"
|
||||
position={Position.Left}
|
||||
className="!h-3 !w-3 !border-2 !border-background !bg-emerald-500"
|
||||
className="!h-3 !w-3 !bg-emerald-500 !border-2 !border-background"
|
||||
/>
|
||||
<Handle
|
||||
type="source"
|
||||
position={Position.Right}
|
||||
className="!h-3 !w-3 !border-2 !border-background !bg-primary"
|
||||
className="!h-3 !w-3 !bg-primary !border-2 !border-background"
|
||||
/>
|
||||
</BaseNodeWrapper>
|
||||
);
|
||||
|
||||
@@ -4,34 +4,43 @@ import type { ReactNode } from "react";
|
||||
|
||||
interface BaseNodeWrapperProps {
|
||||
selected?: boolean;
|
||||
status?: "idle" | "executing" | "done" | "error";
|
||||
status?: string;
|
||||
statusMessage?: string;
|
||||
children: ReactNode;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const statusClassMap: Record<NonNullable<BaseNodeWrapperProps["status"]>, string> = {
|
||||
idle: "",
|
||||
executing: "animate-pulse border-yellow-400",
|
||||
done: "border-green-500",
|
||||
error: "border-red-500",
|
||||
};
|
||||
|
||||
export default function BaseNodeWrapper({
|
||||
selected,
|
||||
status = "idle",
|
||||
statusMessage,
|
||||
children,
|
||||
className = "",
|
||||
}: BaseNodeWrapperProps) {
|
||||
const statusStyles: Record<string, string> = {
|
||||
idle: "",
|
||||
analyzing: "border-yellow-400 animate-pulse",
|
||||
clarifying: "border-amber-400",
|
||||
executing: "border-yellow-400 animate-pulse",
|
||||
done: "border-green-500",
|
||||
error: "border-red-500",
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={[
|
||||
"rounded-xl border bg-card shadow-sm transition-shadow",
|
||||
selected ? "ring-2 ring-primary shadow-md" : "",
|
||||
statusClassMap[status],
|
||||
className,
|
||||
].join(" ")}
|
||||
className={`
|
||||
rounded-xl border bg-card shadow-sm transition-shadow
|
||||
${selected ? "ring-2 ring-primary shadow-md" : ""}
|
||||
${statusStyles[status] ?? ""}
|
||||
${className}
|
||||
`}
|
||||
>
|
||||
{children}
|
||||
{status === "error" && statusMessage && (
|
||||
<div className="px-3 pb-2 text-xs text-red-500 truncate">
|
||||
{statusMessage}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,33 +1,57 @@
|
||||
"use client";
|
||||
|
||||
import { Handle, Position, type Node, type NodeProps } from "@xyflow/react";
|
||||
|
||||
import { Handle, Position, type NodeProps, type Node } from "@xyflow/react";
|
||||
import Image from "next/image";
|
||||
import BaseNodeWrapper from "./base-node-wrapper";
|
||||
|
||||
export type CompareNodeData = {
|
||||
type CompareNodeData = {
|
||||
leftUrl?: string;
|
||||
rightUrl?: string;
|
||||
_status?: string;
|
||||
};
|
||||
|
||||
export type CompareNode = Node<CompareNodeData, "compare">;
|
||||
|
||||
export default function CompareNode({ data, selected }: NodeProps<CompareNode>) {
|
||||
export default function CompareNode({
|
||||
data,
|
||||
selected,
|
||||
}: NodeProps<CompareNode>) {
|
||||
return (
|
||||
<BaseNodeWrapper selected={selected} className="w-[500px] p-2">
|
||||
<div className="mb-1 text-xs font-medium text-muted-foreground">Vergleich</div>
|
||||
<div className="text-xs font-medium text-muted-foreground mb-1">
|
||||
🔀 Vergleich
|
||||
</div>
|
||||
<div className="flex h-40 gap-2">
|
||||
<div className="flex flex-1 items-center justify-center rounded bg-muted text-xs text-muted-foreground">
|
||||
<div className="relative flex min-h-0 flex-1 overflow-hidden rounded bg-muted">
|
||||
{data.leftUrl ? (
|
||||
<img src={data.leftUrl} alt="Bild A" className="h-full w-full rounded object-cover" />
|
||||
<Image
|
||||
src={data.leftUrl}
|
||||
alt="Vergleich Bild A"
|
||||
fill
|
||||
className="object-cover"
|
||||
sizes="250px"
|
||||
draggable={false}
|
||||
/>
|
||||
) : (
|
||||
"Bild A"
|
||||
<div className="flex h-full w-full items-center justify-center text-xs text-muted-foreground">
|
||||
Bild A
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex flex-1 items-center justify-center rounded bg-muted text-xs text-muted-foreground">
|
||||
<div className="relative flex min-h-0 flex-1 overflow-hidden rounded bg-muted">
|
||||
{data.rightUrl ? (
|
||||
<img src={data.rightUrl} alt="Bild B" className="h-full w-full rounded object-cover" />
|
||||
<Image
|
||||
src={data.rightUrl}
|
||||
alt="Vergleich Bild B"
|
||||
fill
|
||||
className="object-cover"
|
||||
sizes="250px"
|
||||
draggable={false}
|
||||
/>
|
||||
) : (
|
||||
"Bild B"
|
||||
<div className="flex h-full w-full items-center justify-center text-xs text-muted-foreground">
|
||||
Bild B
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
@@ -35,14 +59,14 @@ export default function CompareNode({ data, selected }: NodeProps<CompareNode>)
|
||||
type="target"
|
||||
position={Position.Left}
|
||||
id="left"
|
||||
className="!h-3 !w-3 !border-2 !border-background !bg-primary"
|
||||
className="h-3! w-3! bg-primary! border-2! border-background!"
|
||||
style={{ top: "40%" }}
|
||||
/>
|
||||
<Handle
|
||||
type="target"
|
||||
position={Position.Left}
|
||||
id="right"
|
||||
className="!h-3 !w-3 !border-2 !border-background !bg-primary"
|
||||
className="h-3! w-3! bg-primary! border-2! border-background!"
|
||||
style={{ top: "60%" }}
|
||||
/>
|
||||
</BaseNodeWrapper>
|
||||
|
||||
@@ -1,28 +1,72 @@
|
||||
"use client";
|
||||
|
||||
import { type Node, type NodeProps } from "@xyflow/react";
|
||||
|
||||
import { useState, useCallback } from "react";
|
||||
import { type NodeProps, type Node } from "@xyflow/react";
|
||||
import { useMutation } from "convex/react";
|
||||
import { api } from "@/convex/_generated/api";
|
||||
import type { Id } from "@/convex/_generated/dataModel";
|
||||
import BaseNodeWrapper from "./base-node-wrapper";
|
||||
|
||||
export type FrameNodeData = {
|
||||
type FrameNodeData = {
|
||||
label?: string;
|
||||
exportWidth?: number;
|
||||
exportHeight?: number;
|
||||
resolution?: string;
|
||||
_status?: string;
|
||||
_statusMessage?: string;
|
||||
};
|
||||
|
||||
export type FrameNode = Node<FrameNodeData, "frame">;
|
||||
|
||||
export default function FrameNode({ data, selected }: NodeProps<FrameNode>) {
|
||||
const resolution =
|
||||
data.exportWidth && data.exportHeight
|
||||
? `${data.exportWidth}x${data.exportHeight}`
|
||||
: undefined;
|
||||
export default function FrameNode({ id, data, selected }: NodeProps<FrameNode>) {
|
||||
const updateData = useMutation(api.nodes.updateData);
|
||||
const [editingLabel, setEditingLabel] = useState<string | null>(null);
|
||||
|
||||
const displayLabel = data.label ?? "Frame";
|
||||
const isEditing = editingLabel !== null;
|
||||
|
||||
const handleDoubleClick = useCallback(() => {
|
||||
setEditingLabel(displayLabel);
|
||||
}, [displayLabel]);
|
||||
|
||||
const handleBlur = useCallback(() => {
|
||||
if (editingLabel !== null && editingLabel !== data.label) {
|
||||
updateData({
|
||||
nodeId: id as Id<"nodes">,
|
||||
data: {
|
||||
...data,
|
||||
label: editingLabel,
|
||||
_status: undefined,
|
||||
_statusMessage: undefined,
|
||||
},
|
||||
});
|
||||
}
|
||||
setEditingLabel(null);
|
||||
}, [editingLabel, data, id, updateData]);
|
||||
|
||||
return (
|
||||
<BaseNodeWrapper selected={selected} className="min-h-[200px] min-w-[300px] border-blue-500/30 p-3">
|
||||
<div className="text-xs font-medium text-blue-500">
|
||||
{data.label || "Frame"} {resolution ? `(${resolution})` : ""}
|
||||
</div>
|
||||
<BaseNodeWrapper
|
||||
selected={selected}
|
||||
className="min-w-[300px] min-h-[200px] p-3 border-blue-500/30"
|
||||
>
|
||||
{isEditing ? (
|
||||
<input
|
||||
value={editingLabel}
|
||||
onChange={(e) => setEditingLabel(e.target.value)}
|
||||
onBlur={handleBlur}
|
||||
onKeyDown={(e) => e.key === "Enter" && handleBlur()}
|
||||
autoFocus
|
||||
className="nodrag text-xs font-medium text-blue-500 bg-transparent border-0 outline-none w-full"
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
onDoubleClick={handleDoubleClick}
|
||||
className="text-xs font-medium text-blue-500 cursor-text"
|
||||
>
|
||||
🖥️ {displayLabel}{" "}
|
||||
{data.resolution && (
|
||||
<span className="text-muted-foreground">({data.resolution})</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</BaseNodeWrapper>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,15 +1,68 @@
|
||||
"use client";
|
||||
|
||||
import { type Node, type NodeProps } from "@xyflow/react";
|
||||
|
||||
import { useState, useCallback, useEffect } from "react";
|
||||
import { type NodeProps, type Node } from "@xyflow/react";
|
||||
import { useMutation } from "convex/react";
|
||||
import { api } from "@/convex/_generated/api";
|
||||
import type { Id } from "@/convex/_generated/dataModel";
|
||||
import BaseNodeWrapper from "./base-node-wrapper";
|
||||
|
||||
export type GroupNode = Node<{ label?: string }, "group">;
|
||||
type GroupNodeData = {
|
||||
label?: string;
|
||||
_status?: string;
|
||||
_statusMessage?: string;
|
||||
};
|
||||
|
||||
export type GroupNode = Node<GroupNodeData, "group">;
|
||||
|
||||
export default function GroupNode({ id, data, selected }: NodeProps<GroupNode>) {
|
||||
const updateData = useMutation(api.nodes.updateData);
|
||||
const [label, setLabel] = useState(data.label ?? "Gruppe");
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isEditing) {
|
||||
setLabel(data.label ?? "Gruppe");
|
||||
}
|
||||
}, [data.label, isEditing]);
|
||||
|
||||
const handleBlur = useCallback(() => {
|
||||
setIsEditing(false);
|
||||
if (label !== data.label) {
|
||||
updateData({
|
||||
nodeId: id as Id<"nodes">,
|
||||
data: {
|
||||
...data,
|
||||
label,
|
||||
_status: undefined,
|
||||
_statusMessage: undefined,
|
||||
},
|
||||
});
|
||||
}
|
||||
}, [label, data, id, updateData]);
|
||||
|
||||
export default function GroupNode({ data, selected }: NodeProps<GroupNode>) {
|
||||
return (
|
||||
<BaseNodeWrapper selected={selected} className="min-h-[150px] min-w-[200px] border-dashed p-3">
|
||||
<div className="text-xs font-medium text-muted-foreground">{data.label || "Gruppe"}</div>
|
||||
<BaseNodeWrapper
|
||||
selected={selected}
|
||||
className="min-w-[200px] min-h-[150px] p-3 border-dashed"
|
||||
>
|
||||
{isEditing ? (
|
||||
<input
|
||||
value={label}
|
||||
onChange={(e) => setLabel(e.target.value)}
|
||||
onBlur={handleBlur}
|
||||
onKeyDown={(e) => e.key === "Enter" && handleBlur()}
|
||||
autoFocus
|
||||
className="nodrag text-xs font-medium text-muted-foreground bg-transparent border-0 outline-none w-full"
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
onDoubleClick={() => setIsEditing(true)}
|
||||
className="text-xs font-medium text-muted-foreground cursor-text"
|
||||
>
|
||||
📁 {label}
|
||||
</div>
|
||||
)}
|
||||
</BaseNodeWrapper>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,37 +1,194 @@
|
||||
"use client";
|
||||
|
||||
import { Handle, Position, type Node, type NodeProps } from "@xyflow/react";
|
||||
|
||||
import {
|
||||
useState,
|
||||
useCallback,
|
||||
useRef,
|
||||
type ChangeEvent,
|
||||
type DragEvent,
|
||||
} from "react";
|
||||
import { Handle, Position, type NodeProps, type Node } from "@xyflow/react";
|
||||
import { useMutation } from "convex/react";
|
||||
import { api } from "@/convex/_generated/api";
|
||||
import type { Id } from "@/convex/_generated/dataModel";
|
||||
import Image from "next/image";
|
||||
import BaseNodeWrapper from "./base-node-wrapper";
|
||||
|
||||
export type ImageNodeData = {
|
||||
type ImageNodeData = {
|
||||
storageId?: string;
|
||||
url?: string;
|
||||
originalFilename?: string;
|
||||
filename?: string;
|
||||
mimeType?: string;
|
||||
_status?: string;
|
||||
_statusMessage?: string;
|
||||
};
|
||||
|
||||
export type ImageNode = Node<ImageNodeData, "image">;
|
||||
|
||||
export default function ImageNode({ data, selected }: NodeProps<ImageNode>) {
|
||||
export default function ImageNode({ id, data, selected }: NodeProps<ImageNode>) {
|
||||
const generateUploadUrl = useMutation(api.storage.generateUploadUrl);
|
||||
const updateData = useMutation(api.nodes.updateData);
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
const [isUploading, setIsUploading] = useState(false);
|
||||
const [isDragOver, setIsDragOver] = useState(false);
|
||||
|
||||
const uploadFile = useCallback(
|
||||
async (file: File) => {
|
||||
if (!file.type.startsWith("image/")) return;
|
||||
setIsUploading(true);
|
||||
|
||||
try {
|
||||
const uploadUrl = await generateUploadUrl();
|
||||
const result = await fetch(uploadUrl, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": file.type },
|
||||
body: file,
|
||||
});
|
||||
|
||||
if (!result.ok) {
|
||||
throw new Error("Upload failed");
|
||||
}
|
||||
|
||||
const { storageId } = (await result.json()) as { storageId: string };
|
||||
|
||||
await updateData({
|
||||
nodeId: id as Id<"nodes">,
|
||||
data: {
|
||||
storageId,
|
||||
filename: file.name,
|
||||
mimeType: file.type,
|
||||
},
|
||||
});
|
||||
} catch (err) {
|
||||
console.error("Upload failed:", err);
|
||||
} finally {
|
||||
setIsUploading(false);
|
||||
}
|
||||
},
|
||||
[id, generateUploadUrl, updateData]
|
||||
);
|
||||
|
||||
const handleClick = useCallback(() => {
|
||||
if (!data.url && !isUploading) {
|
||||
fileInputRef.current?.click();
|
||||
}
|
||||
}, [data.url, isUploading]);
|
||||
|
||||
const handleFileChange = useCallback(
|
||||
(e: ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (file) uploadFile(file);
|
||||
},
|
||||
[uploadFile]
|
||||
);
|
||||
|
||||
const handleDragOver = useCallback((e: DragEvent) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
if (e.dataTransfer.types.includes("Files")) {
|
||||
setIsDragOver(true);
|
||||
e.dataTransfer.dropEffect = "copy";
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleDragLeave = useCallback((e: DragEvent) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
setIsDragOver(false);
|
||||
}, []);
|
||||
|
||||
const handleDrop = useCallback(
|
||||
(e: DragEvent) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
setIsDragOver(false);
|
||||
|
||||
const file = e.dataTransfer.files?.[0];
|
||||
if (file && file.type.startsWith("image/")) {
|
||||
uploadFile(file);
|
||||
}
|
||||
},
|
||||
[uploadFile]
|
||||
);
|
||||
|
||||
const handleReplace = useCallback(() => {
|
||||
fileInputRef.current?.click();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<BaseNodeWrapper selected={selected} className="p-2">
|
||||
<div className="mb-1 text-xs font-medium text-muted-foreground">Bild</div>
|
||||
{data.url ? (
|
||||
<img
|
||||
src={data.url}
|
||||
alt={data.originalFilename ?? "Bild"}
|
||||
className="max-w-[280px] rounded-lg object-cover"
|
||||
draggable={false}
|
||||
/>
|
||||
) : (
|
||||
<div className="flex h-36 w-56 items-center justify-center rounded-lg border-2 border-dashed text-sm text-muted-foreground">
|
||||
Bild hochladen oder URL einfuegen
|
||||
<BaseNodeWrapper selected={selected} status={data._status}>
|
||||
<div className="p-2">
|
||||
<div className="mb-1 flex items-center justify-between">
|
||||
<div className="text-xs font-medium text-muted-foreground">🖼️ Bild</div>
|
||||
{data.url && (
|
||||
<button
|
||||
onClick={handleReplace}
|
||||
className="nodrag text-xs text-muted-foreground transition-colors hover:text-foreground"
|
||||
>
|
||||
Ersetzen
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isUploading ? (
|
||||
<div className="flex h-36 w-56 items-center justify-center rounded-lg bg-muted">
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<div className="h-5 w-5 animate-spin rounded-full border-2 border-primary border-t-transparent" />
|
||||
<span className="text-xs text-muted-foreground">Wird hochgeladen...</span>
|
||||
</div>
|
||||
</div>
|
||||
) : data.url ? (
|
||||
<div className="relative h-36 w-56 overflow-hidden rounded-lg">
|
||||
<Image
|
||||
src={data.url}
|
||||
alt={data.filename ?? "Bild"}
|
||||
fill
|
||||
className="object-cover"
|
||||
sizes="224px"
|
||||
draggable={false}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
onClick={handleClick}
|
||||
onDragOver={handleDragOver}
|
||||
onDragLeave={handleDragLeave}
|
||||
onDrop={handleDrop}
|
||||
className={`
|
||||
nodrag flex h-36 w-56 cursor-pointer flex-col items-center justify-center
|
||||
rounded-lg border-2 border-dashed text-sm transition-colors
|
||||
${
|
||||
isDragOver
|
||||
? "border-primary bg-primary/5 text-primary"
|
||||
: "text-muted-foreground hover:border-primary/50 hover:text-foreground"
|
||||
}
|
||||
`}
|
||||
>
|
||||
<span className="mb-1 text-lg">📁</span>
|
||||
<span>Klicken oder hierhin ziehen</span>
|
||||
<span className="mt-0.5 text-xs">PNG, JPG, WebP</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{data.filename && data.url && (
|
||||
<p className="mt-1 max-w-[260px] truncate text-xs text-muted-foreground">
|
||||
{data.filename}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
accept="image/png,image/jpeg,image/webp"
|
||||
onChange={handleFileChange}
|
||||
className="hidden"
|
||||
/>
|
||||
|
||||
<Handle
|
||||
type="source"
|
||||
position={Position.Right}
|
||||
className="!h-3 !w-3 !border-2 !border-background !bg-primary"
|
||||
className="h-3! w-3! bg-primary! border-2! border-background!"
|
||||
/>
|
||||
</BaseNodeWrapper>
|
||||
);
|
||||
|
||||
@@ -1,20 +1,83 @@
|
||||
"use client";
|
||||
|
||||
import { type Node, type NodeProps } from "@xyflow/react";
|
||||
|
||||
import { useState, useCallback, useEffect } from "react";
|
||||
import { type NodeProps, type Node } from "@xyflow/react";
|
||||
import { useMutation } from "convex/react";
|
||||
import { api } from "@/convex/_generated/api";
|
||||
import type { Id } from "@/convex/_generated/dataModel";
|
||||
import { useDebouncedCallback } from "@/hooks/use-debounced-callback";
|
||||
import BaseNodeWrapper from "./base-node-wrapper";
|
||||
|
||||
export type NoteNodeData = {
|
||||
type NoteNodeData = {
|
||||
content?: string;
|
||||
_status?: string;
|
||||
_statusMessage?: string;
|
||||
};
|
||||
|
||||
export type NoteNode = Node<NoteNodeData, "note">;
|
||||
|
||||
export default function NoteNode({ data, selected }: NodeProps<NoteNode>) {
|
||||
export default function NoteNode({ id, data, selected }: NodeProps<NoteNode>) {
|
||||
const updateData = useMutation(api.nodes.updateData);
|
||||
const [content, setContent] = useState(data.content ?? "");
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isEditing) {
|
||||
setContent(data.content ?? "");
|
||||
}
|
||||
}, [data.content, isEditing]);
|
||||
|
||||
const saveContent = useDebouncedCallback(
|
||||
(newContent: string) => {
|
||||
updateData({
|
||||
nodeId: id as Id<"nodes">,
|
||||
data: {
|
||||
...data,
|
||||
content: newContent,
|
||||
_status: undefined,
|
||||
_statusMessage: undefined,
|
||||
},
|
||||
});
|
||||
},
|
||||
500,
|
||||
);
|
||||
|
||||
const handleChange = useCallback(
|
||||
(e: React.ChangeEvent<HTMLTextAreaElement>) => {
|
||||
const newContent = e.target.value;
|
||||
setContent(newContent);
|
||||
saveContent(newContent);
|
||||
},
|
||||
[saveContent],
|
||||
);
|
||||
|
||||
return (
|
||||
<BaseNodeWrapper selected={selected} className="w-52 p-3">
|
||||
<div className="mb-1 text-xs font-medium text-muted-foreground">Notiz</div>
|
||||
<p className="whitespace-pre-wrap text-sm">{data.content || "Leere Notiz"}</p>
|
||||
<div className="text-xs font-medium text-muted-foreground mb-1">
|
||||
📌 Notiz
|
||||
</div>
|
||||
{isEditing ? (
|
||||
<textarea
|
||||
value={content}
|
||||
onChange={handleChange}
|
||||
onBlur={() => setIsEditing(false)}
|
||||
autoFocus
|
||||
className="nodrag nowheel w-full resize-none rounded-md border-0 bg-transparent p-0 text-sm outline-none focus:ring-0 min-h-[2rem]"
|
||||
placeholder="Notiz eingeben…"
|
||||
rows={3}
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
onDoubleClick={() => setIsEditing(true)}
|
||||
className="min-h-[2rem] cursor-text text-sm whitespace-pre-wrap"
|
||||
>
|
||||
{content || (
|
||||
<span className="text-muted-foreground">
|
||||
Doppelklick zum Bearbeiten
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</BaseNodeWrapper>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,28 +1,103 @@
|
||||
"use client";
|
||||
|
||||
import { Handle, Position, type Node, type NodeProps } from "@xyflow/react";
|
||||
|
||||
import { useState, useCallback, useEffect } from "react";
|
||||
import { Handle, Position, type NodeProps, type Node } from "@xyflow/react";
|
||||
import { useMutation } from "convex/react";
|
||||
import { api } from "@/convex/_generated/api";
|
||||
import type { Id } from "@/convex/_generated/dataModel";
|
||||
import { useDebouncedCallback } from "@/hooks/use-debounced-callback";
|
||||
import BaseNodeWrapper from "./base-node-wrapper";
|
||||
|
||||
export type PromptNodeData = {
|
||||
content?: string;
|
||||
type PromptNodeData = {
|
||||
prompt?: string;
|
||||
model?: string;
|
||||
_status?: string;
|
||||
_statusMessage?: string;
|
||||
};
|
||||
|
||||
export type PromptNode = Node<PromptNodeData, "prompt">;
|
||||
|
||||
export default function PromptNode({ data, selected }: NodeProps<PromptNode>) {
|
||||
export default function PromptNode({
|
||||
id,
|
||||
data,
|
||||
selected,
|
||||
}: NodeProps<PromptNode>) {
|
||||
const updateData = useMutation(api.nodes.updateData);
|
||||
const [prompt, setPrompt] = useState(data.prompt ?? "");
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isEditing) {
|
||||
setPrompt(data.prompt ?? "");
|
||||
}
|
||||
}, [data.prompt, isEditing]);
|
||||
|
||||
const savePrompt = useDebouncedCallback(
|
||||
(newPrompt: string) => {
|
||||
updateData({
|
||||
nodeId: id as Id<"nodes">,
|
||||
data: {
|
||||
...data,
|
||||
prompt: newPrompt,
|
||||
_status: undefined,
|
||||
_statusMessage: undefined,
|
||||
},
|
||||
});
|
||||
},
|
||||
500,
|
||||
);
|
||||
|
||||
const handleChange = useCallback(
|
||||
(e: React.ChangeEvent<HTMLTextAreaElement>) => {
|
||||
const newPrompt = e.target.value;
|
||||
setPrompt(newPrompt);
|
||||
savePrompt(newPrompt);
|
||||
},
|
||||
[savePrompt],
|
||||
);
|
||||
|
||||
return (
|
||||
<BaseNodeWrapper selected={selected} className="w-72 border-purple-500/30 p-3">
|
||||
<div className="mb-1 text-xs font-medium text-purple-500">Prompt</div>
|
||||
<p className="min-h-[2rem] whitespace-pre-wrap text-sm">{data.content || "Prompt eingeben..."}</p>
|
||||
{data.model ? (
|
||||
<div className="mt-2 text-xs text-muted-foreground">Modell: {data.model}</div>
|
||||
) : null}
|
||||
<BaseNodeWrapper
|
||||
selected={selected}
|
||||
status={data._status}
|
||||
className="border-purple-500/30"
|
||||
>
|
||||
<div className="w-72 p-3">
|
||||
<div className="text-xs font-medium text-purple-500 mb-1">
|
||||
✨ Prompt
|
||||
</div>
|
||||
{isEditing ? (
|
||||
<textarea
|
||||
value={prompt}
|
||||
onChange={handleChange}
|
||||
onBlur={() => setIsEditing(false)}
|
||||
autoFocus
|
||||
className="nodrag nowheel w-full resize-none rounded-md border-0 bg-transparent p-0 text-sm outline-none focus:ring-0 min-h-[3rem]"
|
||||
placeholder="Prompt eingeben…"
|
||||
rows={4}
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
onDoubleClick={() => setIsEditing(true)}
|
||||
className="min-h-[2rem] cursor-text text-sm whitespace-pre-wrap"
|
||||
>
|
||||
{prompt || (
|
||||
<span className="text-muted-foreground">
|
||||
Doppelklick zum Bearbeiten
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{data.model && (
|
||||
<div className="mt-2 text-xs text-muted-foreground">
|
||||
Modell: {data.model}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<Handle
|
||||
type="source"
|
||||
position={Position.Right}
|
||||
className="!h-3 !w-3 !border-2 !border-background !bg-purple-500"
|
||||
className="!h-3 !w-3 !bg-purple-500 !border-2 !border-background"
|
||||
/>
|
||||
</BaseNodeWrapper>
|
||||
);
|
||||
|
||||
@@ -1,24 +1,91 @@
|
||||
"use client";
|
||||
|
||||
import { Handle, Position, type Node, type NodeProps } from "@xyflow/react";
|
||||
|
||||
import { useState, useCallback, useEffect } from "react";
|
||||
import { Handle, Position, type NodeProps, type Node } from "@xyflow/react";
|
||||
import { useMutation } from "convex/react";
|
||||
import { api } from "@/convex/_generated/api";
|
||||
import type { Id } from "@/convex/_generated/dataModel";
|
||||
import { useDebouncedCallback } from "@/hooks/use-debounced-callback";
|
||||
import BaseNodeWrapper from "./base-node-wrapper";
|
||||
|
||||
export type TextNodeData = {
|
||||
type TextNodeData = {
|
||||
content?: string;
|
||||
_status?: string;
|
||||
_statusMessage?: string;
|
||||
};
|
||||
|
||||
export type TextNode = Node<TextNodeData, "text">;
|
||||
|
||||
export default function TextNode({ data, selected }: NodeProps<TextNode>) {
|
||||
export default function TextNode({ id, data, selected }: NodeProps<TextNode>) {
|
||||
const updateData = useMutation(api.nodes.updateData);
|
||||
const [content, setContent] = useState(data.content ?? "");
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
|
||||
// Sync von außen (Convex-Update) wenn nicht gerade editiert wird
|
||||
useEffect(() => {
|
||||
if (!isEditing) {
|
||||
setContent(data.content ?? "");
|
||||
}
|
||||
}, [data.content, isEditing]);
|
||||
|
||||
// Debounced Save — 500ms nach letztem Tastendruck
|
||||
const saveContent = useDebouncedCallback(
|
||||
(newContent: string) => {
|
||||
updateData({
|
||||
nodeId: id as Id<"nodes">,
|
||||
data: {
|
||||
...data,
|
||||
content: newContent,
|
||||
_status: undefined,
|
||||
_statusMessage: undefined,
|
||||
},
|
||||
});
|
||||
},
|
||||
500,
|
||||
);
|
||||
|
||||
const handleChange = useCallback(
|
||||
(e: React.ChangeEvent<HTMLTextAreaElement>) => {
|
||||
const newContent = e.target.value;
|
||||
setContent(newContent);
|
||||
saveContent(newContent);
|
||||
},
|
||||
[saveContent],
|
||||
);
|
||||
|
||||
return (
|
||||
<BaseNodeWrapper selected={selected} className="w-64 p-3">
|
||||
<div className="mb-1 text-xs font-medium text-muted-foreground">Text</div>
|
||||
<p className="min-h-[2rem] whitespace-pre-wrap text-sm">{data.content || "Text eingeben..."}</p>
|
||||
<BaseNodeWrapper selected={selected} status={data._status}>
|
||||
<div className="w-64 p-3">
|
||||
<div className="text-xs font-medium text-muted-foreground mb-1">
|
||||
📝 Text
|
||||
</div>
|
||||
{isEditing ? (
|
||||
<textarea
|
||||
value={content}
|
||||
onChange={handleChange}
|
||||
onBlur={() => setIsEditing(false)}
|
||||
autoFocus
|
||||
className="nodrag nowheel w-full resize-none rounded-md border-0 bg-transparent p-0 text-sm outline-none focus:ring-0 min-h-[3rem]"
|
||||
placeholder="Text eingeben…"
|
||||
rows={3}
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
onDoubleClick={() => setIsEditing(true)}
|
||||
className="min-h-[2rem] cursor-text text-sm whitespace-pre-wrap"
|
||||
>
|
||||
{content || (
|
||||
<span className="text-muted-foreground">
|
||||
Doppelklick zum Bearbeiten
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<Handle
|
||||
type="source"
|
||||
position={Position.Right}
|
||||
className="!h-3 !w-3 !border-2 !border-background !bg-primary"
|
||||
className="!h-3 !w-3 !bg-primary !border-2 !border-background"
|
||||
/>
|
||||
</BaseNodeWrapper>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user