mirror of
https://github.com/basketikun/infinite-canvas.git
synced 2026-08-07 01:54:24 +08:00
HouYunFei
803 lines
38 KiB
TypeScript
803 lines
38 KiB
TypeScript
import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
|
import type { ReactNode } from "react";
|
|
import { ChevronRight, Group, Image as ImageIcon, Music2, Puzzle, RefreshCw, Star, Video } from "lucide-react";
|
|
|
|
import { canvasThemes } from "@/lib/canvas-theme";
|
|
import { formatBytes } from "@/lib/image-utils";
|
|
import { getNodeDefinition } from "@/lib/canvas/node-registry";
|
|
import { buildNodeContext } from "@/lib/canvas/plugin-node-context";
|
|
import { useThemeStore } from "@/stores/use-theme-store";
|
|
import { CanvasResourceMentionTextarea } from "./canvas-resource-mention-textarea";
|
|
import { CanvasNodeType, type CanvasNodeData, type CanvasNodeImage, type Position } from "@/types/canvas";
|
|
import type { CanvasNodeContext, CanvasPluginHost } from "@/types/canvas-plugin";
|
|
import type { CanvasResourceReference } from "@/lib/canvas/canvas-resource-references";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
type ResizeCorner = "top-left" | "top-right" | "bottom-left" | "bottom-right";
|
|
const selectionBlue = "#2f80ff";
|
|
|
|
type CanvasNodeProps = {
|
|
data: CanvasNodeData;
|
|
scale: number;
|
|
isSelected: boolean;
|
|
isRelated: boolean;
|
|
isFocusRelated: boolean;
|
|
isConnectionTarget: boolean;
|
|
isConnecting: boolean;
|
|
editRequestNonce?: number;
|
|
showPanel: boolean;
|
|
showImageInfo: boolean;
|
|
mentionReferences?: CanvasResourceReference[];
|
|
pluginHost?: CanvasPluginHost;
|
|
registryVersion?: number;
|
|
renderPanel?: (node: CanvasNodeData) => ReactNode;
|
|
renderNodeContent?: (node: CanvasNodeData) => ReactNode;
|
|
groupChildCount?: number;
|
|
isGroupDropTarget?: boolean;
|
|
batchExpanded?: boolean;
|
|
onMouseDown: (event: React.MouseEvent, nodeId: string) => void;
|
|
onSelectCapture?: (event: React.MouseEvent, nodeId: string) => void;
|
|
onHoverStart: (nodeId: string) => void;
|
|
onHoverEnd: (nodeId: string) => void;
|
|
onConnectStart: (event: React.MouseEvent, nodeId: string, handleType: "source" | "target") => void;
|
|
onResizeStart: (nodeId: string) => void;
|
|
onResize: (nodeId: string, width: number, height: number, position?: Position) => void;
|
|
onResizeEnd: (nodeId: string) => void;
|
|
onContentChange: (nodeId: string, content: string) => void;
|
|
onTitleChange: (nodeId: string, title: string) => void;
|
|
onToggleBatch?: (nodeId: string) => void;
|
|
onSetBatchPrimary?: (nodeId: string, imageId: string) => void;
|
|
onRetry?: (node: CanvasNodeData) => void;
|
|
onGenerateImage?: (node: CanvasNodeData) => void;
|
|
onViewImage?: (node: CanvasNodeData) => void;
|
|
onContextMenu: (event: React.MouseEvent, nodeId: string) => void;
|
|
};
|
|
|
|
type NodeContentRendererProps = {
|
|
node: CanvasNodeData;
|
|
theme: (typeof canvasThemes)[keyof typeof canvasThemes];
|
|
isEditingContent: boolean;
|
|
textareaRef: React.RefObject<HTMLTextAreaElement | null>;
|
|
isBatchRoot: boolean;
|
|
batchCount: number;
|
|
batchExpanded: boolean;
|
|
renderNodeContent?: (node: CanvasNodeData) => ReactNode;
|
|
pluginContext?: CanvasNodeContext | null;
|
|
onContentChange: (nodeId: string, content: string) => void;
|
|
onStopEditing: () => void;
|
|
mentionReferences: CanvasResourceReference[];
|
|
onRetry?: (node: CanvasNodeData) => void;
|
|
onGenerateImage?: (node: CanvasNodeData) => void;
|
|
onToggleBatch?: () => void;
|
|
onSetBatchPrimary?: (imageId: string) => void;
|
|
groupChildCount: number;
|
|
};
|
|
|
|
export const CanvasNode = React.memo(function CanvasNode({
|
|
data,
|
|
scale,
|
|
isSelected,
|
|
isRelated,
|
|
isFocusRelated,
|
|
isConnectionTarget,
|
|
isConnecting,
|
|
editRequestNonce = 0,
|
|
showPanel,
|
|
showImageInfo,
|
|
mentionReferences = [],
|
|
pluginHost,
|
|
renderPanel,
|
|
renderNodeContent,
|
|
groupChildCount = 0,
|
|
isGroupDropTarget = false,
|
|
batchExpanded = false,
|
|
onMouseDown,
|
|
onSelectCapture,
|
|
onHoverStart,
|
|
onHoverEnd,
|
|
onConnectStart,
|
|
onResizeStart,
|
|
onResize,
|
|
onResizeEnd,
|
|
onContentChange,
|
|
onTitleChange,
|
|
onToggleBatch,
|
|
onSetBatchPrimary,
|
|
onRetry,
|
|
onGenerateImage,
|
|
onViewImage,
|
|
onContextMenu,
|
|
}: CanvasNodeProps) {
|
|
const theme = canvasThemes[useThemeStore((state) => state.theme)];
|
|
const { t } = useTranslation();
|
|
const [hovered, setHovered] = useState(false);
|
|
const definition = getNodeDefinition(data.type);
|
|
const pluginContext = useMemo<CanvasNodeContext | null>(() => (pluginHost ? buildNodeContext(pluginHost, data, theme, scale, isSelected) : null), [pluginHost, data, theme, scale, isSelected]);
|
|
const [isEditingContent, setIsEditingContent] = useState(false);
|
|
const [isEditingTitle, setIsEditingTitle] = useState(false);
|
|
const [titleDraft, setTitleDraft] = useState(data.title || "");
|
|
const hasImageContent = data.type === CanvasNodeType.Image && Boolean(data.metadata?.content);
|
|
const hasVideoContent = data.type === CanvasNodeType.Video && Boolean(data.metadata?.content);
|
|
const hasAudioContent = data.type === CanvasNodeType.Audio && Boolean(data.metadata?.content);
|
|
const isGroup = data.type === CanvasNodeType.Group;
|
|
const batchCount = data.type === CanvasNodeType.Image ? data.metadata?.images?.length || 0 : 0;
|
|
const isBatchRoot = batchCount > 1;
|
|
// Nodes with the interaction/move toggle ignore content pointer events in move mode and allow interaction in interactive mode.
|
|
// forceInteractive states such as editing stay interactive, as do empty nodes so their upload and generation actions remain usable.
|
|
const supportsInteractionToggle = Boolean(definition?.interactionToggle);
|
|
const forceInteractive = supportsInteractionToggle ? Boolean(definition?.forceInteractive?.(data)) : false;
|
|
const contentInteractive = !supportsInteractionToggle || forceInteractive || !data.metadata?.content ? true : Boolean(data.metadata?.interactive);
|
|
// Transparent nodes such as SVGs blend into the canvas while retaining outlines for selected or related states.
|
|
const transparentBg = Boolean(definition?.transparentBackground);
|
|
const isActive = isConnectionTarget || isSelected || isFocusRelated;
|
|
const imageBorderColor = isActive ? selectionBlue : isRelated ? theme.node.muted : "transparent";
|
|
const textareaRef = useRef<HTMLTextAreaElement>(null);
|
|
const titleInputRef = useRef<HTMLInputElement>(null);
|
|
const resizeRef = useRef({
|
|
isResizing: false,
|
|
corner: "bottom-right" as ResizeCorner,
|
|
startX: 0,
|
|
startY: 0,
|
|
startLeft: 0,
|
|
startTop: 0,
|
|
startWidth: 0,
|
|
startHeight: 0,
|
|
keepRatio: false,
|
|
ratio: 1,
|
|
});
|
|
|
|
useEffect(() => {
|
|
setTitleDraft(data.title || "");
|
|
}, [data.title]);
|
|
|
|
useEffect(() => {
|
|
if (!isEditingTitle) return;
|
|
titleInputRef.current?.focus();
|
|
titleInputRef.current?.select();
|
|
}, [isEditingTitle]);
|
|
|
|
const finishTitleEditing = useCallback(() => {
|
|
const title = titleDraft.trim() || data.title || t("canvas.node.untitled");
|
|
setTitleDraft(title);
|
|
setIsEditingTitle(false);
|
|
if (title !== data.title) onTitleChange(data.id, title);
|
|
}, [data.id, data.title, onTitleChange, t, titleDraft]);
|
|
|
|
useEffect(() => {
|
|
if (!isEditingTitle) return;
|
|
const handleOutsidePointerDown = (event: PointerEvent) => {
|
|
const target = event.target;
|
|
if (target instanceof Node && titleInputRef.current?.contains(target)) return;
|
|
finishTitleEditing();
|
|
};
|
|
window.addEventListener("pointerdown", handleOutsidePointerDown, true);
|
|
return () => window.removeEventListener("pointerdown", handleOutsidePointerDown, true);
|
|
}, [finishTitleEditing, isEditingTitle]);
|
|
|
|
useEffect(() => {
|
|
const textarea = textareaRef.current;
|
|
if (!textarea) return;
|
|
|
|
const handleWheel = (event: WheelEvent) => event.stopPropagation();
|
|
textarea.addEventListener("wheel", handleWheel, { passive: false });
|
|
return () => textarea.removeEventListener("wheel", handleWheel);
|
|
}, [data.type, isEditingContent]);
|
|
|
|
useEffect(() => {
|
|
if (!isEditingContent) return;
|
|
const textarea = textareaRef.current;
|
|
textarea?.focus();
|
|
textarea?.setSelectionRange(textarea.value.length, textarea.value.length);
|
|
}, [isEditingContent]);
|
|
|
|
useEffect(() => {
|
|
if (!editRequestNonce || data.type !== CanvasNodeType.Text) return;
|
|
setIsEditingContent(true);
|
|
}, [data.type, editRequestNonce]);
|
|
|
|
useEffect(() => {
|
|
if (!isEditingContent) return;
|
|
|
|
const handleOutsidePointerDown = (event: PointerEvent) => {
|
|
const target = event.target;
|
|
if (!(target instanceof Node)) return;
|
|
if (isEditingContent && textareaRef.current?.contains(target)) return;
|
|
|
|
setIsEditingContent(false);
|
|
};
|
|
|
|
window.addEventListener("pointerdown", handleOutsidePointerDown, true);
|
|
return () => window.removeEventListener("pointerdown", handleOutsidePointerDown, true);
|
|
}, [isEditingContent]);
|
|
|
|
const handleResizeMove = useCallback(
|
|
(event: MouseEvent) => {
|
|
if (!resizeRef.current.isResizing) return;
|
|
|
|
const dx = (event.clientX - resizeRef.current.startX) / scale;
|
|
const dy = (event.clientY - resizeRef.current.startY) / scale;
|
|
const minWidth = 220;
|
|
const minHeight = 160;
|
|
const startRight = resizeRef.current.startLeft + resizeRef.current.startWidth;
|
|
const startBottom = resizeRef.current.startTop + resizeRef.current.startHeight;
|
|
const fromLeft = resizeRef.current.corner.includes("left");
|
|
const fromTop = resizeRef.current.corner.includes("top");
|
|
const rawWidth = Math.max(minWidth, resizeRef.current.startWidth + (fromLeft ? -dx : dx));
|
|
const rawHeight = Math.max(minHeight, resizeRef.current.startHeight + (fromTop ? -dy : dy));
|
|
let width = rawWidth;
|
|
let height = rawHeight;
|
|
if (resizeRef.current.keepRatio) {
|
|
const ratio = resizeRef.current.ratio;
|
|
if (Math.abs(dx) >= Math.abs(dy)) {
|
|
height = width / ratio;
|
|
} else {
|
|
width = height * ratio;
|
|
}
|
|
if (height < minHeight) {
|
|
height = minHeight;
|
|
width = height * ratio;
|
|
}
|
|
if (width < minWidth) {
|
|
width = minWidth;
|
|
height = width / ratio;
|
|
}
|
|
}
|
|
|
|
onResize(data.id, width, height, {
|
|
x: fromLeft ? startRight - width : resizeRef.current.startLeft,
|
|
y: fromTop ? startBottom - height : resizeRef.current.startTop,
|
|
});
|
|
},
|
|
[data.id, onResize, scale],
|
|
);
|
|
|
|
const handleResizeUp = useCallback(() => {
|
|
resizeRef.current.isResizing = false;
|
|
window.removeEventListener("mousemove", handleResizeMove);
|
|
window.removeEventListener("mouseup", handleResizeUp);
|
|
onResizeEnd(data.id);
|
|
}, [data.id, handleResizeMove, onResizeEnd]);
|
|
|
|
const handleResizeMouseDown = (event: React.MouseEvent, corner: ResizeCorner) => {
|
|
event.stopPropagation();
|
|
event.preventDefault();
|
|
onResizeStart(data.id);
|
|
resizeRef.current = {
|
|
isResizing: true,
|
|
corner,
|
|
startX: event.clientX,
|
|
startY: event.clientY,
|
|
startLeft: data.position.x,
|
|
startTop: data.position.y,
|
|
startWidth: data.width,
|
|
startHeight: data.height,
|
|
keepRatio: (data.type === CanvasNodeType.Image && !data.metadata?.freeResize) || data.type === CanvasNodeType.Video || Boolean(definition?.keepAspectRatio?.(data)),
|
|
ratio: (data.metadata?.naturalWidth || data.width) / (data.metadata?.naturalHeight || data.height || 1),
|
|
};
|
|
window.addEventListener("mousemove", handleResizeMove);
|
|
window.addEventListener("mouseup", handleResizeUp);
|
|
};
|
|
|
|
useEffect(() => {
|
|
return () => {
|
|
window.removeEventListener("mousemove", handleResizeMove);
|
|
window.removeEventListener("mouseup", handleResizeUp);
|
|
if (resizeRef.current.isResizing) onResizeEnd(data.id);
|
|
};
|
|
}, [data.id, handleResizeMove, handleResizeUp, onResizeEnd]);
|
|
|
|
return (
|
|
<div
|
|
data-node-id={data.id}
|
|
className={`node-element absolute flex select-none flex-col transition-shadow duration-200 ${isGroup ? "z-[5]" : isSelected ? "z-50" : "z-10"}`}
|
|
style={{
|
|
transform: `translate(${data.position.x}px, ${data.position.y}px)`,
|
|
width: data.width,
|
|
height: data.height,
|
|
transition: "box-shadow 200ms ease",
|
|
contain: "layout style",
|
|
}}
|
|
onMouseEnter={() => {
|
|
setHovered(true);
|
|
onHoverStart(data.id);
|
|
}}
|
|
onMouseLeave={() => {
|
|
setHovered(false);
|
|
onHoverEnd(data.id);
|
|
}}
|
|
onMouseDownCapture={(event) => onSelectCapture?.(event, data.id)}
|
|
onContextMenu={(event) => onContextMenu(event, data.id)}
|
|
>
|
|
{(isSelected || hovered || isEditingTitle) && (
|
|
<div className="absolute left-3 top-[-28px] z-[65] max-w-[calc(100%-24px)]" onMouseDown={(event) => event.stopPropagation()} onPointerDown={(event) => event.stopPropagation()}>
|
|
{isEditingTitle ? (
|
|
<input
|
|
ref={titleInputRef}
|
|
value={titleDraft}
|
|
maxLength={64}
|
|
className="h-6 max-w-full border-0 border-b border-dashed bg-transparent px-0 text-left text-xs font-medium outline-none"
|
|
style={{ borderColor: theme.node.muted, color: theme.node.text }}
|
|
onChange={(event) => setTitleDraft(event.target.value)}
|
|
onBlur={finishTitleEditing}
|
|
onKeyDown={(event) => {
|
|
if (event.key === "Enter") finishTitleEditing();
|
|
if (event.key === "Escape") {
|
|
setTitleDraft(data.title || "");
|
|
setIsEditingTitle(false);
|
|
}
|
|
}}
|
|
/>
|
|
) : (
|
|
<button
|
|
type="button"
|
|
className="block max-w-full truncate border-b border-dashed border-transparent px-0 py-0.5 text-left text-xs font-medium opacity-75 transition hover:border-current hover:opacity-100"
|
|
style={{ color: theme.node.text }}
|
|
title={t("canvas.node.renameHint")}
|
|
onDoubleClick={(event) => {
|
|
event.stopPropagation();
|
|
setIsEditingTitle(true);
|
|
}}
|
|
>
|
|
{data.title || t("canvas.node.untitled")}
|
|
</button>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
<div
|
|
className="relative h-full w-full overflow-visible rounded-3xl border-2"
|
|
style={{
|
|
background: isGroup ? `${theme.toolbar.panel}66` : hasImageContent || hasVideoContent || transparentBg ? "transparent" : theme.node.fill,
|
|
borderColor: isGroup ? (isGroupDropTarget || isActive ? selectionBlue : theme.node.stroke) : hasImageContent ? imageBorderColor : isActive ? selectionBlue : isRelated ? theme.node.muted : transparentBg ? "transparent" : theme.node.stroke,
|
|
borderStyle: isGroup ? "dashed" : "solid",
|
|
boxShadow: isGroupDropTarget ? `0 0 0 2px ${selectionBlue}66, inset 0 0 0 999px ${selectionBlue}10` : isActive ? `0 0 0 1px ${selectionBlue}55` : isRelated ? `0 0 0 1px ${theme.node.muted}55, 0 18px 48px rgba(0,0,0,.14)` : undefined,
|
|
}}
|
|
onMouseDown={(event) => onMouseDown(event, data.id)}
|
|
onDoubleClick={(event) => {
|
|
if (isBatchRoot) {
|
|
event.stopPropagation();
|
|
onToggleBatch?.(data.id);
|
|
return;
|
|
}
|
|
if (definition?.onDoubleClick && pluginContext) {
|
|
if (definition.onDoubleClick(pluginContext)) event.stopPropagation();
|
|
return;
|
|
}
|
|
if (data.type === CanvasNodeType.Image && hasImageContent) {
|
|
event.stopPropagation();
|
|
onViewImage?.(data);
|
|
return;
|
|
}
|
|
if (data.type !== CanvasNodeType.Text) return;
|
|
event.stopPropagation();
|
|
setIsEditingContent(true);
|
|
}}
|
|
>
|
|
<div
|
|
className={`relative flex h-full w-full items-center justify-center rounded-[inherit] ${isBatchRoot ? "overflow-visible" : "overflow-hidden"}`}
|
|
style={
|
|
{
|
|
background: isGroup ? "transparent" : hasImageContent || hasVideoContent || transparentBg ? "transparent" : theme.node.fill,
|
|
pointerEvents: contentInteractive ? undefined : "none",
|
|
} as React.CSSProperties
|
|
}
|
|
>
|
|
<NodeContent
|
|
node={data}
|
|
theme={theme}
|
|
isEditingContent={isEditingContent}
|
|
textareaRef={textareaRef}
|
|
isBatchRoot={isBatchRoot}
|
|
batchCount={batchCount}
|
|
batchExpanded={batchExpanded}
|
|
renderNodeContent={renderNodeContent}
|
|
pluginContext={pluginContext}
|
|
mentionReferences={mentionReferences}
|
|
onContentChange={onContentChange}
|
|
onStopEditing={() => setIsEditingContent(false)}
|
|
onRetry={onRetry}
|
|
onGenerateImage={onGenerateImage}
|
|
onToggleBatch={() => onToggleBatch?.(data.id)}
|
|
onSetBatchPrimary={(imageId) => onSetBatchPrimary?.(data.id, imageId)}
|
|
groupChildCount={groupChildCount}
|
|
/>
|
|
</div>
|
|
|
|
{showImageInfo && hasImageContent ? <ImageInfoBar node={data} /> : null}
|
|
|
|
{!isGroup && !hasImageContent && !hasVideoContent && !hasAudioContent ? <div className="pointer-events-none absolute inset-x-0 bottom-0 h-12" style={{ background: `linear-gradient(to top, ${theme.canvas.background}66, transparent)` }} /> : null}
|
|
|
|
<ResizeHandle corner="top-left" onMouseDown={handleResizeMouseDown} />
|
|
<ResizeHandle corner="top-right" onMouseDown={handleResizeMouseDown} />
|
|
<ResizeHandle corner="bottom-left" onMouseDown={handleResizeMouseDown} />
|
|
<ResizeHandle corner="bottom-right" onMouseDown={handleResizeMouseDown} />
|
|
</div>
|
|
|
|
{!isGroup ? <ConnectionHandleDot side="left" visible={hovered || isSelected || isConnecting} onMouseDown={(event) => onConnectStart(event, data.id, "target")} /> : null}
|
|
{!isGroup ? <ConnectionHandleDot side="right" visible={(definition?.hasSourceHandle ?? true) && data.type !== CanvasNodeType.Config && (hovered || isSelected || isConnecting)} onMouseDown={(event) => onConnectStart(event, data.id, "source")} /> : null}
|
|
|
|
{showPanel && !isGroup && renderPanel ? <div className="absolute left-1/2 top-full z-[70] w-[600px] -translate-x-1/2 pt-4">{renderPanel(data)}</div> : null}
|
|
</div>
|
|
);
|
|
});
|
|
|
|
function NodeContent(props: NodeContentRendererProps) {
|
|
if (props.node.type === CanvasNodeType.Config && props.renderNodeContent) return props.renderNodeContent(props.node);
|
|
if (props.isBatchRoot) return <ImageNodeContent {...props} />;
|
|
if (props.node.metadata?.status === "loading") return <LoadingContent theme={props.theme} />;
|
|
if (props.node.metadata?.status === "error") return <ErrorContent node={props.node} theme={props.theme} onRetry={props.onRetry} />;
|
|
|
|
const Renderer = nodeContentRenderers[props.node.type as CanvasNodeType];
|
|
if (Renderer) return <Renderer {...props} />;
|
|
|
|
// Render plugin nodes with their registered renderer, or show the missing-plugin placeholder.
|
|
const definition = getNodeDefinition(props.node.type);
|
|
if (definition?.Content && props.pluginContext) {
|
|
const PluginContent = definition.Content;
|
|
return <PluginContent ctx={props.pluginContext} />;
|
|
}
|
|
return <MissingPluginContent theme={props.theme} type={props.node.type} />;
|
|
}
|
|
|
|
const nodeContentRenderers = {
|
|
[CanvasNodeType.Text]: TextContent,
|
|
[CanvasNodeType.Image]: ImageNodeContent,
|
|
[CanvasNodeType.Config]: EmptyImageContent,
|
|
[CanvasNodeType.Video]: VideoNodeContent,
|
|
[CanvasNodeType.Audio]: AudioNodeContent,
|
|
[CanvasNodeType.Group]: GroupNodeContent,
|
|
} satisfies Record<CanvasNodeType, (props: NodeContentRendererProps) => ReactNode>;
|
|
|
|
function GroupNodeContent({ node, theme, groupChildCount }: NodeContentRendererProps) {
|
|
const { t } = useTranslation();
|
|
return (
|
|
<div className="pointer-events-none flex h-full w-full flex-col p-4">
|
|
<div className="flex items-center gap-2 text-sm font-semibold" style={{ color: theme.node.text }}>
|
|
<span className="grid size-8 place-items-center rounded-xl" style={{ background: theme.toolbar.activeBg, color: theme.node.muted }}>
|
|
<Group className="size-4" />
|
|
</span>
|
|
<span>{t("canvas.node.group")}</span>
|
|
<span className="ml-auto rounded-full px-2 py-1 text-[11px] font-medium" style={{ background: theme.node.fill, color: theme.node.muted }}>
|
|
{t("canvas.node.nodeCount", { count: groupChildCount })}
|
|
</span>
|
|
</div>
|
|
<div className="mt-3 flex-1 rounded-2xl border border-dashed" style={{ borderColor: theme.node.stroke, background: `${theme.node.fill}55` }} />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function LoadingContent({ theme }: Pick<NodeContentRendererProps, "theme">) {
|
|
const { t } = useTranslation();
|
|
return (
|
|
<div className="flex h-full w-full flex-col items-center justify-center gap-3" style={{ color: theme.node.activeStroke }}>
|
|
<div className="size-10 animate-spin rounded-full border-2" style={{ borderColor: theme.node.stroke, borderTopColor: theme.node.activeStroke }} />
|
|
<span className="text-[10px] tracking-[0.2em]">{t("canvas.node.generating")}</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function ErrorContent({ node, theme, onRetry }: Pick<NodeContentRendererProps, "node" | "theme" | "onRetry">) {
|
|
const { t } = useTranslation();
|
|
return (
|
|
<div className="flex max-w-[260px] flex-col items-center gap-3 px-5 text-center">
|
|
<div className="text-xs leading-5 text-red-300">{node.metadata?.errorDetails || t("canvas.node.failed")}</div>
|
|
<button
|
|
type="button"
|
|
className="inline-flex h-8 items-center gap-1.5 rounded-full border px-3 text-xs font-medium transition hover:scale-[1.02]"
|
|
style={{ background: theme.toolbar.panel, borderColor: theme.toolbar.border, color: theme.node.text }}
|
|
onClick={(event) => {
|
|
event.stopPropagation();
|
|
onRetry?.(node);
|
|
}}
|
|
onMouseDown={(event) => event.stopPropagation()}
|
|
>
|
|
<RefreshCw className="size-3.5" />
|
|
{t("canvas.node.retry")}
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function MissingPluginContent({ theme, type }: Pick<NodeContentRendererProps, "theme"> & { type: string }) {
|
|
const { t } = useTranslation();
|
|
return (
|
|
<div className="flex h-full w-full flex-col items-center justify-center gap-2 px-4 text-center" style={{ color: theme.node.placeholder }}>
|
|
<Puzzle className="size-7 opacity-40" />
|
|
<span className="text-sm">{t("canvas.node.missingPlugin")}</span>
|
|
<span className="text-[11px] opacity-70">{t("canvas.node.missingPluginDescription", { type })}</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function TextContent({ node, theme, isEditingContent, textareaRef, mentionReferences, onContentChange, onStopEditing, onGenerateImage }: NodeContentRendererProps) {
|
|
const { t } = useTranslation();
|
|
const fontSize = node.metadata?.fontSize || 14;
|
|
const textStyle = { fontSize: `${fontSize}px`, lineHeight: `${Math.round(fontSize * 1.65)}px`, color: theme.node.text, boxSizing: "border-box" } as React.CSSProperties;
|
|
|
|
return (
|
|
<div className="flex h-full w-full flex-col overflow-hidden pt-8">
|
|
<button
|
|
type="button"
|
|
className="absolute right-3 top-3 z-20 inline-flex h-8 items-center gap-1 rounded-full border px-2.5 text-xs font-medium opacity-85 backdrop-blur-md transition hover:scale-[1.02] hover:opacity-100"
|
|
style={{ background: `${theme.toolbar.panel}dd`, borderColor: theme.node.stroke, color: theme.node.text }}
|
|
onClick={(event) => {
|
|
event.stopPropagation();
|
|
onGenerateImage?.(node);
|
|
}}
|
|
onMouseDown={(event) => event.stopPropagation()}
|
|
onPointerDown={(event) => event.stopPropagation()}
|
|
title={t("canvas.node.generateImage")}
|
|
aria-label={t("canvas.node.generateImage")}
|
|
>
|
|
<ImageIcon className="size-3.5" />
|
|
{t("canvas.node.generate")}
|
|
</button>
|
|
{isEditingContent ? (
|
|
<CanvasResourceMentionTextarea
|
|
ref={textareaRef}
|
|
className="thin-scrollbar block h-full w-full resize-none overflow-y-auto whitespace-pre-wrap break-words border-none bg-transparent pl-4 pr-14 pt-0 pb-4 m-0 font-mono outline-none select-text appearance-none"
|
|
style={textStyle}
|
|
value={node.metadata?.content || ""}
|
|
references={mentionReferences}
|
|
highlightLabels={false}
|
|
onChange={(value) => onContentChange(node.id, value)}
|
|
onBlur={onStopEditing}
|
|
onKeyDown={(event) => {
|
|
if (event.key === "Escape") onStopEditing();
|
|
}}
|
|
onMouseDown={(event) => event.stopPropagation()}
|
|
onPointerDown={(event) => event.stopPropagation()}
|
|
onWheel={(event) => event.stopPropagation()}
|
|
/>
|
|
) : (
|
|
<div
|
|
className="thin-scrollbar block h-full w-full overflow-y-auto whitespace-pre-wrap break-words bg-transparent pl-4 pr-14 pt-0 pb-4 font-mono"
|
|
style={textStyle}
|
|
onWheel={(event) => event.stopPropagation()}
|
|
>
|
|
{node.metadata?.content || <span style={{ color: theme.node.placeholder }}>{t("canvas.node.editText")}</span>}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function ImageNodeContent(props: NodeContentRendererProps) {
|
|
if (!props.node.metadata?.content) return <EmptyImageContent {...props} />;
|
|
|
|
return (
|
|
<ImageContent
|
|
node={props.node}
|
|
batchExpanded={props.batchExpanded}
|
|
onToggleBatch={props.onToggleBatch}
|
|
onSetBatchPrimary={props.onSetBatchPrimary}
|
|
/>
|
|
);
|
|
}
|
|
|
|
function EmptyImageContent({ theme }: NodeContentRendererProps) {
|
|
const { t } = useTranslation();
|
|
return (
|
|
<div className="flex h-full w-full flex-col items-center justify-center gap-3" style={{ color: theme.node.placeholder }}>
|
|
<div className="flex size-14 items-center justify-center rounded-2xl" style={{ background: theme.toolbar.activeBg }}>
|
|
<ImageIcon className="size-6 opacity-30" />
|
|
</div>
|
|
<span className="text-[10px] tracking-[0.18em] opacity-50">{t("canvas.node.emptyImage")}</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function VideoNodeContent({ node, theme }: NodeContentRendererProps) {
|
|
const { t } = useTranslation();
|
|
if (!node.metadata?.content)
|
|
return (
|
|
<div className="flex h-full w-full flex-col items-center justify-center gap-3" style={{ color: theme.node.placeholder }}>
|
|
<Video className="size-7 opacity-35" />
|
|
<span className="text-sm">{t("canvas.node.emptyVideo")}</span>
|
|
</div>
|
|
);
|
|
return <video src={node.metadata.content} controls className="h-full w-full rounded-[18px] bg-black object-contain" data-canvas-no-zoom />;
|
|
}
|
|
|
|
function AudioNodeContent({ node, theme }: NodeContentRendererProps) {
|
|
const { t } = useTranslation();
|
|
if (!node.metadata?.content)
|
|
return (
|
|
<div className="flex h-full w-full flex-col items-center justify-center gap-2" style={{ color: theme.node.placeholder }}>
|
|
<Music2 className="size-7 opacity-35" />
|
|
<span className="text-sm">{t("canvas.node.emptyAudio")}</span>
|
|
</div>
|
|
);
|
|
return (
|
|
<div className="flex h-full w-full flex-col justify-center gap-3 px-4" style={{ background: theme.node.fill, color: theme.node.text }}>
|
|
<div className="flex min-w-0 items-center gap-2 text-sm opacity-70">
|
|
<Music2 className="size-4 shrink-0" />
|
|
<span className="truncate">{t("canvas.node.audio")}</span>
|
|
</div>
|
|
<audio src={node.metadata.content} controls className="w-full" data-canvas-no-zoom />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function ImageContent({
|
|
node,
|
|
batchExpanded,
|
|
onToggleBatch,
|
|
onSetBatchPrimary,
|
|
}: {
|
|
node: CanvasNodeData;
|
|
batchExpanded: boolean;
|
|
onToggleBatch?: () => void;
|
|
onSetBatchPrimary?: (imageId: string) => void;
|
|
}) {
|
|
const theme = canvasThemes[useThemeStore((state) => state.theme)];
|
|
const { t } = useTranslation();
|
|
const images = node.metadata?.images || [];
|
|
const batchCount = images.length;
|
|
const isBatchRoot = batchCount > 1;
|
|
const primaryImageId = node.metadata?.primaryImageId || images[0]?.id;
|
|
|
|
return (
|
|
<BatchFrame batchCount={batchCount} batchExpanded={batchExpanded} onToggleBatch={onToggleBatch}>
|
|
{batchExpanded
|
|
? images
|
|
.filter((image) => image.id !== primaryImageId)
|
|
.map((image, index) => <ExpandedImageCard key={image.id} node={node} image={image} index={index} onSetPrimary={() => onSetBatchPrimary?.(image.id)} />)
|
|
: null}
|
|
<div className="h-full w-full overflow-hidden rounded-3xl">
|
|
<img
|
|
src={node.metadata!.content!}
|
|
alt={node.title}
|
|
draggable={false}
|
|
onDragStart={(event) => event.preventDefault()}
|
|
className={`pointer-events-none block h-full w-full select-none ${node.metadata?.freeResize ? "object-fill" : "object-contain"}`}
|
|
/>
|
|
</div>
|
|
{isBatchRoot ? (
|
|
<button
|
|
type="button"
|
|
className="absolute right-2.5 top-2.5 z-30 flex h-8 items-center justify-center gap-1.5 rounded-full border px-3 text-xs font-semibold shadow-[0_6px_18px_rgba(28,25,23,.16)] backdrop-blur-md transition hover:scale-[1.02]"
|
|
style={{ background: theme.toolbar.panel, borderColor: theme.toolbar.border, color: theme.toolbar.activeText }}
|
|
aria-label={batchExpanded ? t("canvas.node.batchExpanded") : t("canvas.node.batchCollapsed")}
|
|
onClick={(event) => {
|
|
event.stopPropagation();
|
|
onToggleBatch?.();
|
|
}}
|
|
onMouseDown={(event) => event.stopPropagation()}
|
|
onPointerDown={(event) => event.stopPropagation()}
|
|
>
|
|
<span className="leading-none">{t("canvas.controls.images", { count: batchCount })}</span>
|
|
<ChevronRight className={`size-3.5 opacity-80 transition-transform ${batchExpanded ? "rotate-90" : ""}`} />
|
|
</button>
|
|
) : null}
|
|
</BatchFrame>
|
|
);
|
|
}
|
|
|
|
function ExpandedImageCard({ node, image, index, onSetPrimary }: { node: CanvasNodeData; image: CanvasNodeImage; index: number; onSetPrimary: () => void }) {
|
|
const theme = canvasThemes[useThemeStore((state) => state.theme)];
|
|
const { t } = useTranslation();
|
|
const count = node.metadata?.images?.length || 0;
|
|
const rows = Math.ceil(count / 2);
|
|
const rootSlot = (rows - 1) * 2;
|
|
const slot = index >= rootSlot ? index + 1 : index;
|
|
const column = slot % 2;
|
|
const row = Math.floor(slot / 2);
|
|
const x = column * (node.width + 18);
|
|
const y = (row - rows + 1) * (node.height + 18);
|
|
|
|
return (
|
|
<div
|
|
className="absolute z-20 overflow-hidden rounded-3xl border shadow-[0_18px_50px_rgba(28,25,23,.18)]"
|
|
style={
|
|
{
|
|
left: x,
|
|
top: y,
|
|
width: node.width,
|
|
height: node.height,
|
|
background: theme.node.panel,
|
|
borderColor: theme.node.stroke,
|
|
"--batch-from-x": `${-x}px`,
|
|
"--batch-from-y": `${-y}px`,
|
|
"--batch-from-rotate": `${4 + index * 2}deg`,
|
|
animation: `canvas-batch-child-in 320ms ${index * 35}ms cubic-bezier(.2,.85,.18,1) both`,
|
|
} as React.CSSProperties
|
|
}
|
|
onMouseDown={(event) => event.stopPropagation()}
|
|
onPointerDown={(event) => event.stopPropagation()}
|
|
onDoubleClick={(event) => event.stopPropagation()}
|
|
>
|
|
<img src={image.content} alt={node.title} draggable={false} className="pointer-events-none h-full w-full select-none object-contain" />
|
|
<button
|
|
type="button"
|
|
className="absolute right-3 top-3 flex h-9 items-center gap-1.5 rounded-xl border border-white/20 bg-black/70 px-2.5 text-xs font-medium text-white shadow-[0_8px_20px_rgba(15,23,42,.24)] backdrop-blur-md transition hover:scale-[1.02] hover:bg-black/80"
|
|
style={{ color: "#fff" }}
|
|
onClick={(event) => {
|
|
event.stopPropagation();
|
|
onSetPrimary();
|
|
}}
|
|
>
|
|
<Star className="size-3.5 text-[#2f80ff]" />
|
|
{t("canvas.node.setPrimary")}
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function ImageInfoBar({ node }: { node: CanvasNodeData }) {
|
|
const width = Math.round(node.metadata?.naturalWidth || node.width);
|
|
const height = Math.round(node.metadata?.naturalHeight || node.height);
|
|
const size = formatBytes(node.metadata?.bytes || 0);
|
|
return (
|
|
<div className="pointer-events-none absolute bottom-3 right-3 z-40 max-w-[calc(100%-24px)]">
|
|
<span className="max-w-full truncate rounded-md bg-black/55 px-2 py-1 text-[11px] font-medium leading-none text-white backdrop-blur-sm">
|
|
{width} x {height}
|
|
{size ? ` · ${size}` : ""}
|
|
</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function BatchFrame({ batchCount, batchExpanded, onToggleBatch, children }: { batchCount: number; batchExpanded: boolean; onToggleBatch?: () => void; children: ReactNode }) {
|
|
const theme = canvasThemes[useThemeStore((state) => state.theme)];
|
|
const isBatchRoot = batchCount > 1;
|
|
return (
|
|
<div
|
|
className="group/batch relative h-full w-full overflow-visible"
|
|
onDoubleClick={
|
|
isBatchRoot
|
|
? (event) => {
|
|
event.stopPropagation();
|
|
onToggleBatch?.();
|
|
}
|
|
: undefined
|
|
}
|
|
>
|
|
{isBatchRoot ? (
|
|
<div className="pointer-events-none absolute inset-0 overflow-visible">
|
|
{Array.from({ length: Math.min(batchCount - 1, 5) }).map((_, index) => (
|
|
<div
|
|
key={index}
|
|
className="absolute rounded-[inherit] border shadow-[0_14px_34px_rgba(68,64,60,.16)] transition-all duration-300 group-hover/batch:translate-x-2"
|
|
style={{
|
|
inset: 0,
|
|
background: `linear-gradient(135deg, ${theme.node.panel}, ${theme.node.fill})`,
|
|
borderColor: theme.node.stroke,
|
|
opacity: batchExpanded ? 0 : 1,
|
|
transform: `translate(${30 + index * 14}px, ${12 + index * 8}px) rotate(${5 + index * 3}deg)`,
|
|
zIndex: -index - 1,
|
|
}}
|
|
/>
|
|
))}
|
|
</div>
|
|
) : null}
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|
|
function ResizeHandle({ corner, onMouseDown }: { corner: ResizeCorner; onMouseDown: (event: React.MouseEvent, corner: ResizeCorner) => void }) {
|
|
const positionClass = {
|
|
"top-left": "-left-[14px] -top-[14px] cursor-nwse-resize",
|
|
"top-right": "-right-[14px] -top-[14px] cursor-nesw-resize",
|
|
"bottom-left": "-bottom-[14px] -left-[14px] cursor-nesw-resize",
|
|
"bottom-right": "-bottom-[14px] -right-[14px] cursor-nwse-resize",
|
|
}[corner];
|
|
|
|
return <div className={`absolute z-50 size-7 ${positionClass}`} onMouseDown={(event) => onMouseDown(event, corner)} />;
|
|
}
|
|
|
|
function ConnectionHandleDot({ side, visible, onMouseDown }: { side: "left" | "right"; visible: boolean; onMouseDown: (event: React.MouseEvent) => void }) {
|
|
const theme = canvasThemes[useThemeStore((state) => state.theme)];
|
|
|
|
return (
|
|
<div
|
|
className={`absolute top-1/2 z-30 flex size-12 -translate-y-1/2 cursor-crosshair items-center justify-center transition-opacity duration-150 ${
|
|
side === "left" ? "-left-6" : "-right-6"
|
|
} ${visible ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-0"}`}
|
|
onMouseDown={onMouseDown}
|
|
>
|
|
<div className="size-3 rounded-full border-2 transition-all hover:scale-125" style={{ background: theme.node.panel, borderColor: theme.node.muted }} />
|
|
</div>
|
|
);
|
|
}
|