"use client"; import { AlertCircle, Blend, Box, Camera, CircleDot, Check, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Crosshair, Crop, Download, Eraser, Expand, FlipHorizontal2, FlipVertical2, Globe2, ImagePlus, Layers, Loader2, Link2, Maximize2, MessageSquarePlus, MoreHorizontal, MoreVertical, Pencil, RefreshCw, RotateCcw, Scan, Scissors, SlidersHorizontal, Sparkles, StickyNote, Trash2, Type, Unlink2, X, } from "lucide-react"; import type React from "react"; import { useParams, useRouter } from "next/navigation"; import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from "react"; import { createPortal } from "react-dom"; import { toast } from "sonner"; import useSWR from "swr"; import { AgentExecutionSnapshotDialog } from "@/components/agents/AgentExecutionSnapshotDialog"; import { DetailSurfaceOverlayRenderer } from "@/components/canvas/DetailSurfaceOverlayRenderer"; import { DetailUiDomRenderer } from "@/components/canvas/DetailUiDomRenderer"; import { CanvasToolbarIcon } from "@/components/canvas/CanvasToolbarIcon"; import { ImageAnnotator } from "@/components/image-annotator"; import { SceneFusionDialog } from "@/components/scene-fusion-dialog"; import { Button } from "@/components/ui/button"; import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, } from "@/components/ui/dialog"; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select"; import { Slider } from "@/components/ui/slider"; import { Textarea } from "@/components/ui/textarea"; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "@/components/ui/tooltip"; import { fetchUploadWithRetry } from "@/lib/client/upload-with-retry"; import type { DetailUiDslV2Document } from "@/lib/detail-ui-dsl-v2"; import { buildDetailUiDslV2 } from "@/lib/detail-ui-dsl-v2-builder"; import { type DetailUiSubjectAnalysis, normalizeDetailUiSubjectAnalysis, } from "@/lib/detail-ui-subject-analysis"; import type { DetailUiScreenOverlaySnapshot } from "@/lib/detail-ui-surface-adapter"; import { buildImageProxyUrl } from "@/lib/image-delivery"; import { inferOriginalImageUrl } from "@/lib/image-url"; import { DEFAULT_PUBLIC_THREED_MODEL_ALIAS_CONFIG, getDefaultThreeDModelAliasId, type PublicThreeDModelAliasConfig, } from "@/lib/model3d/model-alias-config"; import { isArchivedWorldLabsAssetUrl, pickBestArchivedWorldLabsSplatUrl, } from "@/lib/worldlabs/splat-utils"; import { getNodeContentScale, getScaledNodeContentStyle, } from "@/lib/canvas/node-content-scale"; import { getCanvasToolbarItem, isCanvasToolbarItemEnabled, type CanvasToolbarConfig, } from "@/lib/canvas-toolbar-config"; import { cn, fetcher } from "@/lib/utils"; import type { CanvasTextEditPayloadItem, NormalizedCropRect, } from "@/services/canvas"; import { canvasService, imageGenerationService, model3DGenerationService, worldLabsGenerationService, } from "@/services/canvas"; import type { PickedObject } from "@/store/canvas"; import { useCanvasStore } from "@/store/canvas"; import type { CanvasNode, ImageNodeData, ImageTextEditItem, } from "@/types/canvas"; // 已标注的物品标记（本地状态） interface PickedMarker { clickX: number; clickY: number; objectName: string; index: number; } interface ImageDisplayMetrics { offsetX: number; offsetY: number; renderedWidth: number; renderedHeight: number; naturalWidth: number; naturalHeight: number; } interface LayerSplitBounds { x: number; y: number; width: number; height: number; originalWidth: number; originalHeight: number; coverage: number; } type AngleEditPanelMode = "subject" | "camera"; type FlipRotateEditAction = "horizontal" | "vertical" | "reset"; type ImageAdjustPanelTab = "light" | "color" | "detail" | "effects"; type CropPanelGroupKey = | "common" | "instagram" | "facebook" | "tiktok" | "youtube"; type CropInteractionHandle = | "move" | "n" | "s" | "e" | "w" | "nw" | "ne" | "sw" | "se"; type ImageAdjustmentState = { light: number; exposure: number; contrast: number; highlights: number; shadows: number; whites: number; blacks: number; vibrance: number; saturation: number; temperature: number; tint: number; sharpen: number; clarity: number; grain: number; vignette: number; softLight: number; glow: number; }; type ImageAdjustmentKey = keyof ImageAdjustmentState; type CropPresetOption = { id: string; label: string; ratio: number; }; type CropPresetGroup = { key: CropPanelGroupKey; label: string; options: CropPresetOption[]; }; type CropInteractionState = { handle: CropInteractionHandle; pointerId: number; startPoint: BoxCutoutPoint; startRect: NormalizedCropRect; }; type AnglePreviewDragState = { pointerId: number; startX: number; startY: number; startHorizontalAngle: number; startVerticalAngle: number; }; interface BoxCutoutPoint { x: number; y: number; } const BOX_CUTOUT_DEFAULT_PADDING_RATIO = 0.08; const BOX_CUTOUT_MIN_EDGE_PX = 24; const FLOATING_TOOLBAR_SCALE = 0.8; const IMAGE_EDIT_PANEL_SCALE = 0.5; const ANGLE_PANEL_SCALE = 0.65; const ANGLE_PREVIEW_HORIZONTAL_DRAG_MULTIPLIER = 0.72; const ANGLE_PREVIEW_VERTICAL_DRAG_MULTIPLIER = 0.46; const ANGLE_PANEL_SOURCE_WIDTH = 520; const ANGLE_PANEL_SOURCE_HEIGHT = 700; const ANGLE_PANEL_PREVIEW_SIZE = 392; const ANGLE_PANEL_CAMERA_SCENE_SIZE = 384; const ANGLE_PANEL_WIREFRAME_RADIUS = 132; const ANGLE_PANEL_WIREFRAME_DIAMETER = ANGLE_PANEL_WIREFRAME_RADIUS * 2; const ANGLE_PREVIEW_VERTICAL_RING_ROTATIONS = [ 0, 15, 30, 45, 60, 75, 90, 105, 120, 135, 150, 165, ]; const ANGLE_PREVIEW_HORIZONTAL_RING_ROTATIONS = [ -78, -56, -34, -14, 0, 14, 34, 56, 78, ]; const ANGLE_PREVIEW_DIAGONAL_RING_ROTATIONS = [-62, -40, -18, 8, 34, 58]; const DEFAULT_CROP_PRESET_ID = "1:1"; const IMAGE_ADJUST_NOISE_DATA_URI = `data:image/svg+xml;utf8,${encodeURIComponent( "" )}`; const DEFAULT_IMAGE_ADJUSTMENTS: ImageAdjustmentState = { light: 0, exposure: 0, contrast: 0, highlights: 0, shadows: 0, whites: 0, blacks: 0, vibrance: 0, saturation: 0, temperature: 0, tint: 0, sharpen: 0, clarity: 0, grain: 0, vignette: 0, softLight: 0, glow: 0, }; const IMAGE_ADJUSTMENT_KEYS = Object.keys( DEFAULT_IMAGE_ADJUSTMENTS ) as ImageAdjustmentKey[]; const CROP_PRESET_GROUPS: CropPresetGroup[] = [ { key: "common", label: "通用", options: [ { id: "1:1", label: "1:1", ratio: 1 }, { id: "3:4", label: "3:4", ratio: 3 / 4 }, { id: "2:3", label: "2:3", ratio: 2 / 3 }, { id: "9:16", label: "9:16", ratio: 9 / 16 }, { id: "4:3", label: "4:3", ratio: 4 / 3 }, { id: "3:2", label: "3:2", ratio: 3 / 2 }, { id: "16:9", label: "16:9", ratio: 16 / 9 }, ], }, { key: "instagram", label: "Instagram", options: [ { id: "ig-square", label: "1:1", ratio: 1 }, { id: "ig-portrait", label: "4:5", ratio: 4 / 5 }, { id: "ig-story", label: "9:16", ratio: 9 / 16 }, ], }, { key: "facebook", label: "Facebook", options: [ { id: "fb-feed", label: "4:5", ratio: 4 / 5 }, { id: "fb-cover", label: "16:9", ratio: 16 / 9 }, ], }, { key: "tiktok", label: "TikTok", options: [{ id: "tt-video", label: "9:16", ratio: 9 / 16 }], }, { key: "youtube", label: "YouTube", options: [ { id: "yt-cover", label: "16:9", ratio: 16 / 9 }, { id: "yt-short", label: "9:16", ratio: 9 / 16 }, ], }, ]; function normalizeImageAdjustments(value: unknown): ImageAdjustmentState { const raw = value && typeof value === "object" && !Array.isArray(value) ? (value as Partial>) : {}; return { light: clampNumber(Number(raw.light ?? 0), -100, 100), exposure: clampNumber(Number(raw.exposure ?? 0), -100, 100), contrast: clampNumber(Number(raw.contrast ?? 0), -100, 100), highlights: clampNumber(Number(raw.highlights ?? 0), -100, 100), shadows: clampNumber(Number(raw.shadows ?? 0), -100, 100), whites: clampNumber(Number(raw.whites ?? 0), -100, 100), blacks: clampNumber(Number(raw.blacks ?? 0), -100, 100), vibrance: clampNumber(Number(raw.vibrance ?? 0), -100, 100), saturation: clampNumber(Number(raw.saturation ?? 0), -100, 100), temperature: clampNumber(Number(raw.temperature ?? 0), -100, 100), tint: clampNumber(Number(raw.tint ?? 0), -100, 100), sharpen: clampNumber(Number(raw.sharpen ?? 0), 0, 100), clarity: clampNumber(Number(raw.clarity ?? 0), 0, 100), grain: clampNumber(Number(raw.grain ?? 0), 0, 100), vignette: clampNumber(Number(raw.vignette ?? 0), 0, 100), softLight: clampNumber(Number(raw.softLight ?? 0), 0, 100), glow: clampNumber(Number(raw.glow ?? 0), 0, 100), }; } function areImageAdjustmentsEqual( left: ImageAdjustmentState, right: ImageAdjustmentState ) { return IMAGE_ADJUSTMENT_KEYS.every((key) => left[key] === right[key]); } function isDefaultImageAdjustments(value: ImageAdjustmentState) { return areImageAdjustmentsEqual(value, DEFAULT_IMAGE_ADJUSTMENTS); } function buildImageAdjustmentFilterStyle( adjustments: ImageAdjustmentState ): React.CSSProperties { const brightnessLift = adjustments.light * 0.34 + adjustments.exposure * 0.52 + adjustments.shadows * 0.2 + adjustments.whites * 0.12 - adjustments.blacks * 0.16 - adjustments.highlights * 0.06; const brightness = clampNumber(1 + brightnessLift / 100, 0.35, 2.2); const contrastBoost = adjustments.contrast * 0.78 + adjustments.clarity * 0.18 + adjustments.sharpen * 0.1 + adjustments.highlights * 0.06 - adjustments.shadows * 0.04; const contrast = clampNumber(1 + contrastBoost / 100, 0.45, 2.1); const saturationBoost = adjustments.saturation * 0.9 + adjustments.vibrance * 0.55 + adjustments.sharpen * 0.04; const saturate = clampNumber(1 + saturationBoost / 100, 0.1, 2.4); const hueRotate = clampNumber(adjustments.tint * 0.35, -36, 36); const sepia = clampNumber( adjustments.temperature > 0 ? adjustments.temperature * 0.18 : 0, 0, 22 ); return { filter: [ `brightness(${brightness.toFixed(3)})`, `contrast(${contrast.toFixed(3)})`, `saturate(${saturate.toFixed(3)})`, `hue-rotate(${hueRotate.toFixed(1)}deg)`, `sepia(${sepia.toFixed(1)}%)`, ].join(" "), willChange: "filter", }; } function ImageAdjustPanelSlider({ disabled = false, label, max, min, onChange, trackClassName = "h-[4px] bg-[#e5e5e5]", value, }: { disabled?: boolean; label: string; max: number; min: number; onChange: (value: number) => void; trackClassName?: string; value: number; }) { return (
{label} {Math.round(value)}
onChange(nextValue ?? value)} rangeClassName="bg-transparent" thumbClassName="h-5 w-5 border-[5px] border-[#2d2f33] bg-white shadow-[0_1px_3px_rgba(0,0,0,0.18)]" trackClassName={trackClassName} value={[value]} />
); } const normalizeAnglePanelHorizontalAngle = (value: number) => { if (!Number.isFinite(value)) return 0; return value < 0 ? 360 + value : value; }; const mapAnglePanelZoomToApi = (value: number) => { const safeValue = Math.max( 0, Math.min(100, Number.isFinite(value) ? value : 50) ); return Number((1 + (safeValue / 100) * 8).toFixed(1)); }; const formatAnglePanelZoomLabel = (value: number) => { if (value <= 32) return "远景"; if (value >= 68) return "近景"; return "中等"; }; function AngleEditPanelSlider({ label, max, min, onChange, step = 1, value, valueLabel, }: { label: string; max: number; min: number; onChange: (value: number) => void; step?: number; value: number; valueLabel: string; }) { return (
{label} {valueLabel}
onChange(nextValue ?? value)} rangeClassName="bg-[#2d3035]" step={step} thumbClassName="h-5 w-5 border-[4px] border-[#2d3035] bg-white shadow-[0_2px_10px_rgba(24,24,27,0.14)]" trackClassName="h-[4px] bg-[#e7e8ec]" value={[value]} />
); } function AngleCameraModelGlyph() { return (
); } const clampNumber = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value)); const fitSizeWithinBox = ({ maxHeight, maxWidth, minHeight = 72, minWidth = 72, sourceHeight, sourceWidth, }: { maxHeight: number; maxWidth: number; minHeight?: number; minWidth?: number; sourceHeight: number; sourceWidth: number; }) => { const safeSourceWidth = sourceWidth > 0 ? sourceWidth : maxWidth; const safeSourceHeight = sourceHeight > 0 ? sourceHeight : maxHeight; let scale = Math.min(maxWidth / safeSourceWidth, maxHeight / safeSourceHeight); let fittedWidth = safeSourceWidth * scale; let fittedHeight = safeSourceHeight * scale; if (fittedWidth < minWidth) { scale = minWidth / safeSourceWidth; fittedWidth = safeSourceWidth * scale; fittedHeight = safeSourceHeight * scale; } if (fittedHeight < minHeight) { scale = minHeight / safeSourceHeight; fittedWidth = safeSourceWidth * scale; fittedHeight = safeSourceHeight * scale; } if (fittedWidth > maxWidth || fittedHeight > maxHeight) { scale = Math.min(maxWidth / fittedWidth, maxHeight / fittedHeight); fittedWidth *= scale; fittedHeight *= scale; } return { width: Math.round(fittedWidth), height: Math.round(fittedHeight), }; }; const createNormalizedRect = ( start: BoxCutoutPoint, end: BoxCutoutPoint ): NormalizedCropRect => { const x = Math.min(start.x, end.x); const y = Math.min(start.y, end.y); const right = Math.max(start.x, end.x); const bottom = Math.max(start.y, end.y); return { x, y, width: clampNumber(right - x, 0, 1), height: clampNumber(bottom - y, 0, 1), }; }; const getCropPresetById = (presetId: string) => { for (const group of CROP_PRESET_GROUPS) { const matched = group.options.find((option) => option.id === presetId); if (matched) return matched; } return null; }; const getNormalizedMinCropSize = ( naturalWidth: number, naturalHeight: number ) => ({ width: naturalWidth > 0 ? Math.min(1, BOX_CUTOUT_MIN_EDGE_PX / naturalWidth) : 0.02, height: naturalHeight > 0 ? Math.min(1, BOX_CUTOUT_MIN_EDGE_PX / naturalHeight) : 0.02, }); const createCenteredCropRectForAspect = ( ratio: number, centerX = 0.5, centerY = 0.5 ): NormalizedCropRect => { const safeRatio = Number.isFinite(ratio) && ratio > 0 ? ratio : 1; const maxHalfWidth = Math.min(centerX, 1 - centerX); const maxHalfHeight = Math.min(centerY, 1 - centerY); let width = maxHalfHeight * 2 * safeRatio; let height = width / safeRatio; if (width > maxHalfWidth * 2) { width = maxHalfWidth * 2; height = width / safeRatio; } if (height > maxHalfHeight * 2) { height = maxHalfHeight * 2; width = height * safeRatio; } return { x: clampNumber(centerX - width / 2, 0, 1 - width), y: clampNumber(centerY - height / 2, 0, 1 - height), width: clampNumber(width, 0, 1), height: clampNumber(height, 0, 1), }; }; const createCenteredCropRectFromSize = ( centerX: number, centerY: number, width: number, height: number ): NormalizedCropRect => { const safeWidth = clampNumber(width, 0.0001, 1); const safeHeight = clampNumber(height, 0.0001, 1); let x = centerX - safeWidth / 2; let y = centerY - safeHeight / 2; x = clampNumber(x, 0, 1 - safeWidth); y = clampNumber(y, 0, 1 - safeHeight); return { x, y, width: safeWidth, height: safeHeight, }; }; const updateCropRectWithPointer = ({ aspectRatio, handle, minHeight, minWidth, pointer, startPoint, startRect, }: { aspectRatio: number | null; handle: CropInteractionHandle; minHeight: number; minWidth: number; pointer: BoxCutoutPoint; startPoint: BoxCutoutPoint; startRect: NormalizedCropRect; }): NormalizedCropRect => { const startRight = startRect.x + startRect.width; const startBottom = startRect.y + startRect.height; const currentAspect = aspectRatio && Number.isFinite(aspectRatio) && aspectRatio > 0 ? aspectRatio : null; if (handle === "move") { const nextX = clampNumber( startRect.x + (pointer.x - startPoint.x), 0, 1 - startRect.width ); const nextY = clampNumber( startRect.y + (pointer.y - startPoint.y), 0, 1 - startRect.height ); return { x: nextX, y: nextY, width: startRect.width, height: startRect.height, }; } if (!currentAspect) { let x = startRect.x; let y = startRect.y; let width = startRect.width; let height = startRect.height; if (handle.includes("w")) { x = clampNumber(pointer.x, 0, startRight - minWidth); width = startRight - x; } if (handle.includes("e")) { width = clampNumber(pointer.x - startRect.x, minWidth, 1 - startRect.x); } if (handle.includes("n")) { y = clampNumber(pointer.y, 0, startBottom - minHeight); height = startBottom - y; } if (handle.includes("s")) { height = clampNumber(pointer.y - startRect.y, minHeight, 1 - startRect.y); } return { x, y, width, height, }; } if (handle === "n" || handle === "s") { const anchorY = handle === "n" ? startBottom : startRect.y; let height = Math.abs(anchorY - pointer.y); height = clampNumber( height, minHeight, handle === "n" ? anchorY : 1 - anchorY ); let width = height * currentAspect; const centerX = startRect.x + startRect.width / 2; const maxWidth = Math.min(centerX, 1 - centerX) * 2; if (width > maxWidth) { width = maxWidth; height = width / currentAspect; } return { x: clampNumber(centerX - width / 2, 0, 1 - width), y: handle === "n" ? anchorY - height : anchorY, width, height, }; } if (handle === "w" || handle === "e") { const anchorX = handle === "w" ? startRight : startRect.x; let width = Math.abs(anchorX - pointer.x); width = clampNumber(width, minWidth, handle === "w" ? anchorX : 1 - anchorX); let height = width / currentAspect; const centerY = startRect.y + startRect.height / 2; const maxHeight = Math.min(centerY, 1 - centerY) * 2; if (height > maxHeight) { height = maxHeight; width = height * currentAspect; } return { x: handle === "w" ? anchorX - width : anchorX, y: clampNumber(centerY - height / 2, 0, 1 - height), width, height, }; } const isWest = handle.includes("w"); const isNorth = handle.includes("n"); const anchorX = isWest ? startRight : startRect.x; const anchorY = isNorth ? startBottom : startRect.y; const maxWidth = isWest ? anchorX : 1 - anchorX; const maxHeight = isNorth ? anchorY : 1 - anchorY; let width = Math.abs(anchorX - pointer.x); let height = width / currentAspect; if (height > maxHeight) { height = maxHeight; width = height * currentAspect; } if (width > maxWidth) { width = maxWidth; height = width / currentAspect; } if (width < minWidth) { width = minWidth; height = width / currentAspect; } if (height < minHeight) { height = minHeight; width = height * currentAspect; } if (height > maxHeight) { height = maxHeight; width = height * currentAspect; } if (width > maxWidth) { width = maxWidth; height = width / currentAspect; } return { x: isWest ? anchorX - width : anchorX, y: isNorth ? anchorY - height : anchorY, width, height, }; }; const normalizeTextEditItems = ( items: ImageTextEditItem[] | undefined ): ImageTextEditItem[] => { if (!items || items.length === 0) return []; return items .map((item, index) => { const originalText = (item.originalText || "").trim(); if (!originalText) return null; return { id: item.id || String(index + 1), originalText, editedText: (item.editedText || item.originalText || "").trim(), confidence: item.confidence, } as ImageTextEditItem; }) .filter((item): item is ImageTextEditItem => !!item); }; const isHttpImageUrl = (url?: string) => !!url && /^https?:\/\//i.test(url); const CHAT_ATTACHMENT_MAX_UPLOAD_BYTES = 30 * 1024 * 1024; const CHAT_ATTACHMENT_MAX_DATA_URL_LENGTH = 42 * 1024 * 1024; const CANVAS_3D_POLL_INTERVAL_MS = 2000; const CANVAS_3D_MAX_POLL_ATTEMPTS = 360; const DEFAULT_CANVAS_TRIPO_MODEL = getDefaultThreeDModelAliasId( DEFAULT_PUBLIC_THREED_MODEL_ALIAS_CONFIG.tripoModels ); const DEFAULT_CANVAS_WORLD_MODEL = getDefaultThreeDModelAliasId( DEFAULT_PUBLIC_THREED_MODEL_ALIAS_CONFIG.worldModels ); const sleep = (ms: number) => new Promise((resolve) => window.setTimeout(resolve, ms)); const isTerminal3DFailureStatus = (status?: string | null) => ["failed", "banned", "expired", "cancelled"].includes(String(status || "")); function getChatAttachmentExtension(mimeType: string) { const normalized = mimeType.toLowerCase(); if (normalized.includes("png")) return "png"; if (normalized.includes("webp")) return "webp"; if (normalized.includes("gif")) return "gif"; if (normalized.includes("svg")) return "svg"; return "jpg"; } function normalizeChatAttachmentFileName(name: string, mimeType: string) { const baseName = String(name || "canvas-image") .trim() .replace(/\.[^.]+$/, "") .replace(/[^\u4e00-\u9fa5a-zA-Z0-9_-]+/g, "-") .replace(/^-+|-+$/g, "") .slice(0, 48) || "canvas-image"; return `${baseName}-${Date.now()}.${getChatAttachmentExtension(mimeType)}`; } async function uploadChatAttachmentBlob(blob: Blob, displayName: string) { const uploadBlob = blob.type ? blob : new Blob([blob], { type: "image/jpeg" }); if (!uploadBlob.type.startsWith("image/")) { throw new Error("只能添加图片到对话"); } if (!["image/jpeg", "image/jpg", "image/png", "image/webp"].includes(uploadBlob.type)) { throw new Error("暂只支持 JPG、PNG、WebP 图片添加到对话"); } if (uploadBlob.size > CHAT_ATTACHMENT_MAX_UPLOAD_BYTES) { throw new Error("图片过大，请先压缩后再添加到对话"); } const formData = new FormData(); const contentType = uploadBlob.type || "image/jpeg"; formData.append("file", uploadBlob, normalizeChatAttachmentFileName(displayName, contentType)); const response = await fetchUploadWithRetry(formData); let payload: any = null; try { payload = await response.json(); } catch { payload = null; } if (!response.ok) { throw new Error(payload?.error || "图片上传失败，请稍后重试"); } const uploadedUrl = String(payload?.url || "").trim(); if (!isHttpImageUrl(uploadedUrl)) { throw new Error("图片上传后未返回可用地址"); } return { url: uploadedUrl, contentType, }; } async function resolveChatAttachmentFromImageSrc(src: string, displayName: string) { const trimmedSrc = String(src || "").trim(); if (!trimmedSrc) { throw new Error("当前图片地址不可用"); } if (isHttpImageUrl(trimmedSrc)) { return { url: trimmedSrc, contentType: "image/jpeg", }; } if (trimmedSrc.startsWith("data:image/")) { if (trimmedSrc.length > CHAT_ATTACHMENT_MAX_DATA_URL_LENGTH) { throw new Error("图片数据过大，请先下载压缩后再添加到对话"); } const blob = await fetch(trimmedSrc).then((response) => response.blob()); return uploadChatAttachmentBlob(blob, displayName); } if (trimmedSrc.startsWith("blob:")) { const blob = await fetch(trimmedSrc).then((response) => response.blob()); return uploadChatAttachmentBlob(blob, displayName); } throw new Error("当前图片地址不可直接加入对话，请重新上传图片"); } async function renderAndUploadFlippedImage( imageSrc: string, action: Exclude, displayName: string ) { const sourceUrl = buildImageProxyUrl(String(imageSrc || "").trim(), { delivery: "proxy", }); const response = await fetch(sourceUrl); if (!response.ok) { throw new Error("读取原图失败，请稍后重试"); } const sourceBlob = await response.blob(); const objectUrl = URL.createObjectURL(sourceBlob); try { const image = await new Promise((resolve, reject) => { const img = new Image(); img.onload = () => resolve(img); img.onerror = () => reject(new Error("图片加载失败")); img.src = objectUrl; }); const width = image.naturalWidth || image.width; const height = image.naturalHeight || image.height; if (!width || !height) { throw new Error("图片尺寸无效，无法执行翻转"); } const canvas = document.createElement("canvas"); canvas.width = width; canvas.height = height; const ctx = canvas.getContext("2d"); if (!ctx) { throw new Error("无法创建画布上下文"); } ctx.save(); if (action === "horizontal") { ctx.translate(width, 0); ctx.scale(-1, 1); } else { ctx.translate(0, height); ctx.scale(1, -1); } ctx.drawImage(image, 0, 0, width, height); ctx.restore(); const outputType = ["image/png", "image/jpeg", "image/webp"].includes( sourceBlob.type ) ? sourceBlob.type : "image/png"; const transformedBlob = await new Promise((resolve, reject) => { canvas.toBlob( (blob) => { if (blob) { resolve(blob); return; } reject(new Error("导出翻转图片失败")); }, outputType, outputType === "image/jpeg" || outputType === "image/webp" ? 0.96 : undefined ); }); const uploadResult = await uploadChatAttachmentBlob( transformedBlob, displayName ); return uploadResult.url; } finally { URL.revokeObjectURL(objectUrl); } } async function renderAndUploadCroppedImage( imageSrc: string, cropRect: NormalizedCropRect, displayName: string ) { const sourceUrl = buildImageProxyUrl(String(imageSrc || "").trim(), { delivery: "proxy", }); const response = await fetch(sourceUrl); if (!response.ok) { throw new Error("读取原图失败，请稍后重试"); } const sourceBlob = await response.blob(); const objectUrl = URL.createObjectURL(sourceBlob); try { const image = await new Promise((resolve, reject) => { const img = new Image(); img.onload = () => resolve(img); img.onerror = () => reject(new Error("图片加载失败")); img.src = objectUrl; }); const naturalWidth = image.naturalWidth || image.width; const naturalHeight = image.naturalHeight || image.height; if (!naturalWidth || !naturalHeight) { throw new Error("图片尺寸无效，无法执行裁剪"); } const left = Math.round(clampNumber(cropRect.x, 0, 1) * naturalWidth); const top = Math.round(clampNumber(cropRect.y, 0, 1) * naturalHeight); const width = Math.max( BOX_CUTOUT_MIN_EDGE_PX, Math.round(clampNumber(cropRect.width, 0, 1) * naturalWidth) ); const height = Math.max( BOX_CUTOUT_MIN_EDGE_PX, Math.round(clampNumber(cropRect.height, 0, 1) * naturalHeight) ); const safeWidth = Math.min(width, naturalWidth - left); const safeHeight = Math.min(height, naturalHeight - top); if (safeWidth <= 0 || safeHeight <= 0) { throw new Error("裁剪区域无效，请重新调整"); } const canvas = document.createElement("canvas"); canvas.width = safeWidth; canvas.height = safeHeight; const ctx = canvas.getContext("2d"); if (!ctx) { throw new Error("无法创建画布上下文"); } ctx.drawImage( image, left, top, safeWidth, safeHeight, 0, 0, safeWidth, safeHeight ); const outputType = ["image/png", "image/jpeg", "image/webp"].includes( sourceBlob.type ) ? sourceBlob.type : "image/png"; const croppedBlob = await new Promise((resolve, reject) => { canvas.toBlob( (blob) => { if (blob) { resolve(blob); return; } reject(new Error("导出裁剪图片失败")); }, outputType, outputType === "image/jpeg" || outputType === "image/webp" ? 0.96 : undefined ); }); const uploadResult = await uploadChatAttachmentBlob(croppedBlob, displayName); return { url: uploadResult.url, width: safeWidth, height: safeHeight, }; } finally { URL.revokeObjectURL(objectUrl); } } function inferModelFormat(modelUrl?: string | null) { const value = String(modelUrl || "").toLowerCase(); if (!value) return "glb"; if (value.includes(".gltf")) return "gltf"; if (value.includes(".glb")) return "glb"; if (value.includes(".usdz")) return "usdz"; if (value.includes(".fbx")) return "fbx"; if (value.includes(".obj")) return "obj"; if (value.includes(".stl")) return "stl"; if (value.includes(".3mf")) return "3mf"; return "glb"; } function inferTripoImageType(imageUrl?: string | null) { const value = String(imageUrl || "").toLowerCase(); if (value.includes(".png")) return "png"; if (value.includes(".webp")) return "webp"; return "jpg"; } const normalizeMediaUrl = (url: string): string => { const raw = String(url || "").trim(); if (!raw) return ""; try { const parsed = new URL(raw); return `${parsed.origin}${parsed.pathname}` .replace(/\/+$/, "") .toLowerCase(); } catch { return raw.split("#")[0].split("?")[0].replace(/\/+$/, "").toLowerCase(); } }; const normalizeImageIdentityUrl = (url: string): string => { const raw = String(url || "").trim(); if (!raw) return ""; const canonical = inferOriginalImageUrl(raw); return normalizeMediaUrl(canonical || raw); }; const normalizeImageTitle = (raw?: string) => { const title = (raw || "").trim(); return title || ""; }; const getImageNodeTitle = (data: ImageNodeData, nodeId: string) => { return ( normalizeImageTitle(data.title) || normalizeImageTitle(data.prompt) || `图片-${nodeId.slice(0, 6)}` ); }; const sanitizeFileName = (name: string) => { const safe = name .replace(/[<>:"/\\|?*\x00-\x1F]/g, "-") .replace(/\s+/g, " ") .trim() .slice(0, 120); return safe || "image"; }; const triggerBrowserDownload = ( url: string, filename?: string, options?: { openInNewTab?: boolean } ) => { const link = document.createElement("a"); link.href = url; if (filename) { link.download = filename; } if (options?.openInNewTab) { link.target = "_blank"; } link.rel = "noopener noreferrer"; document.body.appendChild(link); link.click(); document.body.removeChild(link); }; const GENERIC_CANVAS_PROMPTS = new Set([ "对话生成", "图片生成", "AI生成", "智能生成", "自动生成", ]); const normalizePromptText = (value: unknown): string => { return typeof value === "string" ? value.trim() : ""; }; const resolveRegeneratePromptSeed = (data: ImageNodeData): string => { const metadataPrompt = normalizePromptText(data.metadata?.generationPrompt); if (metadataPrompt) return metadataPrompt; const nodePrompt = normalizePromptText(data.prompt); if (nodePrompt && !GENERIC_CANVAS_PROMPTS.has(nodePrompt)) { return nodePrompt; } return nodePrompt; }; const COMMON_ASPECT_RATIOS = [ "1:1", "2:3", "3:2", "3:4", "4:3", "4:5", "5:4", "9:16", "16:9", "21:9", ] as const; function guessNearestAspectRatio(width: number, height: number): string { if (!width || !height) return "auto"; const target = width / height; let best = "auto"; let minDiff = Number.POSITIVE_INFINITY; for (const ratio of COMMON_ASPECT_RATIOS) { const [w, h] = ratio.split(":").map(Number); const value = w / h; const diff = Math.abs(target - value); if (diff < minDiff) { minDiff = diff; best = ratio; } } return best; } /** * 在图片上绘制标记点，返回带标记的图片 base64 */ async function drawMarkerOnImage( imageUrl: string, clickX: number, clickY: number ): Promise { return new Promise((resolve, reject) => { const img = new Image(); img.crossOrigin = "anonymous"; const loadUrl = buildImageProxyUrl(imageUrl, { delivery: "proxy" }); img.onload = () => { const canvas = document.createElement("canvas"); const ctx = canvas.getContext("2d"); if (!ctx) { reject(new Error("无法创建 canvas")); return; } // 压缩图片尺寸（最大 800px） const maxSize = 800; let width = img.width; let height = img.height; if (width > maxSize || height > maxSize) { if (width > height) { height = (height / width) * maxSize; width = maxSize; } else { width = (width / height) * maxSize; height = maxSize; } } canvas.width = width; canvas.height = height; ctx.drawImage(img, 0, 0, width, height); // 计算标记位置 const markerX = clickX * width; const markerY = clickY * height; const markerRadius = Math.max(12, Math.min(width, height) * 0.025); // 绘制红色标记 ctx.beginPath(); ctx.arc(markerX, markerY, markerRadius + 3, 0, Math.PI * 2); ctx.fillStyle = "white"; ctx.fill(); ctx.beginPath(); ctx.arc(markerX, markerY, markerRadius, 0, Math.PI * 2); ctx.fillStyle = "#FF0000"; ctx.fill(); // 绘制十字线 ctx.strokeStyle = "#FF0000"; ctx.lineWidth = 2; ctx.beginPath(); ctx.moveTo(markerX - markerRadius * 2, markerY); ctx.lineTo(markerX - markerRadius - 2, markerY); ctx.stroke(); ctx.beginPath(); ctx.moveTo(markerX + markerRadius + 2, markerY); ctx.lineTo(markerX + markerRadius * 2, markerY); ctx.stroke(); ctx.beginPath(); ctx.moveTo(markerX, markerY - markerRadius * 2); ctx.lineTo(markerX, markerY - markerRadius - 2); ctx.stroke(); ctx.beginPath(); ctx.moveTo(markerX, markerY + markerRadius + 2); ctx.lineTo(markerX, markerY + markerRadius * 2); ctx.stroke(); resolve(canvas.toDataURL("image/jpeg", 0.85)); }; img.onerror = () => reject(new Error("图片加载失败")); img.src = loadUrl; }); } interface ImageNodeProps { node: CanvasNode; isSelected: boolean; isLayerSplitEnabled?: boolean; batchProcessingEnabled?: boolean; canvasToolbarConfig?: CanvasToolbarConfig; angleEditEnabled?: boolean; tripo3dEnabled?: boolean; worldlabs3dEnabled?: boolean; } export function ImageNode({ node, isSelected, isLayerSplitEnabled = false, batchProcessingEnabled = true, canvasToolbarConfig, angleEditEnabled = false, tripo3dEnabled = false, worldlabs3dEnabled = false, }: ImageNodeProps) { const router = useRouter(); const routeParams = useParams(); const canvasId = Array.isArray(routeParams?.id) ? routeParams.id[0] || "" : typeof routeParams?.id === "string" ? routeParams.id : ""; const data = node.data as ImageNodeData; const imageNodeMoreItem = getCanvasToolbarItem(canvasToolbarConfig, "imageNodeMore"); const imageAddToChatItem = getCanvasToolbarItem(canvasToolbarConfig, "imageAddToChat"); const imagePickObjectItem = getCanvasToolbarItem(canvasToolbarConfig, "imagePickObject"); const imageEnhanceItem = getCanvasToolbarItem(canvasToolbarConfig, "imageEnhance"); const imageRemoveBackgroundItem = getCanvasToolbarItem( canvasToolbarConfig, "imageRemoveBackground" ); const imageBoxCutoutItem = getCanvasToolbarItem(canvasToolbarConfig, "imageBoxCutout"); const imageRemoveWatermarkItem = getCanvasToolbarItem( canvasToolbarConfig, "imageRemoveWatermark" ); const imageResizeItem = getCanvasToolbarItem(canvasToolbarConfig, "imageResize"); const imageCropItem = getCanvasToolbarItem(canvasToolbarConfig, "imageCrop"); const imageTextEditItem = getCanvasToolbarItem(canvasToolbarConfig, "imageTextEdit"); const imageMultiAngleItem = getCanvasToolbarItem(canvasToolbarConfig, "imageMultiAngle"); const imageGenerate3dModelItem = getCanvasToolbarItem( canvasToolbarConfig, "imageGenerate3dModel" ); const imageGenerate3dWorldItem = getCanvasToolbarItem( canvasToolbarConfig, "imageGenerate3dWorld" ); const imageLayerSplitItem = getCanvasToolbarItem(canvasToolbarConfig, "imageLayerSplit"); const imageExtendItem = getCanvasToolbarItem(canvasToolbarConfig, "imageExtend"); const imageAdjustItem = getCanvasToolbarItem(canvasToolbarConfig, "imageAdjust"); const imageFlipRotateItem = getCanvasToolbarItem( canvasToolbarConfig, "imageFlipRotate" ); const imagePromptRegenerateItem = getCanvasToolbarItem( canvasToolbarConfig, "imagePromptRegenerate" ); const imageNoteItem = getCanvasToolbarItem(canvasToolbarConfig, "imageNote"); const imageRenameItem = getCanvasToolbarItem(canvasToolbarConfig, "imageRename"); const imageDownloadItem = getCanvasToolbarItem(canvasToolbarConfig, "imageDownload"); const imageDeleteItem = getCanvasToolbarItem(canvasToolbarConfig, "imageDelete"); const imageCompareItem = getCanvasToolbarItem(canvasToolbarConfig, "imageCompare"); const imageConfirmCutoutItem = getCanvasToolbarItem( canvasToolbarConfig, "imageConfirmCutout" ); const imageCancelCutoutItem = getCanvasToolbarItem( canvasToolbarConfig, "imageCancelCutout" ); const imageNodeMoreEnabled = isCanvasToolbarItemEnabled( canvasToolbarConfig, "imageNodeMore" ); const imageAddToChatEnabled = isCanvasToolbarItemEnabled( canvasToolbarConfig, "imageAddToChat" ); const imagePickObjectEnabled = isCanvasToolbarItemEnabled( canvasToolbarConfig, "imagePickObject" ); const imageRemoveBackgroundEnabled = isCanvasToolbarItemEnabled( canvasToolbarConfig, "imageRemoveBackground" ); const imageRemoveWatermarkEnabled = isCanvasToolbarItemEnabled( canvasToolbarConfig, "imageRemoveWatermark" ); const imageEnhanceEnabled = isCanvasToolbarItemEnabled( canvasToolbarConfig, "imageEnhance" ); const imageNoteEnabled = isCanvasToolbarItemEnabled(canvasToolbarConfig, "imageNote"); const imageBoxCutoutEnabled = isCanvasToolbarItemEnabled( canvasToolbarConfig, "imageBoxCutout" ); const imageLayerSplitEnabledByToolbar = isCanvasToolbarItemEnabled( canvasToolbarConfig, "imageLayerSplit" ); const imageResizeEnabled = isCanvasToolbarItemEnabled( canvasToolbarConfig, "imageResize" ); const imageMultiAngleEnabled = isCanvasToolbarItemEnabled( canvasToolbarConfig, "imageMultiAngle" ) && angleEditEnabled; const imageGenerate3dModelEnabled = isCanvasToolbarItemEnabled( canvasToolbarConfig, "imageGenerate3dModel" ) && tripo3dEnabled; const imageGenerate3dWorldEnabled = isCanvasToolbarItemEnabled( canvasToolbarConfig, "imageGenerate3dWorld" ) && worldlabs3dEnabled; const imagePromptRegenerateEnabled = isCanvasToolbarItemEnabled( canvasToolbarConfig, "imagePromptRegenerate" ); const imageTextEditEnabled = isCanvasToolbarItemEnabled( canvasToolbarConfig, "imageTextEdit" ); const imageExtendEnabled = isCanvasToolbarItemEnabled( canvasToolbarConfig, "imageExtend" ); const imageCropEnabled = isCanvasToolbarItemEnabled(canvasToolbarConfig, "imageCrop"); const imageAdjustEnabled = isCanvasToolbarItemEnabled( canvasToolbarConfig, "imageAdjust" ); const imageFlipRotateEnabled = isCanvasToolbarItemEnabled( canvasToolbarConfig, "imageFlipRotate" ); const imageRenameEnabled = isCanvasToolbarItemEnabled( canvasToolbarConfig, "imageRename" ); const imageDownloadEnabled = isCanvasToolbarItemEnabled( canvasToolbarConfig, "imageDownload" ); const imageDeleteEnabled = isCanvasToolbarItemEnabled( canvasToolbarConfig, "imageDelete" ); const imageLayerSplitEnabled = isLayerSplitEnabled && imageLayerSplitEnabledByToolbar; const hasHoverImageMorePrimaryActions = imageRemoveBackgroundEnabled || imageRemoveWatermarkEnabled || imageEnhanceEnabled || imageNoteEnabled || (isLayerSplitEnabled && imageLayerSplitEnabledByToolbar) || imageResizeEnabled || imageMultiAngleEnabled || imagePromptRegenerateEnabled || imageTextEditEnabled || imageExtendEnabled || imageCropEnabled || imageAdjustEnabled || imageFlipRotateEnabled || imageRenameEnabled; const hasHoverImageMoreSecondaryActions = imageDownloadEnabled || imageDeleteEnabled; const hasHoverImageMoreMenu = imageNodeMoreEnabled && (hasHoverImageMorePrimaryActions || hasHoverImageMoreSecondaryActions); const hasSelectedImageMorePrimaryActions = imageExtendEnabled || imageCropEnabled || imageAdjustEnabled || imageFlipRotateEnabled || imagePromptRegenerateEnabled || imageNoteEnabled; const hasSelectedImageMoreMenu = imageNodeMoreEnabled && (hasSelectedImageMorePrimaryActions || imageDeleteEnabled); const hasSelectedImagePrimaryToolbarActions = imagePickObjectEnabled || imageEnhanceEnabled || imageRemoveBackgroundEnabled || imageBoxCutoutEnabled || imageRemoveWatermarkEnabled || imageResizeEnabled || imageTextEditEnabled || imageMultiAngleEnabled || imageGenerate3dModelEnabled || imageGenerate3dWorldEnabled || imageLayerSplitEnabled; const hasSelectedImageSecondaryToolbarActions = hasSelectedImageMoreMenu || imageDownloadEnabled; const contentScale = useMemo( () => getNodeContentScale(node.size, { width: 220, height: 220, }), [node.size.height, node.size.width] ); const viewportZoom = useCanvasStore((state) => state.viewport.zoom); const nodeContentScale = contentScale * viewportZoom; const scaledContentStyle = useMemo( () => getScaledNodeContentStyle(nodeContentScale, { allowUpscale: true }), [nodeContentScale] ); const selectedTitleStyle = useMemo( () => ({ top: `${-28 * nodeContentScale}px`, transform: `scale(${nodeContentScale})`, transformOrigin: "bottom left", width: `${100 / nodeContentScale}%`, }), [nodeContentScale] ); const detailProgressLabel = typeof data.metadata?.detailProgressLabel === "string" ? data.metadata.detailProgressLabel.trim() : ""; const flipRotateOriginalSrc = data.metadata && typeof data.metadata === "object" ? String((data.metadata as Record).flipRotateOriginalSrc || "").trim() : ""; const hasFlipRotateReset = flipRotateOriginalSrc.length > 0 && flipRotateOriginalSrc !== data.src; const storedImageAdjustments = useMemo( () => normalizeImageAdjustments( data.metadata && typeof data.metadata === "object" ? (data.metadata as Record).imageAdjustments : undefined ), [data.metadata] ); const selectedNodeIds = useCanvasStore((state) => state.selectedNodeIds); const { data: modelAliasConfigResponse } = useSWR<{ success?: boolean; data?: PublicThreeDModelAliasConfig; }>("/api/canvas/model-aliases", fetcher); const publicModelAliasConfig = modelAliasConfigResponse?.data || DEFAULT_PUBLIC_THREED_MODEL_ALIAS_CONFIG; const modelFeatureVisibility = publicModelAliasConfig.featureVisibility || DEFAULT_PUBLIC_THREED_MODEL_ALIAS_CONFIG.featureVisibility; const tripoModelOptions = useMemo(() => { return publicModelAliasConfig.tripoModels.filter( (entry) => entry.enabled !== false ); }, [publicModelAliasConfig.tripoModels]); const worldModelOptions = useMemo(() => { return publicModelAliasConfig.worldModels.filter( (entry) => entry.enabled !== false ); }, [publicModelAliasConfig.worldModels]); const [isHovered, setIsHovered] = useState(false); const [isProcessing, setIsProcessing] = useState(false); const [imageAdjustPanelOpen, setImageAdjustPanelOpen] = useState(false); const [imageAdjustTab, setImageAdjustTab] = useState("light"); const [imageAdjustmentsDraft, setImageAdjustmentsDraft] = useState(storedImageAdjustments); const [cropPanelOpen, setCropPanelOpen] = useState(false); const [cropRect, setCropRect] = useState(null); const [cropPresetId, setCropPresetId] = useState(DEFAULT_CROP_PRESET_ID); const [cropLockAspectRatio, setCropLockAspectRatio] = useState(true); const [cropExpandedGroups, setCropExpandedGroups] = useState< Record >({ common: true, instagram: false, facebook: false, tiktok: false, youtube: false, }); const [cropInteraction, setCropInteraction] = useState(null); const [isApplyingCrop, setIsApplyingCrop] = useState(false); const [flipRotatePanelOpen, setFlipRotatePanelOpen] = useState(false); const [isApplyingFlipRotate, setIsApplyingFlipRotate] = useState(false); const [anglePanelOpen, setAnglePanelOpen] = useState(false); const [anglePanelMode, setAnglePanelMode] = useState("camera"); const [angleHorizontalAngle, setAngleHorizontalAngle] = useState(-50); const [angleVerticalAngle, setAngleVerticalAngle] = useState(-30); const [angleZoom, setAngleZoom] = useState(50); const [isApplyingAngleEdit, setIsApplyingAngleEdit] = useState(false); const [isAnglePreviewDragging, setIsAnglePreviewDragging] = useState(false); const [anglePanelOpening, setAnglePanelOpening] = useState(false); const [sceneFusionDialogOpen, setSceneFusionDialogOpen] = useState(false); const [resizeAnnotatorOpen, setResizeAnnotatorOpen] = useState(false); const [promptDialogOpen, setPromptDialogOpen] = useState(false); const [threedGenerationDialogMode, setThreedGenerationDialogMode] = useState< "model" | "world" | null >(null); const [selectedTripoModelVersion, setSelectedTripoModelVersion] = useState( DEFAULT_CANVAS_TRIPO_MODEL || "tripo-standard" ); const [selectedWorldModelVersion, setSelectedWorldModelVersion] = useState( DEFAULT_CANVAS_WORLD_MODEL || "world-standard" ); const [regeneratePrompt, setRegeneratePrompt] = useState(""); const [isUploading, setIsUploading] = useState(false); const [annotatorOpen, setAnnotatorOpen] = useState(false); const [fullscreenPreviewOpen, setFullscreenPreviewOpen] = useState(false); const [textEditPanelOpen, setTextEditPanelOpen] = useState(false); const [notePanelOpen, setNotePanelOpen] = useState(false); const [snapshotDialogOpen, setSnapshotDialogOpen] = useState(false); const [hasEnteredViewport, setHasEnteredViewport] = useState(false); const [textEditItems, setTextEditItems] = useState(() => normalizeTextEditItems(data.textEditItems) ); const [textEditError, setTextEditError] = useState(null); const [isDetectingText, setIsDetectingText] = useState(false); const [isApplyingTextEdit, setIsApplyingTextEdit] = useState(false); const [deletedTextItems, setDeletedTextItems] = useState< Array<{ id: string; originalText: string }> >([]); const [isEditingTitle, setIsEditingTitle] = useState(false); const [draftTitle, setDraftTitle] = useState(""); const [draftNote, setDraftNote] = useState(""); const [isAddingToChat, setIsAddingToChat] = useState(false); const [isCompareMode, setIsCompareMode] = useState(false); const [compareSplitPercent, setCompareSplitPercent] = useState(50); const [toolbarSize, setToolbarSize] = useState({ width: 0, height: 0 }); const [boxCutoutToolbarSize, setBoxCutoutToolbarSize] = useState({ width: 0, height: 0, }); const [boxCutoutMode, setBoxCutoutMode] = useState(false); const [isBoxCutoutDrawing, setIsBoxCutoutDrawing] = useState(false); const [boxCutoutSelection, setBoxCutoutSelection] = useState(null); const [boxCutoutDragStart, setBoxCutoutDragStart] = useState(null); const [boxCutoutDragEnd, setBoxCutoutDragEnd] = useState(null); const anglePreviewDragRef = useRef(null); const activeImageAdjustments = imageAdjustPanelOpen ? imageAdjustmentsDraft : storedImageAdjustments; const activeImageAdjustmentsStyle = useMemo( () => buildImageAdjustmentFilterStyle(activeImageAdjustments), [activeImageAdjustments] ); const hasActiveImageAdjustments = !isDefaultImageAdjustments( activeImageAdjustments ); useEffect(() => { if (!batchProcessingEnabled) { setSceneFusionDialogOpen(false); } }, [batchProcessingEnabled]); useEffect(() => { if (!imageAdjustPanelOpen) return; setImageAdjustmentsDraft(storedImageAdjustments); }, [imageAdjustPanelOpen, storedImageAdjustments, data.src]); useEffect(() => { if (!cropPanelOpen) return; if (cropRect) return; const centerX = 0.5; const centerY = 0.5; const preset = getCropPresetById(cropPresetId); if (preset) { setCropRect(createCenteredCropRectForAspect(preset.ratio, centerX, centerY)); return; } setCropRect({ x: 0, y: 0, width: 1, height: 1, }); }, [cropPanelOpen, cropPresetId, cropRect]); useEffect(() => { if (!imageAdjustPanelOpen || typeof window === "undefined") return; if (areImageAdjustmentsEqual(imageAdjustmentsDraft, storedImageAdjustments)) { return; } const timer = window.setTimeout(() => { const nextMetadata = data.metadata && typeof data.metadata === "object" ? { ...(data.metadata as Record) } : {}; if (isDefaultImageAdjustments(imageAdjustmentsDraft)) { delete nextMetadata.imageAdjustments; delete nextMetadata.imageAdjustmentsUpdatedAt; } else { nextMetadata.imageAdjustments = imageAdjustmentsDraft; nextMetadata.imageAdjustmentsUpdatedAt = new Date().toISOString(); } useCanvasStore.getState().updateNode(node.id, { data: { ...data, metadata: Object.keys(nextMetadata).length > 0 ? nextMetadata : undefined, }, }); }, 140); return () => window.clearTimeout(timer); }, [ data, imageAdjustPanelOpen, imageAdjustmentsDraft, node.id, storedImageAdjustments, ]); useEffect(() => { if (!anglePanelOpen) return; const savedSettings = data.metadata && typeof data.metadata === "object" && !Array.isArray(data.metadata) ? (data.metadata as { angleEditSettings?: { mode?: AngleEditPanelMode; horizontalAngle?: number; verticalAngle?: number; zoom?: number; }; }).angleEditSettings : undefined; if (!savedSettings) return; if (savedSettings.mode === "subject" || savedSettings.mode === "camera") { setAnglePanelMode(savedSettings.mode); } if (typeof savedSettings.horizontalAngle === "number") { setAngleHorizontalAngle(clampNumber(savedSettings.horizontalAngle, -180, 180)); } if (typeof savedSettings.verticalAngle === "number") { setAngleVerticalAngle(clampNumber(savedSettings.verticalAngle, -30, 60)); } if (typeof savedSettings.zoom === "number") { setAngleZoom(clampNumber(savedSettings.zoom, 0, 100)); } }, [anglePanelOpen, data.metadata]); useEffect(() => { if (!anglePanelOpen || typeof window === "undefined") { setAnglePanelOpening(false); return; } setAnglePanelOpening(true); const timer = window.setTimeout(() => { setAnglePanelOpening(false); }, 560); return () => window.clearTimeout(timer); }, [anglePanelOpen]); useEffect(() => { const nextDefaultTripoModelId = getDefaultThreeDModelAliasId(publicModelAliasConfig.tripoModels) || DEFAULT_CANVAS_TRIPO_MODEL || "tripo-standard"; if (!tripoModelOptions.some((entry) => entry.id === selectedTripoModelVersion)) { setSelectedTripoModelVersion(nextDefaultTripoModelId); } }, [ publicModelAliasConfig.tripoModels, selectedTripoModelVersion, tripoModelOptions, ]); useEffect(() => { const nextDefaultWorldModelId = getDefaultThreeDModelAliasId(publicModelAliasConfig.worldModels) || DEFAULT_CANVAS_WORLD_MODEL || "world-standard"; if (!worldModelOptions.some((entry) => entry.id === selectedWorldModelVersion)) { setSelectedWorldModelVersion(nextDefaultWorldModelId); } }, [ publicModelAliasConfig.worldModels, selectedWorldModelVersion, worldModelOptions, ]); const [boxCutoutMetrics, setBoxCutoutMetrics] = useState(null); // 文件输入的 ref const fileInputRef = useRef(null); const containerRef = useRef(null); const displayImageRef = useRef(null); const compareFrameRef = useRef(null); const cropOverlayRef = useRef(null); const toolbarRef = useRef(null); const boxCutoutToolbarRef = useRef(null); const updateNode = useCanvasStore((state) => state.updateNode); const deleteNode = useCanvasStore((state) => state.deleteNode); const addNode = useCanvasStore((state) => state.addNode); const selectNode = useCanvasStore((state) => state.selectNode); const projectId = useCanvasStore((state) => state.projectId); const getCanvasState = useCanvasStore((state) => state.getCanvasState); const addPendingChatAttachment = useCanvasStore( (state) => state.addPendingChatAttachment ); const setPickerMode = useCanvasStore((state) => state.setPickerMode); const imageNodeActionRequest = useCanvasStore( (state) => state.imageNodeActionRequest ); const clearImageNodeActionRequest = useCanvasStore( (state) => state.clearImageNodeActionRequest ); const allNodes = useCanvasStore((state) => state.nodes); const selectedTripoModelEntry = useMemo( () => tripoModelOptions.find((entry) => entry.id === selectedTripoModelVersion) || tripoModelOptions[0] || null, [selectedTripoModelVersion, tripoModelOptions] ); const selectedWorldModelEntry = useMemo( () => worldModelOptions.find((entry) => entry.id === selectedWorldModelVersion) || worldModelOptions[0] || null, [selectedWorldModelVersion, worldModelOptions] ); // 🆕 物品拾取相关状态 const isPickerMode = useCanvasStore((state) => state.isPickerMode); const pickerTargetNodeId = useCanvasStore( (state) => state.pickerTargetNodeId ); const isPickerLoading = useCanvasStore((state) => state.isPickerLoading); const setPickerLoading = useCanvasStore((state) => state.setPickerLoading); const addPendingPickedObject = useCanvasStore( (state) => state.addPendingPickedObject ); // 当前节点是否处于拾取模式 const isThisNodePicking = isPickerMode && pickerTargetNodeId === node.id; // 当前正在识别的点击位置 const [currentClick, setCurrentClick] = useState<{ x: number; y: number; } | null>(null); const displayTitle = getImageNodeTitle(data, node.id); const agentExecutionSnapshotId = typeof data.metadata?.agentExecutionSnapshotId === "string" ? data.metadata.agentExecutionSnapshotId.trim() : ""; const detailUiScreenOverlay = useMemo(() => { const raw = data.metadata?.detailUiScreenOverlay; if (!raw || typeof raw !== "object" || Array.isArray(raw)) return null; return raw as DetailUiScreenOverlaySnapshot; }, [data.metadata]); const detailSubjectAnalysis = useMemo(() => { return normalizeDetailUiSubjectAnalysis( data.metadata?.detailSubjectAnalysis ); }, [data.metadata]); const detailUiDslDocumentFromMetadata = useMemo(() => { const raw = data.metadata?.detailUiDslDocument; if (!raw || typeof raw !== "object" || Array.isArray(raw)) return null; return raw as DetailUiDslV2Document; }, [data.metadata]); const detailUiDslDocument = useMemo(() => { if (detailUiDslDocumentFromMetadata) return detailUiDslDocumentFromMetadata; if (!detailUiScreenOverlay) return null; return buildDetailUiDslV2({ overlay: detailUiScreenOverlay, subjectAnalysis: detailSubjectAnalysis, }); }, [ detailSubjectAnalysis, detailUiDslDocumentFromMetadata, detailUiScreenOverlay, ]); const shouldRenderDetailOverlay = data.metadata?.detailGenerationMode === "agent_layout" && Boolean(detailUiScreenOverlay); const shortAgentExecutionSnapshotId = agentExecutionSnapshotId ? agentExecutionSnapshotId.slice(0, 8) : ""; const isMultiSelected = isSelected && selectedNodeIds.length > 1; const compareSource = useMemo(() => { const targetIdentity = normalizeImageIdentityUrl(data.src || ""); if (!targetIdentity) return ""; const candidates: string[] = []; const pushCandidate = (value: unknown) => { const raw = String(value || "").trim(); if (!raw) return; candidates.push(raw); }; const visited = new Set([node.id]); const queue = Array.isArray(node.connections) ? [...node.connections] : []; let safety = 0; while (queue.length > 0 && safety < 120) { safety += 1; const sourceNodeId = queue.shift(); if (!sourceNodeId || visited.has(sourceNodeId)) continue; visited.add(sourceNodeId); const sourceNode = allNodes.find((item) => item.id === sourceNodeId); if (!sourceNode || sourceNode.type !== "image") continue; const sourceData = (sourceNode.data as any) || {}; pushCandidate(sourceData.src); pushCandidate(sourceData.originalSrc); pushCandidate(sourceData.metadata?.compareSourceUrl); if ( Array.isArray(sourceNode.connections) && sourceNode.connections.length > 0 ) { queue.push(...sourceNode.connections); } } pushCandidate(data.originalSrc); pushCandidate(data.metadata?.compareSourceUrl); for (const candidate of candidates) { const identity = normalizeImageIdentityUrl(candidate); if (!identity) continue; if (identity !== targetIdentity) { return candidate; } } return ""; }, [ allNodes, data.metadata, data.originalSrc, data.src, node.connections, node.id, ]); const hasCompareSource = Boolean(data.src) && Boolean(compareSource); const compareButtonVisualSize = useMemo(() => { const minSide = Math.max( 1, Math.min(node.size.width || 0, node.size.height || 0) ); return Math.round(Math.max(24, Math.min(32, minSide * 0.09))); }, [node.size.height, node.size.width]); const compareButtonHitSize = useMemo( () => Math.max(34, compareButtonVisualSize + 8), [compareButtonVisualSize] ); const compareButtonIconSize = useMemo( () => Math.round(Math.max(12, Math.min(16, compareButtonVisualSize * 0.5))), [compareButtonVisualSize] ); const compareButtonInset = useMemo( () => Math.max(6, Math.min(10, Math.round(compareButtonVisualSize * 0.22))), [compareButtonVisualSize] ); const displayImageWidth = useMemo( () => Math.max(640, Math.min(2200, Math.round((node.size.width || 320) * 2))), [node.size.width] ); const displayImageSrc = useMemo( () => buildImageProxyUrl(data.src, { width: displayImageWidth, quality: 86, format: "webp", }), [data.src, displayImageWidth] ); const fullscreenPreviewSrc = useMemo(() => { const originalUrl = inferOriginalImageUrl(data.src || ""); return buildImageProxyUrl(originalUrl || data.src || "", { delivery: "proxy", width: 2400, quality: 90, format: "webp", }); }, [data.src]); const displayCompareSrc = useMemo( () => buildImageProxyUrl(compareSource, { width: displayImageWidth, quality: 86, format: "webp", }), [compareSource, displayImageWidth] ); const shouldRequestDisplayImage = hasEnteredViewport || isSelected || isCompareMode || boxCutoutMode || cropPanelOpen || isThisNodePicking || fullscreenPreviewOpen || annotatorOpen || resizeAnnotatorOpen || textEditPanelOpen || imageAdjustPanelOpen || flipRotatePanelOpen || anglePanelOpen; const [loadedResolution, setLoadedResolution] = useState<{ width: number; height: number; } | null>(null); const metadataResolution = useMemo(() => { const rawWidth = Number((data.metadata as any)?.originalWidth ?? 0); const rawHeight = Number((data.metadata as any)?.originalHeight ?? 0); const width = Number.isFinite(rawWidth) ? Math.round(rawWidth) : 0; const height = Number.isFinite(rawHeight) ? Math.round(rawHeight) : 0; if (width > 0 && height > 0) { return { width, height }; } return null; }, [data.metadata]); const resolutionLabel = useMemo(() => { const source = metadataResolution || loadedResolution; if (!source) return ""; return `${source.width} x ${source.height}`; }, [loadedResolution, metadataResolution]); const angleSourceResolution = useMemo(() => { const source = metadataResolution || loadedResolution; if (source?.width && source?.height) { return source; } return { width: Math.max(1, Math.round(node.size.width || 1)), height: Math.max(1, Math.round(node.size.height || 1)), }; }, [loadedResolution, metadataResolution, node.size.height, node.size.width]); const anglePreviewFrameSize = useMemo( () => fitSizeWithinBox({ sourceWidth: angleSourceResolution.width, sourceHeight: angleSourceResolution.height, maxWidth: anglePanelMode === "subject" ? 236 : 188, maxHeight: anglePanelMode === "subject" ? 196 : 150, minWidth: 96, minHeight: 80, }), [anglePanelMode, angleSourceResolution.height, angleSourceResolution.width] ); const anglePreviewDepth = useMemo( () => Math.round( clampNumber( anglePanelMode === "subject" ? anglePreviewFrameSize.width * 0.18 : anglePreviewFrameSize.width * 0.22, 16, 36 ) ), [anglePanelMode, anglePreviewFrameSize.width] ); const anglePreviewScale = useMemo( () => Number( ( (anglePanelMode === "subject" ? 0.9 : 0.92) + (angleZoom / 100) * (anglePanelMode === "subject" ? 0.46 : 0.34) ).toFixed(3) ), [anglePanelMode, angleZoom] ); const anglePreviewImageSrc = displayImageSrc || data.src; const angleCameraOrbitPosition = useMemo(() => { const horizontalRadians = (angleHorizontalAngle * Math.PI) / 180; const normalizedVertical = (angleVerticalAngle + 30) / 90; const x = Math.sin(horizontalRadians) * 110; const y = -normalizedVertical * 72 + 26; const z = Math.cos(horizontalRadians) * 38; return { x: Number(x.toFixed(2)), y: Number(y.toFixed(2)), z: Number(z.toFixed(2)), }; }, [angleHorizontalAngle, angleVerticalAngle]); const angleCameraConnection = useMemo(() => { const length = Math.sqrt( angleCameraOrbitPosition.x * angleCameraOrbitPosition.x + angleCameraOrbitPosition.y * angleCameraOrbitPosition.y ); const angle = (Math.atan2(angleCameraOrbitPosition.y, angleCameraOrbitPosition.x) * 180) / Math.PI; return { angle: Number(angle.toFixed(2)), length: Number(length.toFixed(2)), }; }, [angleCameraOrbitPosition]); const angleOrbitWireframeStyle = useMemo( () => ({ transform: `rotateX(${(-angleVerticalAngle * 0.24) + (anglePanelOpening ? 14 : 0)}deg) rotateY(${(angleHorizontalAngle * 0.34) + (anglePanelOpening ? -34 : 0)}deg) rotateZ(${(angleHorizontalAngle * 0.05) + (anglePanelOpening ? 7 : 0)}deg)`, transformStyle: "preserve-3d", transition: isAnglePreviewDragging ? "none" : `transform ${anglePanelOpening ? 560 : 180}ms cubic-bezier(0.22, 1, 0.36, 1)`, }), [ angleHorizontalAngle, anglePanelOpening, angleVerticalAngle, isAnglePreviewDragging, ] ); const angleCameraSceneScale = useMemo( () => Number((0.94 + (angleZoom / 100) * 0.22).toFixed(3)), [angleZoom] ); const cropImageMetrics = useMemo(() => { if (boxCutoutMetrics) { return { naturalWidth: boxCutoutMetrics.naturalWidth, naturalHeight: boxCutoutMetrics.naturalHeight, }; } const fallback = metadataResolution || loadedResolution; if (!fallback) return null; return { naturalWidth: fallback.width, naturalHeight: fallback.height, }; }, [boxCutoutMetrics, loadedResolution, metadataResolution]); const boxCutoutDraftRect = useMemo(() => { if (!boxCutoutMode || !boxCutoutDragStart || !boxCutoutDragEnd) { return null; } return createNormalizedRect(boxCutoutDragStart, boxCutoutDragEnd); }, [boxCutoutDragEnd, boxCutoutDragStart, boxCutoutMode]); const activeBoxCutoutRect = boxCutoutSelection || boxCutoutDraftRect; const activeBoxCutoutRectStyle = useMemo(() => { if (!boxCutoutMetrics || !activeBoxCutoutRect) return null; return { left: boxCutoutMetrics.offsetX + activeBoxCutoutRect.x * boxCutoutMetrics.renderedWidth, top: boxCutoutMetrics.offsetY + activeBoxCutoutRect.y * boxCutoutMetrics.renderedHeight, width: activeBoxCutoutRect.width * boxCutoutMetrics.renderedWidth, height: activeBoxCutoutRect.height * boxCutoutMetrics.renderedHeight, }; }, [activeBoxCutoutRect, boxCutoutMetrics]); const currentPickerClickStyle = useMemo(() => { if (!boxCutoutMetrics || !currentClick) return null; return { left: boxCutoutMetrics.offsetX + currentClick.x * boxCutoutMetrics.renderedWidth, top: boxCutoutMetrics.offsetY + currentClick.y * boxCutoutMetrics.renderedHeight, }; }, [boxCutoutMetrics, currentClick]); const cropRectStyle = useMemo(() => { if (!boxCutoutMetrics || !cropRect) return null; return { left: boxCutoutMetrics.offsetX + cropRect.x * boxCutoutMetrics.renderedWidth, top: boxCutoutMetrics.offsetY + cropRect.y * boxCutoutMetrics.renderedHeight, width: cropRect.width * boxCutoutMetrics.renderedWidth, height: cropRect.height * boxCutoutMetrics.renderedHeight, }; }, [boxCutoutMetrics, cropRect]); const cropPixelSize = useMemo(() => { if (!cropRect || !cropImageMetrics) { return { width: 0, height: 0 }; } return { width: Math.max( 0, Math.round(cropRect.width * cropImageMetrics.naturalWidth) ), height: Math.max( 0, Math.round(cropRect.height * cropImageMetrics.naturalHeight) ), }; }, [cropImageMetrics, cropRect]); const currentCropAspectRatio = cropRect && cropRect.height > 0 ? cropRect.width / cropRect.height : null; const selectedCropPreset = getCropPresetById(cropPresetId); const effectiveCropAspectRatio = cropLockAspectRatio ? selectedCropPreset?.ratio || currentCropAspectRatio : null; const resetBoxCutoutState = useCallback(() => { setBoxCutoutMode(false); setIsBoxCutoutDrawing(false); setBoxCutoutSelection(null); setBoxCutoutDragStart(null); setBoxCutoutDragEnd(null); }, []); const refreshBoxCutoutMetrics = useCallback(() => { const imageElement = displayImageRef.current; if (!imageElement) { setBoxCutoutMetrics(null); return; } const naturalWidth = imageElement.naturalWidth || metadataResolution?.width || loadedResolution?.width || 0; const naturalHeight = imageElement.naturalHeight || metadataResolution?.height || loadedResolution?.height || 0; const boxWidth = imageElement.clientWidth; const boxHeight = imageElement.clientHeight; if (!naturalWidth || !naturalHeight || !boxWidth || !boxHeight) { setBoxCutoutMetrics(null); return; } const displayScale = Math.min( boxWidth / naturalWidth, boxHeight / naturalHeight ); const renderedWidth = naturalWidth * displayScale; const renderedHeight = naturalHeight * displayScale; setBoxCutoutMetrics({ offsetX: (boxWidth - renderedWidth) / 2, offsetY: (boxHeight - renderedHeight) / 2, renderedWidth, renderedHeight, naturalWidth, naturalHeight, }); }, [loadedResolution, metadataResolution]); const getBoxCutoutPointerPoint = useCallback( (clientX: number, clientY: number) => { const imageElement = displayImageRef.current; if (!imageElement) return null; const currentMetrics = (() => { if ( boxCutoutMetrics && boxCutoutMetrics.renderedWidth > 0 && boxCutoutMetrics.renderedHeight > 0 ) { return boxCutoutMetrics; } const naturalWidth = imageElement.naturalWidth || metadataResolution?.width || loadedResolution?.width || 0; const naturalHeight = imageElement.naturalHeight || metadataResolution?.height || loadedResolution?.height || 0; const boxWidth = imageElement.clientWidth; const boxHeight = imageElement.clientHeight; if (!naturalWidth || !naturalHeight || !boxWidth || !boxHeight) { return null; } const displayScale = Math.min( boxWidth / naturalWidth, boxHeight / naturalHeight ); return { offsetX: (boxWidth - naturalWidth * displayScale) / 2, offsetY: (boxHeight - naturalHeight * displayScale) / 2, renderedWidth: naturalWidth * displayScale, renderedHeight: naturalHeight * displayScale, naturalWidth, naturalHeight, } satisfies ImageDisplayMetrics; })(); if (!currentMetrics) return null; const rect = imageElement.getBoundingClientRect(); if (rect.width <= 0 || rect.height <= 0) return null; // The image node content may be counter-scaled with CSS transforms. // getBoundingClientRect() returns the transformed size, while // object-contain offsets are calculated in the element's local box. // Convert the pointer back into that local coordinate space first. const localX = ((clientX - rect.left) / rect.width) * imageElement.clientWidth; const localY = ((clientY - rect.top) / rect.height) * imageElement.clientHeight; const rawX = localX - currentMetrics.offsetX; const rawY = localY - currentMetrics.offsetY; const clampedX = clampNumber(rawX, 0, currentMetrics.renderedWidth); const clampedY = clampNumber(rawY, 0, currentMetrics.renderedHeight); return { point: { x: currentMetrics.renderedWidth > 0 ? clampedX / currentMetrics.renderedWidth : 0, y: currentMetrics.renderedHeight > 0 ? clampedY / currentMetrics.renderedHeight : 0, } satisfies BoxCutoutPoint, insideImage: rawX >= 0 && rawX <= currentMetrics.renderedWidth && rawY >= 0 && rawY <= currentMetrics.renderedHeight, metrics: currentMetrics, }; }, [boxCutoutMetrics, loadedResolution, metadataResolution] ); // 退出拾取模式时清空状态 useEffect(() => { if (!isThisNodePicking) { setCurrentClick(null); } }, [isThisNodePicking]); useEffect(() => { if (!textEditPanelOpen) { setTextEditItems(normalizeTextEditItems(data.textEditItems)); setDeletedTextItems([]); setTextEditError(null); } }, [data.textEditItems, textEditPanelOpen]); useEffect(() => { if (!isSelected) { setCropPanelOpen(false); setCropRect(null); setCropInteraction(null); setImageAdjustPanelOpen(false); setFlipRotatePanelOpen(false); setAnglePanelOpen(false); setTextEditPanelOpen(false); setIsEditingTitle(false); setPromptDialogOpen(false); resetBoxCutoutState(); } }, [isSelected, resetBoxCutoutState]); useEffect(() => { if (anglePanelOpen) return; anglePreviewDragRef.current = null; setIsAnglePreviewDragging(false); }, [anglePanelOpen]); useEffect(() => { if (!hasCompareSource || isThisNodePicking) { setIsCompareMode(false); } }, [hasCompareSource, isThisNodePicking]); useEffect(() => { if ( (isThisNodePicking || isCompareMode || sceneFusionDialogOpen || promptDialogOpen || notePanelOpen) && (boxCutoutMode || cropPanelOpen) ) { resetBoxCutoutState(); setCropPanelOpen(false); setCropInteraction(null); } }, [ boxCutoutMode, cropPanelOpen, isCompareMode, isThisNodePicking, notePanelOpen, promptDialogOpen, resetBoxCutoutState, sceneFusionDialogOpen, ]); useEffect(() => { if (!boxCutoutMode || typeof window === "undefined") return; const handleKeyDown = (event: KeyboardEvent) => { if (event.key === "Escape") { event.preventDefault(); resetBoxCutoutState(); } }; window.addEventListener("keydown", handleKeyDown); return () => { window.removeEventListener("keydown", handleKeyDown); }; }, [boxCutoutMode, resetBoxCutoutState]); useEffect(() => { if (!cropPanelOpen || typeof window === "undefined") return; const handleKeyDown = (event: KeyboardEvent) => { if (event.key === "Escape") { event.preventDefault(); setCropPanelOpen(false); setCropInteraction(null); } }; window.addEventListener("keydown", handleKeyDown); return () => { window.removeEventListener("keydown", handleKeyDown); }; }, [cropPanelOpen]); useEffect(() => { setLoadedResolution(null); }, [data.src]); useEffect(() => { setHasEnteredViewport(false); }, [data.src]); useEffect(() => { if (!data.src || hasEnteredViewport || typeof window === "undefined") { return; } const element = containerRef.current; if (!element || typeof IntersectionObserver === "undefined") { setHasEnteredViewport(true); return; } const observer = new IntersectionObserver( (entries) => { if (entries.some((entry) => entry.isIntersecting)) { setHasEnteredViewport(true); observer.disconnect(); } }, { root: null, // 轻微提前加载，保证拖动画布时体验顺滑，但不请求远离视口的图片。 rootMargin: "320px", threshold: 0.01, } ); observer.observe(element); return () => observer.disconnect(); }, [data.src, hasEnteredViewport]); useEffect(() => { if (typeof window === "undefined") return; let rafId: number | null = null; const scheduleRefresh = () => { if (rafId !== null) { window.cancelAnimationFrame(rafId); } rafId = window.requestAnimationFrame(() => { refreshBoxCutoutMetrics(); }); }; scheduleRefresh(); window.addEventListener("resize", scheduleRefresh); const resizeObserver = typeof ResizeObserver !== "undefined" ? new ResizeObserver(scheduleRefresh) : null; if (containerRef.current) { resizeObserver?.observe(containerRef.current); } if (displayImageRef.current) { resizeObserver?.observe(displayImageRef.current); } return () => { if (rafId !== null) { window.cancelAnimationFrame(rafId); } window.removeEventListener("resize", scheduleRefresh); resizeObserver?.disconnect(); }; }, [data.src, refreshBoxCutoutMetrics]); const updateCompareSplitByClientX = useCallback((clientX: number) => { const frame = compareFrameRef.current; if (!frame) return; const rect = frame.getBoundingClientRect(); if (rect.width <= 0) return; const rawPercent = ((clientX - rect.left) / rect.width) * 100; setCompareSplitPercent(Math.max(0, Math.min(100, rawPercent))); }, []); useEffect(() => { if (!isCompareMode) return; const handlePointerDownOutside = (event: PointerEvent) => { const target = event.target as Node | null; if (!target) return; const container = containerRef.current; if (container && container.contains(target)) return; setIsCompareMode(false); }; document.addEventListener("pointerdown", handlePointerDownOutside, true); return () => { document.removeEventListener( "pointerdown", handlePointerDownOutside, true ); }; }, [isCompareMode]); useEffect(() => { if (!isEditingTitle) { setDraftTitle(getImageNodeTitle(data, node.id)); } }, [data, isEditingTitle, node.id]); useEffect(() => { if (promptDialogOpen) { setRegeneratePrompt(resolveRegeneratePromptSeed(data)); } }, [data, promptDialogOpen]); useEffect(() => { if (notePanelOpen) { setDraftNote(data.note || ""); } }, [data.note, notePanelOpen]); useEffect(() => { if ( typeof window === "undefined" || !isSelected || isMultiSelected || !data.src || isEditingTitle || sceneFusionDialogOpen || promptDialogOpen || notePanelOpen || boxCutoutMode ) { return; } const toolbarEl = toolbarRef.current; if (!toolbarEl) return; let rafId: number | null = null; const measure = () => { const next = { width: toolbarEl.offsetWidth, height: toolbarEl.offsetHeight, }; setToolbarSize((prev) => Math.abs(prev.width - next.width) < 0.5 && Math.abs(prev.height - next.height) < 0.5 ? prev : next ); }; const scheduleMeasure = () => { if (rafId !== null) window.cancelAnimationFrame(rafId); rafId = window.requestAnimationFrame(measure); }; scheduleMeasure(); window.addEventListener("resize", scheduleMeasure); const resizeObserver = typeof ResizeObserver !== "undefined" ? new ResizeObserver(scheduleMeasure) : null; resizeObserver?.observe(toolbarEl); return () => { window.removeEventListener("resize", scheduleMeasure); resizeObserver?.disconnect(); if (rafId !== null) window.cancelAnimationFrame(rafId); }; }, [ boxCutoutMode, data.src, isEditingTitle, isMultiSelected, isSelected, notePanelOpen, promptDialogOpen, sceneFusionDialogOpen, ]); useEffect(() => { if ( typeof window === "undefined" || !isSelected || isMultiSelected || !data.src || !boxCutoutMode ) { return; } const toolbarEl = boxCutoutToolbarRef.current; if (!toolbarEl) return; let rafId: number | null = null; const measure = () => { const next = { width: toolbarEl.offsetWidth, height: toolbarEl.offsetHeight, }; setBoxCutoutToolbarSize((prev) => Math.abs(prev.width - next.width) < 0.5 && Math.abs(prev.height - next.height) < 0.5 ? prev : next ); }; const scheduleMeasure = () => { if (rafId !== null) window.cancelAnimationFrame(rafId); rafId = window.requestAnimationFrame(measure); }; scheduleMeasure(); window.addEventListener("resize", scheduleMeasure); const resizeObserver = typeof ResizeObserver !== "undefined" ? new ResizeObserver(scheduleMeasure) : null; resizeObserver?.observe(toolbarEl); return () => { window.removeEventListener("resize", scheduleMeasure); resizeObserver?.disconnect(); if (rafId !== null) window.cancelAnimationFrame(rafId); }; }, [boxCutoutMode, data.src, isMultiSelected, isSelected]); // 🆕 处理图片点击标注 const handlePickerClick = useCallback( async (e: React.MouseEvent) => { if (!isThisNodePicking || isPickerLoading || !data.src) return; e.stopPropagation(); e.preventDefault(); const pointerResult = getBoxCutoutPointerPoint(e.clientX, e.clientY); if (!pointerResult?.insideImage) { toast.info("请点击图片内容区域"); return; } const clickX = pointerResult.point.x; const clickY = pointerResult.point.y; setCurrentClick({ x: clickX, y: clickY }); setPickerLoading(true); try { // 在图片上绘制红色标记点 const markedImageBase64 = await drawMarkerOnImage( data.src, clickX, clickY ); const response = await fetch("/api/pick-object", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ imageData: markedImageBase64, clickX, clickY, }), }); if (!response.ok) throw new Error("识别失败"); const result = await response.json(); if (result.success && result.object) { const picked: PickedObject = { imageUrl: data.src, imageNodeId: node.id, clickX, clickY, objectName: result.object.name, objectPosition: result.object.position, confidence: result.object.confidence, boundingBox: result.object.boundingBox, }; addPendingPickedObject(picked); // 标注成功后自动关闭拾取模式，直接生成标签 setPickerMode(false); setCurrentClick(null); toast.success(`已添加: ${result.object.name}`); } else { toast.error(result.error || "未能识别物品"); setCurrentClick(null); } } catch (error) { console.error("物品拾取失败:", error); toast.error("识别失败，请重试"); setCurrentClick(null); } finally { setPickerLoading(false); } }, [ isThisNodePicking, isPickerLoading, data.src, getBoxCutoutPointerPoint, node.id, setPickerLoading, addPendingPickedObject, setPickerMode, ] ); // 🆕 取消标注 const handleCancelPicking = useCallback(() => { setPickerMode(false); }, [setPickerMode]); const handleStartPicking = useCallback( (event?: React.MouseEvent) => { event?.stopPropagation(); if (!data.src) { toast.error("请先上传图片"); return; } if (isProcessing) { toast.info("正在处理中，请稍候..."); return; } setPickerMode(true, node.id); toast.info("点击图片中的物品进行拾取"); }, [data.src, isProcessing, node.id, setPickerMode] ); const handleEnterBoxCutoutMode = useCallback( (event?: React.MouseEvent | React.PointerEvent) => { event?.stopPropagation(); if (!data.src) { toast.error("请先上传图片"); return; } if (isProcessing) { toast.info("正在处理中，请稍候..."); return; } if (isThisNodePicking) { setPickerMode(false); } setIsCompareMode(false); setBoxCutoutSelection(null); setBoxCutoutDragStart(null); setBoxCutoutDragEnd(null); setIsBoxCutoutDrawing(false); setBoxCutoutMode(true); window.requestAnimationFrame(() => { refreshBoxCutoutMetrics(); }); }, [ data.src, isProcessing, isThisNodePicking, refreshBoxCutoutMetrics, setPickerMode, ] ); const handleBoxCutoutPointerDown = useCallback( (event: React.PointerEvent) => { if (!boxCutoutMode || isProcessing) return; event.preventDefault(); event.stopPropagation(); const pointerResult = getBoxCutoutPointerPoint( event.clientX, event.clientY ); if (!pointerResult?.insideImage) { return; } setBoxCutoutSelection(null); setBoxCutoutDragStart(pointerResult.point); setBoxCutoutDragEnd(pointerResult.point); setIsBoxCutoutDrawing(true); event.currentTarget.setPointerCapture?.(event.pointerId); }, [boxCutoutMode, getBoxCutoutPointerPoint, isProcessing] ); const handleBoxCutoutPointerMove = useCallback( (event: React.PointerEvent) => { if (!boxCutoutMode || !isBoxCutoutDrawing) return; event.preventDefault(); event.stopPropagation(); const pointerResult = getBoxCutoutPointerPoint( event.clientX, event.clientY ); if (!pointerResult) return; setBoxCutoutDragEnd(pointerResult.point); }, [boxCutoutMode, getBoxCutoutPointerPoint, isBoxCutoutDrawing] ); const finalizeBoxCutoutSelection = useCallback( (clientX: number, clientY: number) => { if (!boxCutoutMode || !boxCutoutDragStart) { setIsBoxCutoutDrawing(false); return; } const pointerResult = getBoxCutoutPointerPoint(clientX, clientY); if (!pointerResult) { setIsBoxCutoutDrawing(false); setBoxCutoutDragStart(null); setBoxCutoutDragEnd(null); return; } const nextRect = createNormalizedRect( boxCutoutDragStart, pointerResult.point ); const nextWidthPx = nextRect.width * pointerResult.metrics.naturalWidth; const nextHeightPx = nextRect.height * pointerResult.metrics.naturalHeight; if ( nextWidthPx >= BOX_CUTOUT_MIN_EDGE_PX && nextHeightPx >= BOX_CUTOUT_MIN_EDGE_PX ) { setBoxCutoutSelection(nextRect); } else { setBoxCutoutSelection(null); } setBoxCutoutDragStart(null); setBoxCutoutDragEnd(null); setIsBoxCutoutDrawing(false); }, [boxCutoutDragStart, boxCutoutMode, getBoxCutoutPointerPoint] ); const handleBoxCutoutPointerUp = useCallback( (event: React.PointerEvent) => { if (!boxCutoutMode) return; event.preventDefault(); event.stopPropagation(); finalizeBoxCutoutSelection(event.clientX, event.clientY); event.currentTarget.releasePointerCapture?.(event.pointerId); }, [boxCutoutMode, finalizeBoxCutoutSelection] ); const handleBoxCutoutPointerCancel = useCallback( (event: React.PointerEvent) => { if (!boxCutoutMode) return; event.preventDefault(); event.stopPropagation(); setIsBoxCutoutDrawing(false); setBoxCutoutDragStart(null); setBoxCutoutDragEnd(null); event.currentTarget.releasePointerCapture?.(event.pointerId); }, [boxCutoutMode] ); const handleConfirmBoxCutout = useCallback(async () => { if (!data.src) { toast.error("请先上传图片"); return; } if (!boxCutoutSelection) { toast.info("请先框选要抠出的元素"); return; } if (isProcessing) { toast.info("正在处理中，请稍候..."); return; } setIsProcessing(true); const actionName = "框选抠图"; const newNodeId = addNode({ type: "image", position: { x: node.position.x + node.size.width + 20, y: node.position.y, }, size: { width: node.size.width, height: node.size.height }, data: { src: "", status: "generating", prompt: `${actionName}处理中...`, title: `${displayTitle}-${actionName}`, originalSrc: data.src, metadata: { cropRect: boxCutoutSelection, paddingRatio: BOX_CUTOUT_DEFAULT_PADDING_RATIO, }, }, connections: [node.id], }); try { const result = await imageGenerationService.boxCutout({ imageUrl: data.src, cropRect: boxCutoutSelection, paddingRatio: BOX_CUTOUT_DEFAULT_PADDING_RATIO, sourceNodeId: node.id, }); if (result.success && result.data?.url) { updateNode(newNodeId, { data: { src: result.data.url, status: "completed", prompt: `${actionName}结果`, title: `${displayTitle}-${actionName}`, originalSrc: data.src, metadata: { cropRect: boxCutoutSelection, cropRectApplied: result.data.cropRectApplied, paddedCropRectApplied: result.data.paddedCropRectApplied, paddingRatio: BOX_CUTOUT_DEFAULT_PADDING_RATIO, editMode: "box-cutout", }, }, }); toast.success(`${actionName}完成`); } else { updateNode(newNodeId, { data: { src: "", status: "failed", prompt: `${actionName}失败`, title: `${displayTitle}-${actionName}-失败`, originalSrc: data.src, metadata: { cropRect: boxCutoutSelection, paddingRatio: BOX_CUTOUT_DEFAULT_PADDING_RATIO, }, }, }); toast.error(result.error || `${actionName}失败`); } } catch (error) { console.error("框选抠图失败:", error); updateNode(newNodeId, { data: { src: "", status: "failed", prompt: `${actionName}失败`, title: `${displayTitle}-${actionName}-失败`, originalSrc: data.src, metadata: { cropRect: boxCutoutSelection, paddingRatio: BOX_CUTOUT_DEFAULT_PADDING_RATIO, }, }, }); toast.error(`${actionName}失败，请重试`); } finally { setIsProcessing(false); resetBoxCutoutState(); } }, [ addNode, boxCutoutSelection, data.src, displayTitle, isProcessing, node.id, node.position.x, node.position.y, node.size.height, node.size.width, resetBoxCutoutState, updateNode, ]); const animateAddToChat = useCallback(async (previewUrl?: string) => { if (!containerRef.current || typeof window === "undefined") { return false; } if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) { return false; } const target = document.querySelector( '[data-canvas-chat-input-anchor="true"]' ) as HTMLElement | null; if (!target) return false; const animationImageSrc = isHttpImageUrl(previewUrl) ? buildImageProxyUrl(previewUrl || "", { width: 360, quality: 76, format: "webp", }) : isHttpImageUrl(data.src) ? buildImageProxyUrl(data.src, { width: 360, quality: 76, format: "webp", }) : ""; const sourceImage = (containerRef.current.querySelector("img") as HTMLImageElement | null) || containerRef.current; const sourceRect = sourceImage.getBoundingClientRect(); const targetRect = target.getBoundingClientRect(); if ( sourceRect.width <= 0 || sourceRect.height <= 0 || targetRect.width <= 0 || targetRect.height <= 0 ) { return false; } const waitForAnimation = ( animation: Animation | null, fallbackMs: number ) => new Promise((resolve) => { if (!animation) { resolve(); return; } let finished = false; const done = () => { if (finished) return; finished = true; resolve(); }; const timeout = window.setTimeout(done, fallbackMs); animation.addEventListener( "finish", () => { window.clearTimeout(timeout); done(); }, { once: true } ); animation.addEventListener( "cancel", () => { window.clearTimeout(timeout); done(); }, { once: true } ); }); const sourceCenterX = sourceRect.left + sourceRect.width / 2; const sourceCenterY = sourceRect.top + sourceRect.height / 2; const labelText = displayTitle.length > 12 ? `${displayTitle.slice(0, 10)}...` : displayTitle; const tagWidth = Math.min(172, Math.max(112, 58 + labelText.length * 8)); const tagHeight = 34; const tagLeft = Math.min( Math.max(sourceCenterX - tagWidth / 2, 8), window.innerWidth - tagWidth - 8 ); const defaultTagTop = sourceRect.top - 46; const tagTop = defaultTagTop < 10 ? Math.min(sourceRect.bottom + 10, window.innerHeight - tagHeight - 10) : defaultTagTop; const flightTag = document.createElement("div"); flightTag.style.position = "fixed"; flightTag.style.left = `${sourceRect.left}px`; flightTag.style.top = `${sourceRect.top}px`; flightTag.style.width = `${sourceRect.width}px`; flightTag.style.height = `${sourceRect.height}px`; flightTag.style.borderRadius = "14px"; flightTag.style.overflow = "hidden"; flightTag.style.pointerEvents = "none"; flightTag.style.zIndex = "99999"; flightTag.style.background = "#ffffff"; flightTag.style.border = "1px solid rgba(148, 163, 184, 0.24)"; flightTag.style.boxShadow = "0 14px 30px rgba(15, 23, 42, 0.28)"; flightTag.style.transformOrigin = "center center"; flightTag.style.willChange = "transform, opacity, filter"; if (animationImageSrc) { const previewImage = document.createElement("img"); previewImage.src = animationImageSrc; previewImage.alt = ""; previewImage.style.width = "100%"; previewImage.style.height = "100%"; previewImage.style.objectFit = "cover"; flightTag.appendChild(previewImage); } else { const placeholder = document.createElement("div"); placeholder.style.width = "100%"; placeholder.style.height = "100%"; placeholder.style.background = "linear-gradient(135deg, rgba(15,23,42,0.06), rgba(59,130,246,0.14))"; flightTag.appendChild(placeholder); } document.body.appendChild(flightTag); const compressDx = tagLeft + tagWidth / 2 - sourceCenterX; const compressDy = tagTop + tagHeight / 2 - sourceCenterY; const compressScaleX = tagWidth / sourceRect.width; const compressScaleY = tagHeight / sourceRect.height; const compressAnimation = flightTag.animate( [ { transform: "translate(0px, 0px) scale(1, 1)", borderRadius: "14px", boxShadow: "0 14px 30px rgba(15, 23, 42, 0.28)", }, { offset: 0.72, transform: `translate(${compressDx * 1.03}px, ${compressDy * 1.03}px) scale(${compressScaleX * 1.05}, ${compressScaleY * 1.08})`, borderRadius: "999px", boxShadow: "0 10px 24px rgba(59, 130, 246, 0.24)", }, { transform: `translate(${compressDx}px, ${compressDy}px) scale(${compressScaleX}, ${compressScaleY})`, borderRadius: "999px", boxShadow: "0 8px 20px rgba(59, 130, 246, 0.2)", }, ], { duration: 320, easing: "cubic-bezier(0.2, 0.9, 0.2, 1.2)", fill: "forwards", } ); await waitForAnimation(compressAnimation, 420); flightTag.style.left = `${tagLeft}px`; flightTag.style.top = `${tagTop}px`; flightTag.style.width = `${tagWidth}px`; flightTag.style.height = `${tagHeight}px`; flightTag.style.transform = "none"; flightTag.style.borderRadius = "999px"; flightTag.style.boxShadow = "0 8px 20px rgba(59, 130, 246, 0.2)"; flightTag.style.display = "flex"; flightTag.style.alignItems = "center"; flightTag.style.gap = "6px"; flightTag.style.padding = "4px 10px 4px 4px"; flightTag.style.background = "rgba(255,255,255,0.96)"; flightTag.style.backdropFilter = "blur(6px)"; flightTag.innerHTML = ""; const chipImage = document.createElement(animationImageSrc ? "img" : "span"); if (animationImageSrc && chipImage instanceof HTMLImageElement) { chipImage.src = animationImageSrc; chipImage.alt = ""; } chipImage.style.width = "24px"; chipImage.style.height = "24px"; chipImage.style.objectFit = "cover"; chipImage.style.borderRadius = "999px"; chipImage.style.border = "1px solid rgba(148, 163, 184, 0.35)"; chipImage.style.background = "rgba(59, 130, 246, 0.12)"; const chipLabel = document.createElement("span"); chipLabel.textContent = labelText || "图片"; chipLabel.style.fontSize = "12px"; chipLabel.style.fontWeight = "500"; chipLabel.style.color = "rgb(51, 65, 85)"; chipLabel.style.whiteSpace = "nowrap"; chipLabel.style.overflow = "hidden"; chipLabel.style.textOverflow = "ellipsis"; flightTag.appendChild(chipImage); flightTag.appendChild(chipLabel); const tagCenterX = tagLeft + tagWidth / 2; const tagCenterY = tagTop + tagHeight / 2; const targetCenterX = targetRect.left + targetRect.width / 2; const targetCenterY = targetRect.top + targetRect.height * 0.55; const flyDx = targetCenterX - tagCenterX; const flyDy = targetCenterY - tagCenterY; const flyAnimation = flightTag.animate( [ { transform: "translate(0px, 0px) scale(1)", opacity: 1, filter: "blur(0px)", }, { offset: 0.55, transform: `translate(${flyDx * 0.64}px, ${flyDy * 0.62 - 46}px) scale(0.94)`, opacity: 0.98, filter: "blur(0px)", }, { offset: 0.84, transform: `translate(${flyDx + 9}px, ${flyDy - 7}px) scale(0.74)`, opacity: 0.82, filter: "blur(0.4px)", }, { transform: `translate(${flyDx}px, ${flyDy}px) scale(0.64)`, opacity: 0.15, filter: "blur(1.2px)", }, ], { duration: 760, easing: "cubic-bezier(0.22, 1, 0.36, 1)", fill: "forwards", } ); target.animate( [ { boxShadow: "0 0 0 0 rgba(59,130,246,0)", transform: "scale(1)" }, { offset: 0.58, boxShadow: "0 0 0 8px rgba(59,130,246,0.14)", transform: "scale(1.02)", }, { boxShadow: "0 0 0 0 rgba(59,130,246,0)", transform: "scale(1)" }, ], { duration: 720, easing: "cubic-bezier(0.2, 0.9, 0.2, 1.2)" } ); await waitForAnimation(flyAnimation, 860); flightTag.remove(); return true; }, [data.src, displayTitle]); const handleAddToChat = useCallback(async () => { if (!data.src || isProcessing || isAddingToChat) return; setIsAddingToChat(true); try { const attachment = await resolveChatAttachmentFromImageSrc( data.src, displayTitle ); await animateAddToChat(attachment.url); addPendingChatAttachment({ url: attachment.url, name: displayTitle, contentType: attachment.contentType, }); toast.success("已添加到对话框"); } catch (error) { console.error("[CanvasImageNode] add to chat failed:", error); toast.error(error instanceof Error ? error.message : "添加到对话失败"); } finally { setIsAddingToChat(false); } }, [ addPendingChatAttachment, animateAddToChat, data.src, displayTitle, isAddingToChat, isProcessing, ]); const getFloatingViewportBounds = (toolbarHeight: number) => { const viewportPadding = 12; let unsafeBottomTop = window.innerHeight; const bottomOverlaySelectors = ['[data-canvas-floating-toolbar="true"]']; for (const selector of bottomOverlaySelectors) { const elements = Array.from( document.querySelectorAll(selector) ); for (const element of elements) { const style = window.getComputedStyle(element); if (style.display === "none" || style.visibility === "hidden") continue; const overlayRect = element.getBoundingClientRect(); if (overlayRect.width <= 0 || overlayRect.height <= 0) continue; if (overlayRect.bottom <= 0 || overlayRect.top >= window.innerHeight) continue; if (overlayRect.top < window.innerHeight * 0.55) continue; unsafeBottomTop = Math.min(unsafeBottomTop, overlayRect.top); } } const safeBottom = Math.max( viewportPadding, Math.min( window.innerHeight - viewportPadding, unsafeBottomTop - viewportPadding ) ); const stageElement = document.querySelector( '[data-canvas-stage="true"]' ) as HTMLElement | null; const panelElement = document.querySelector( '[data-canvas-right-panel="true"]' ) as HTMLElement | null; let safeLeft = viewportPadding; let safeRight = window.innerWidth - viewportPadding; if (stageElement) { const stageRect = stageElement.getBoundingClientRect(); if (stageRect.width > 0) { safeLeft = Math.max(safeLeft, stageRect.left + viewportPadding); safeRight = Math.min(safeRight, stageRect.right - viewportPadding); } } if (panelElement) { const panelRect = panelElement.getBoundingClientRect(); if (panelRect.width > 0 && panelRect.left < window.innerWidth) { safeRight = Math.min(safeRight, panelRect.left - viewportPadding); } } if (safeRight <= safeLeft + 8) { safeLeft = viewportPadding; safeRight = window.innerWidth - viewportPadding; } return { viewportPadding, safeBottom, safeLeft, safeRight, maxTop: Math.max(viewportPadding, safeBottom - toolbarHeight), }; }; // 获取工具栏位置 - 在渲染时直接计算 const getToolbarPosition = () => { if (containerRef.current && typeof window !== "undefined") { const rect = containerRef.current.getBoundingClientRect(); const toolbarWidth = Math.max( 280, (toolbarSize.width || 980) * FLOATING_TOOLBAR_SCALE ); const toolbarHeight = Math.max( 42, (toolbarSize.height || 60) * FLOATING_TOOLBAR_SCALE ); const titleSafeHeight = 34; const gap = 12; const { viewportPadding, maxTop, safeLeft, safeRight } = getFloatingViewportBounds(toolbarHeight); let top = rect.top - toolbarHeight - titleSafeHeight - gap; if (top < viewportPadding) { top = rect.bottom + gap; } top = Math.min(Math.max(top, viewportPadding), maxTop); const maxToolbarWidth = Math.max(180, safeRight - safeLeft); const effectiveToolbarWidth = Math.min(toolbarWidth, maxToolbarWidth); let left = rect.left + rect.width / 2 - effectiveToolbarWidth / 2; if (effectiveToolbarWidth >= maxToolbarWidth - 1) { left = safeLeft; } else { left = Math.min( Math.max(left, safeLeft), safeRight - effectiveToolbarWidth ); } return { top, left, maxWidth: maxToolbarWidth, }; } return { top: 0, left: 0, maxWidth: 480 }; }; const getBoxCutoutToolbarPosition = () => { if (containerRef.current && typeof window !== "undefined") { const rect = containerRef.current.getBoundingClientRect(); const toolbarWidth = Math.max( 240, (boxCutoutToolbarSize.width || 460) * FLOATING_TOOLBAR_SCALE ); const toolbarHeight = Math.max( 42, (boxCutoutToolbarSize.height || 60) * FLOATING_TOOLBAR_SCALE ); const gap = 14; const { viewportPadding, safeBottom, safeLeft, safeRight, maxTop } = getFloatingViewportBounds(toolbarHeight); let top = rect.bottom + gap; if (top + toolbarHeight > safeBottom) { top = rect.top - toolbarHeight - gap; } top = Math.min(Math.max(top, viewportPadding), maxTop); const maxToolbarWidth = Math.max(180, safeRight - safeLeft); const effectiveToolbarWidth = Math.min(toolbarWidth, maxToolbarWidth); let left = rect.left + rect.width / 2 - effectiveToolbarWidth / 2; if (effectiveToolbarWidth >= maxToolbarWidth - 1) { left = safeLeft; } else { left = Math.min( Math.max(left, safeLeft), safeRight - effectiveToolbarWidth ); } return { top, left, maxWidth: maxToolbarWidth, }; } return { top: 0, left: 0, maxWidth: 460 }; }; const getImageAdjustPanelPosition = () => { if (!containerRef.current || typeof window === "undefined") { return { top: 0, left: 0 }; } const rect = containerRef.current.getBoundingClientRect(); const panelWidth = 520 * IMAGE_EDIT_PANEL_SCALE; const panelHeight = 760 * IMAGE_EDIT_PANEL_SCALE; const spacing = 18; const maxTop = Math.max(12, window.innerHeight - panelHeight); let left = rect.right + spacing; if (left + panelWidth > window.innerWidth - 12) { left = Math.max(12, rect.left - panelWidth - spacing); } const top = Math.min(Math.max(12, rect.top + 10), maxTop); return { top, left }; }; const getCropPanelPosition = () => { if (!containerRef.current || typeof window === "undefined") { return { top: 0, left: 0 }; } const rect = containerRef.current.getBoundingClientRect(); const panelWidth = 474 * IMAGE_EDIT_PANEL_SCALE; const panelHeight = 980 * IMAGE_EDIT_PANEL_SCALE; const spacing = 16; const maxTop = Math.max(12, window.innerHeight - panelHeight); let left = rect.right + spacing; if (left + panelWidth > window.innerWidth - 12) { left = Math.max(12, rect.left - panelWidth - spacing); } const top = Math.min(Math.max(12, rect.top - 4), maxTop); return { top, left }; }; const getFlipRotatePanelPosition = () => { if (!containerRef.current || typeof window === "undefined") { return { top: 0, left: 0, maxWidth: 660 * IMAGE_EDIT_PANEL_SCALE }; } const rect = containerRef.current.getBoundingClientRect(); const panelWidth = 640 * IMAGE_EDIT_PANEL_SCALE; const panelHeight = 84 * IMAGE_EDIT_PANEL_SCALE; const gap = 18; const titleSafeHeight = 34; const { viewportPadding, safeLeft, safeRight, maxTop } = getFloatingViewportBounds(panelHeight); let top = rect.top - panelHeight - titleSafeHeight - gap; if (top < viewportPadding) { top = rect.bottom + gap; } top = Math.min(Math.max(top, viewportPadding), maxTop); const maxPanelWidth = Math.max(220, safeRight - safeLeft); const effectivePanelWidth = Math.min(panelWidth, maxPanelWidth); let left = rect.left + rect.width / 2 - effectivePanelWidth / 2; if (effectivePanelWidth >= maxPanelWidth - 1) { left = safeLeft; } else { left = Math.min(Math.max(left, safeLeft), safeRight - effectivePanelWidth); } return { top, left, maxWidth: maxPanelWidth, }; }; const getTextPanelPosition = () => { if (!containerRef.current || typeof window === "undefined") { return { top: 0, left: 0 }; } const rect = containerRef.current.getBoundingClientRect(); const panelWidth = 360; const spacing = 12; const maxTop = Math.max(12, window.innerHeight - 460); let left = rect.right + spacing; if (left + panelWidth > window.innerWidth - 12) { left = Math.max(12, rect.left - panelWidth - spacing); } const top = Math.min(Math.max(12, rect.top), maxTop); return { top, left }; }; const getAnglePanelPosition = () => { if (!containerRef.current || typeof window === "undefined") { return { top: 0, left: 0 }; } const rect = containerRef.current.getBoundingClientRect(); const panelWidth = ANGLE_PANEL_SOURCE_WIDTH * ANGLE_PANEL_SCALE; const panelHeight = ANGLE_PANEL_SOURCE_HEIGHT * ANGLE_PANEL_SCALE; const spacing = 16; const maxTop = Math.max(12, window.innerHeight - panelHeight); let left = rect.right + spacing; if (left + panelWidth > window.innerWidth - 12) { left = Math.max(12, rect.left - panelWidth - spacing); } const top = Math.min(Math.max(12, rect.top - 8), maxTop); return { top, left }; }; const handleResetAnglePanel = useCallback(() => { setAnglePanelMode("camera"); setAngleHorizontalAngle(-50); setAngleVerticalAngle(-30); setAngleZoom(50); }, []); const handleAnglePreviewPointerDown = useCallback( (event: React.PointerEvent) => { if (isApplyingAngleEdit) return; anglePreviewDragRef.current = { pointerId: event.pointerId, startX: event.clientX, startY: event.clientY, startHorizontalAngle: angleHorizontalAngle, startVerticalAngle: angleVerticalAngle, }; setIsAnglePreviewDragging(true); event.currentTarget.setPointerCapture?.(event.pointerId); event.preventDefault(); event.stopPropagation(); }, [angleHorizontalAngle, angleVerticalAngle, isApplyingAngleEdit] ); const handleAnglePreviewPointerMove = useCallback( (event: React.PointerEvent) => { const dragState = anglePreviewDragRef.current; if (!dragState || dragState.pointerId !== event.pointerId) return; const deltaX = event.clientX - dragState.startX; const deltaY = event.clientY - dragState.startY; setAngleHorizontalAngle( clampNumber( dragState.startHorizontalAngle + deltaX * ANGLE_PREVIEW_HORIZONTAL_DRAG_MULTIPLIER, -180, 180 ) ); setAngleVerticalAngle( clampNumber( dragState.startVerticalAngle - deltaY * ANGLE_PREVIEW_VERTICAL_DRAG_MULTIPLIER, -30, 60 ) ); event.preventDefault(); event.stopPropagation(); }, [] ); const handleAnglePreviewPointerEnd = useCallback( (event: React.PointerEvent) => { if (anglePreviewDragRef.current?.pointerId !== event.pointerId) return; anglePreviewDragRef.current = null; setIsAnglePreviewDragging(false); event.currentTarget.releasePointerCapture?.(event.pointerId); event.preventDefault(); event.stopPropagation(); }, [] ); const handleApplyFlipRotate = useCallback( async (action: FlipRotateEditAction) => { if (!data.src) { toast.error("请先上传图片"); return; } if (isApplyingFlipRotate) { return; } if (action === "reset") { if (!hasFlipRotateReset) { toast.info("当前图片没有可恢复的翻转记录"); return; } const nextMetadata = data.metadata && typeof data.metadata === "object" ? { ...(data.metadata as Record) } : {}; delete nextMetadata.flipRotateOriginalSrc; delete nextMetadata.flipRotateLastAction; delete nextMetadata.flipRotateUpdatedAt; updateNode(node.id, { data: { ...data, src: flipRotateOriginalSrc, status: "completed", metadata: Object.keys(nextMetadata).length > 0 ? nextMetadata : undefined, }, }); toast.success("已恢复翻转前图片"); return; } setIsApplyingFlipRotate(true); setIsProcessing(true); try { const nextUrl = await renderAndUploadFlippedImage( data.src, action, `${displayTitle}-${action === "horizontal" ? "水平翻转" : "垂直翻转"}` ); updateNode(node.id, { data: { ...data, src: nextUrl, status: "completed", originalSrc: data.originalSrc || data.src, metadata: { ...(data.metadata || {}), flipRotateOriginalSrc: flipRotateOriginalSrc || data.src, flipRotateLastAction: action, flipRotateUpdatedAt: new Date().toISOString(), }, }, }); toast.success(action === "horizontal" ? "已完成水平翻转" : "已完成垂直翻转"); } catch (error) { const message = error instanceof Error ? error.message : "翻转失败"; toast.error(message); } finally { setIsApplyingFlipRotate(false); setIsProcessing(false); } }, [ data, displayTitle, flipRotateOriginalSrc, hasFlipRotateReset, isApplyingFlipRotate, node.id, updateNode, ] ); const handleApplyAngleEdit = useCallback(async () => { if (!data.src) { toast.error("请先上传图片"); return; } if (!isHttpImageUrl(data.src)) { toast.error("仅支持 URL 图片，不允许 base64 传输"); return; } if (isApplyingAngleEdit) { return; } setIsApplyingAngleEdit(true); setIsProcessing(true); const newNodeId = addNode({ type: "image", position: { x: node.position.x + node.size.width + 20, y: node.position.y, }, size: { width: node.size.width, height: node.size.height }, data: { src: "", status: "generating", prompt: "多视角处理中...", title: `${displayTitle}-多视角`, originalSrc: data.src, metadata: { angleEditSettings: { mode: anglePanelMode, horizontalAngle: Math.round(angleHorizontalAngle), verticalAngle: Math.round(angleVerticalAngle), zoom: Math.round(angleZoom), }, }, }, connections: [node.id], }); try { const result = await imageGenerationService.editAngle({ imageUrl: data.src, horizontalAngle: normalizeAnglePanelHorizontalAngle( Math.round(angleHorizontalAngle) ), verticalAngle: Math.round(angleVerticalAngle), zoom: mapAnglePanelZoomToApi(angleZoom), }); if (!result.success || !result.data?.url) { throw new Error(result.error || "多视角生成失败"); } updateNode(newNodeId, { data: { src: result.data.url, status: "completed", prompt: result.data.prompt || "多视角结果", title: `${displayTitle}-多视角`, originalSrc: data.src, metadata: { angleEditSettings: { mode: anglePanelMode, horizontalAngle: Math.round(angleHorizontalAngle), verticalAngle: Math.round(angleVerticalAngle), zoom: Math.round(angleZoom), }, angles: result.data.angles || null, }, }, }); updateNode(node.id, { data: { ...data, metadata: { ...(data.metadata || {}), angleEditSettings: { mode: anglePanelMode, horizontalAngle: Math.round(angleHorizontalAngle), verticalAngle: Math.round(angleVerticalAngle), zoom: Math.round(angleZoom), }, }, }, }); selectNode(newNodeId); setAnglePanelOpen(false); toast.success("多视角结果已生成"); } catch (error) { const message = error instanceof Error ? error.message : "多视角生成失败"; updateNode(newNodeId, { data: { src: "", status: "failed", prompt: "多视角生成失败", title: `${displayTitle}-多视角失败`, originalSrc: data.src, }, }); toast.error(message); } finally { setIsApplyingAngleEdit(false); setIsProcessing(false); } }, [ addNode, angleHorizontalAngle, anglePanelMode, angleVerticalAngle, angleZoom, data, displayTitle, isApplyingAngleEdit, node.id, node.position.x, node.position.y, node.size.height, node.size.width, selectNode, updateNode, ]); const handleSaveTitle = useCallback(() => { const nextTitle = normalizeImageTitle(draftTitle) || displayTitle; updateNode(node.id, { data: { ...data, title: nextTitle, }, }); setDraftTitle(nextTitle); setIsEditingTitle(false); toast.success("图片名称已更新"); }, [data, displayTitle, draftTitle, node.id, updateNode]); const handleOpenImageAdjustPanel = useCallback(() => { setCropPanelOpen(false); setCropInteraction(null); setFlipRotatePanelOpen(false); setAnglePanelOpen(false); setTextEditPanelOpen(false); setNotePanelOpen(false); resetBoxCutoutState(); setImageAdjustTab("light"); setImageAdjustmentsDraft(storedImageAdjustments); setImageAdjustPanelOpen(true); }, [resetBoxCutoutState, storedImageAdjustments]); const handleResetImageAdjustments = useCallback(() => { setImageAdjustmentsDraft(DEFAULT_IMAGE_ADJUSTMENTS); }, []); const handleOpenCropPanel = useCallback(() => { setImageAdjustPanelOpen(false); setFlipRotatePanelOpen(false); setAnglePanelOpen(false); setTextEditPanelOpen(false); setNotePanelOpen(false); resetBoxCutoutState(); setCropInteraction(null); setCropPanelOpen(true); window.requestAnimationFrame(() => { refreshBoxCutoutMetrics(); }); }, [refreshBoxCutoutMetrics, resetBoxCutoutState]); const handleToggleCropGroup = useCallback((groupKey: CropPanelGroupKey) => { setCropExpandedGroups((prev) => ({ ...prev, [groupKey]: !prev[groupKey], })); }, []); const handleSelectCropPreset = useCallback((presetId: string) => { const preset = getCropPresetById(presetId); if (!preset) return; const centerX = cropRect ? cropRect.x + cropRect.width / 2 : 0.5; const centerY = cropRect ? cropRect.y + cropRect.height / 2 : 0.5; setCropPresetId(preset.id); setCropLockAspectRatio(true); setCropRect(createCenteredCropRectForAspect(preset.ratio, centerX, centerY)); }, [cropRect]); const handleChangeCropDimension = useCallback( (dimension: "width" | "height", rawValue: string) => { if (!cropRect || !cropImageMetrics) return; const parsed = Number(rawValue); if (!Number.isFinite(parsed) || parsed < BOX_CUTOUT_MIN_EDGE_PX) { return; } const naturalWidth = cropImageMetrics.naturalWidth; const naturalHeight = cropImageMetrics.naturalHeight; if (!naturalWidth || !naturalHeight) return; let nextWidth = dimension === "width" ? parsed : cropPixelSize.width; let nextHeight = dimension === "height" ? parsed : cropPixelSize.height; const lockedAspect = cropLockAspectRatio && (selectedCropPreset?.ratio || (currentCropAspectRatio && Number.isFinite(currentCropAspectRatio) ? currentCropAspectRatio : null)); if (lockedAspect) { if (dimension === "width") { nextHeight = Math.round(nextWidth / lockedAspect); } else { nextWidth = Math.round(nextHeight * lockedAspect); } } nextWidth = clampNumber(nextWidth, BOX_CUTOUT_MIN_EDGE_PX, naturalWidth); nextHeight = clampNumber(nextHeight, BOX_CUTOUT_MIN_EDGE_PX, naturalHeight); const centerX = cropRect.x + cropRect.width / 2; const centerY = cropRect.y + cropRect.height / 2; let normalizedWidth = nextWidth / naturalWidth; let normalizedHeight = nextHeight / naturalHeight; if (lockedAspect) { const fitted = createCenteredCropRectForAspect(lockedAspect, centerX, centerY); const maxWidth = fitted.width * naturalWidth; const maxHeight = fitted.height * naturalHeight; if (nextWidth > maxWidth || nextHeight > maxHeight) { normalizedWidth = fitted.width; normalizedHeight = fitted.height; } } setCropRect( createCenteredCropRectFromSize( centerX, centerY, normalizedWidth, normalizedHeight ) ); }, [ cropImageMetrics, cropLockAspectRatio, cropPixelSize.height, cropPixelSize.width, cropRect, currentCropAspectRatio, selectedCropPreset, ] ); const handleCropPointerDown = useCallback( (event: React.PointerEvent) => { if (!cropRect || !cropPanelOpen || isApplyingCrop) return; const target = event.target as HTMLElement | null; const interactive = target?.closest("[data-crop-handle]"); const handle = (interactive?.dataset.cropHandle as CropInteractionHandle | undefined) || null; if (!handle) return; const pointerResult = getBoxCutoutPointerPoint( event.clientX, event.clientY ); if (!pointerResult?.insideImage) return; event.preventDefault(); event.stopPropagation(); setCropInteraction({ handle, pointerId: event.pointerId, startPoint: pointerResult.point, startRect: cropRect, }); event.currentTarget.setPointerCapture?.(event.pointerId); }, [cropPanelOpen, cropRect, getBoxCutoutPointerPoint, isApplyingCrop] ); const handleCropPointerMove = useCallback( (event: React.PointerEvent) => { if (!cropInteraction || !cropImageMetrics) return; const pointerResult = getBoxCutoutPointerPoint( event.clientX, event.clientY ); if (!pointerResult) return; event.preventDefault(); event.stopPropagation(); const minSize = getNormalizedMinCropSize( cropImageMetrics.naturalWidth, cropImageMetrics.naturalHeight ); setCropRect( updateCropRectWithPointer({ aspectRatio: effectiveCropAspectRatio, handle: cropInteraction.handle, minHeight: minSize.height, minWidth: minSize.width, pointer: pointerResult.point, startPoint: cropInteraction.startPoint, startRect: cropInteraction.startRect, }) ); }, [cropImageMetrics, cropInteraction, effectiveCropAspectRatio, getBoxCutoutPointerPoint] ); const handleCropPointerUp = useCallback( (event: React.PointerEvent) => { if (!cropInteraction) return; event.preventDefault(); event.stopPropagation(); setCropInteraction(null); event.currentTarget.releasePointerCapture?.(cropInteraction.pointerId); }, [cropInteraction] ); const handleCropPointerCancel = useCallback( (event: React.PointerEvent) => { if (!cropInteraction) return; event.preventDefault(); event.stopPropagation(); setCropInteraction(null); event.currentTarget.releasePointerCapture?.(cropInteraction.pointerId); }, [cropInteraction] ); const handleApplyCrop = useCallback(async () => { if (!data.src || !cropRect) { toast.error("当前没有可用的裁剪区域"); return; } if (isApplyingCrop) { return; } setIsApplyingCrop(true); setIsProcessing(true); try { const result = await renderAndUploadCroppedImage( data.src, cropRect, `${displayTitle}-裁剪` ); updateNode(node.id, { data: { ...data, src: result.url, status: "completed", originalSrc: data.originalSrc || data.src, metadata: { ...(data.metadata || {}), compareSourceUrl: data.src, cropPresetId, cropLockAspectRatio, cropUpdatedAt: new Date().toISOString(), originalWidth: result.width, originalHeight: result.height, }, }, }); setCropPanelOpen(false); setCropInteraction(null); setCropRect(null); toast.success("裁剪已完成"); } catch (error) { const message = error instanceof Error ? error.message : "裁剪失败"; toast.error(message); } finally { setIsApplyingCrop(false); setIsProcessing(false); } }, [ cropLockAspectRatio, cropPresetId, cropRect, data, displayTitle, isApplyingCrop, node.id, updateNode, ]); const handleOpenNotePanel = useCallback(() => { setCropPanelOpen(false); setCropInteraction(null); setImageAdjustPanelOpen(false); setFlipRotatePanelOpen(false); setAnglePanelOpen(false); setTextEditPanelOpen(false); setDraftNote(data.note || ""); setNotePanelOpen(true); }, [data.note]); const handleSaveNote = useCallback(() => { const nextNote = draftNote.trim(); updateNode(node.id, { data: { ...data, note: nextNote || undefined, }, }); setDraftNote(nextNote); setNotePanelOpen(false); toast.success(nextNote ? "备注已保存" : "备注已清除"); }, [data, draftNote, node.id, updateNode]); const detectTextItems = useCallback( async (forceRefresh = false) => { if (!data.src) { toast.error("请先上传图片"); return; } if (!isHttpImageUrl(data.src)) { toast.error("仅支持 URL 图片，不允许 base64 传输"); return; } if (isDetectingText) { return; } if (!forceRefresh && data.textEditSource === data.src) { const cached = normalizeTextEditItems(data.textEditItems); if (cached.length > 0) { setTextEditItems(cached); setDeletedTextItems([]); setTextEditError(null); return; } } setIsDetectingText(true); setTextEditError(null); try { const result = await imageGenerationService.detectCanvasText(data.src); if (!result.success) { throw new Error(result.error || "文字识别失败"); } const detectedItems: ImageTextEditItem[] = (result.data?.items || []) .map((item, index) => { const text = (item.text || "").trim(); if (!text) return null; return { id: item.id || String(index + 1), originalText: text, editedText: text, confidence: item.confidence, } as ImageTextEditItem; }) .filter((item): item is ImageTextEditItem => !!item); setTextEditItems(detectedItems); setDeletedTextItems([]); updateNode(node.id, { data: { ...data, textEditItems: detectedItems, textEditSource: data.src, textEditUpdatedAt: new Date().toISOString(), }, }); if (detectedItems.length === 0) { toast.info("未识别到可编辑文字"); } else { toast.success(`已识别 ${detectedItems.length} 段文字`); } } catch (error) { const message = error instanceof Error ? error.message : "文字识别失败"; setTextEditError(message); toast.error(message); } finally { setIsDetectingText(false); } }, [data, isDetectingText, node.id, updateNode] ); const handleOpenTextEdit = useCallback(async () => { setCropPanelOpen(false); setCropInteraction(null); setImageAdjustPanelOpen(false); setFlipRotatePanelOpen(false); setAnglePanelOpen(false); setNotePanelOpen(false); setTextEditPanelOpen(true); setTextEditError(null); const cached = normalizeTextEditItems(data.textEditItems); if (cached.length > 0 && data.textEditSource === data.src) { setTextEditItems(cached); setDeletedTextItems([]); return; } await detectTextItems(true); }, [data.src, data.textEditItems, data.textEditSource, detectTextItems]); useEffect(() => { if (!imageNodeActionRequest || imageNodeActionRequest.nodeId !== node.id) { return; } clearImageNodeActionRequest(); if (imageNodeActionRequest.action === "box-cutout") { handleEnterBoxCutoutMode(); return; } if (imageNodeActionRequest.action === "text-edit") { void handleOpenTextEdit(); } }, [ clearImageNodeActionRequest, handleEnterBoxCutoutMode, handleOpenTextEdit, imageNodeActionRequest, node.id, ]); const handleTextItemChange = (id: string, value: string) => { setTextEditItems((prev) => prev.map((item) => item.id === id ? { ...item, editedText: value } : item ) ); }; const handleRemoveTextItem = (id: string) => { setTextEditItems((prev) => { const target = prev.find((item) => item.id === id); if (target?.originalText) { setDeletedTextItems((deletedPrev) => { if (deletedPrev.some((item) => item.id === id)) return deletedPrev; return [...deletedPrev, { id, originalText: target.originalText }]; }); } return prev.filter((item) => item.id !== id); }); }; const handleApplyTextEdit = useCallback(async () => { if (!data.src) { toast.error("请先上传图片"); return; } if (!isHttpImageUrl(data.src)) { toast.error("仅支持 URL 图片，不允许 base64 传输"); return; } const changedItems: CanvasTextEditPayloadItem[] = textEditItems .map((item) => { const editedText = item.editedText.trim(); const action: "replace" | "delete" = editedText.length === 0 ? "delete" : "replace"; return { id: item.id, originalText: item.originalText.trim(), editedText, action, }; }) .filter( (item) => item.originalText.length > 0 && (item.action === "delete" || (item.editedText && item.editedText.length > 0 && item.originalText !== item.editedText)) ); const removedItems: CanvasTextEditPayloadItem[] = deletedTextItems .map((item) => ({ id: item.id, originalText: item.originalText.trim(), action: "delete" as const, })) .filter((item) => item.originalText.length > 0); const requestItems = [...changedItems, ...removedItems]; if (requestItems.length === 0) { toast.info("请先修改或删除至少一段文字"); return; } if (isApplyingTextEdit) { return; } setIsApplyingTextEdit(true); setIsProcessing(true); setTextEditError(null); const newNodeId = addNode({ type: "image", position: { x: node.position.x + node.size.width + 20, y: node.position.y, }, size: { width: node.size.width, height: node.size.height }, data: { src: "", status: "generating", prompt: "文字替换处理中...", title: `${displayTitle}-文字替换`, originalSrc: data.src, }, connections: [node.id], }); try { const result = await imageGenerationService.editCanvasText({ imageUrl: data.src, items: requestItems, }); if (!result.success || !result.data?.originalUrl) { throw new Error(result.error || "文字替换失败"); } updateNode(newNodeId, { data: { src: result.data.originalUrl, status: "completed", prompt: "文字替换结果", title: `${displayTitle}-文字替换`, originalSrc: data.src, model: result.data.model, }, }); updateNode(node.id, { data: { ...data, textEditItems, textEditSource: data.src, textEditUpdatedAt: new Date().toISOString(), }, }); setTextEditPanelOpen(false); setDeletedTextItems([]); toast.success("文字替换已完成"); } catch (error) { const message = error instanceof Error ? error.message : "文字替换失败"; setTextEditError(message); updateNode(newNodeId, { data: { src: "", status: "failed", prompt: "文字替换失败", title: `${displayTitle}-文字替换失败`, originalSrc: data.src, }, }); toast.error(message); } finally { setIsApplyingTextEdit(false); setIsProcessing(false); } }, [ addNode, data, deletedTextItems, isApplyingTextEdit, node.id, node.position.x, node.position.y, node.size.height, node.size.width, textEditItems, updateNode, ]); // 触发文件选择 const handleSelectFile = (e: React.MouseEvent) => { e.preventDefault(); e.stopPropagation(); fileInputRef.current?.click(); }; // 处理图片上传 - 上传到存储桶，不使用 Base64 const handleImageUpload = async (e: React.ChangeEvent) => { const file = e.target.files?.[0]; if (!file) return; // 验证文件类型 if (!file.type.startsWith("image/")) { toast.error("请上传图片文件"); return; } // 验证文件大小 (50MB) if (file.size > 50 * 1024 * 1024) { toast.error("图片大小不能超过 50MB"); return; } setIsUploading(true); // 先显示上传中状态 updateNode(node.id, { data: { ...data, status: "generating" }, }); try { const fileBaseName = file.name.replace(/\.[^.]+$/, ""); // 上传到存储桶 const result = await imageGenerationService.uploadImage(file); if (result.success && result.data?.url) { updateNode(node.id, { data: { ...data, src: result.data.url, assetId: result.data.assetId, status: "completed", title: normalizeImageTitle(data.title) || fileBaseName, }, }); toast.success("图片上传成功"); } else { updateNode(node.id, { data: { ...data, status: "failed" }, }); toast.error(result.error || "图片上传失败"); } } catch (error) { console.error("图片上传失败:", error); updateNode(node.id, { data: { ...data, status: "failed" }, }); toast.error("图片上传失败，请重试"); } finally { setIsUploading(false); } // 重置 input e.target.value = ""; }; // 获取操作的中文名称 const getActionName = (action: string): string => { const names: Record = { rmbg: "抠图", watermark: "去印", enhance: "增强", extend: "扩图", crop: "裁剪", adjust: "调整", "flip-rotate": "翻转与旋转", resize: "调尺", angle: "视角", "layer-split": "图层拆分", "scene-fusion": "批量处理", annotate: "标注", "text-edit": "改字", note: "备注", "prompt-regenerate": "重绘", "box-cutout": "框选抠图", }; return names[action] || action; }; const openThreedGenerationDialog = useCallback( (mode: "model" | "world") => { if (!data.src) { toast.error("请先上传图片"); return; } if (!isHttpImageUrl(data.src)) { toast.error("请选择一张可访问的 URL 图片"); return; } if (mode === "model") { if (!tripo3dEnabled) { toast.error("Tripo3D 当前未开启，请先在系统设置中启用"); return; } if (tripoModelOptions.length === 0) { toast.error("当前没有可用的 3D 模型"); return; } } else { if (!worldlabs3dEnabled) { toast.error("World Labs 当前未开启，请先在系统设置中启用"); return; } if (worldModelOptions.length === 0) { toast.error("当前没有可用的 3D 世界模型"); return; } } setThreedGenerationDialogMode(mode); }, [ data.src, tripo3dEnabled, tripoModelOptions.length, worldModelOptions.length, worldlabs3dEnabled, ] ); useEffect(() => { if (!angleEditEnabled && anglePanelOpen) { setAnglePanelOpen(false); } }, [angleEditEnabled, anglePanelOpen]); async function handleConfirmThreedGeneration() { if (threedGenerationDialogMode === "model") { const targetModelVersion = selectedTripoModelEntry?.id || ""; if (!targetModelVersion) { toast.error("当前没有可用的 3D 模型"); return; } setThreedGenerationDialogMode(null); await handleGenerateCanvas3DModel(targetModelVersion); return; } if (threedGenerationDialogMode === "world") { const targetModelVersion = selectedWorldModelEntry?.id || ""; if (!targetModelVersion) { toast.error("当前没有可用的 3D 世界模型"); return; } setThreedGenerationDialogMode(null); await handleGenerateCanvas3DWorld(targetModelVersion); } } // 处理图片编辑操作 - 集成我们现有的 API const handleAction = async (action: string) => { if (!data.src) { toast.error("请先上传图片"); return; } if (isProcessing) { toast.info("正在处理中，请稍候..."); return; } // 对话框类型的操作 if (action === "crop") { handleOpenCropPanel(); return; } if (action === "adjust") { handleOpenImageAdjustPanel(); return; } if (action === "flip-rotate") { setCropPanelOpen(false); setCropInteraction(null); setImageAdjustPanelOpen(false); setAnglePanelOpen(false); setTextEditPanelOpen(false); setNotePanelOpen(false); resetBoxCutoutState(); setFlipRotatePanelOpen(true); return; } if (action === "angle") { if (!angleEditEnabled) { toast.info("多视角功能未开启"); return; } setCropPanelOpen(false); setCropInteraction(null); setImageAdjustPanelOpen(false); setFlipRotatePanelOpen(false); setTextEditPanelOpen(false); setNotePanelOpen(false); resetBoxCutoutState(); setAnglePanelOpening(true); setAnglePanelOpen(true); return; } if (action === "scene-fusion") { setCropPanelOpen(false); setCropInteraction(null); setImageAdjustPanelOpen(false); setFlipRotatePanelOpen(false); if (!batchProcessingEnabled) { toast.info("批量处理功能未开启"); return; } if (!canvasId) { toast.error("当前画布上下文缺失，暂时无法打开批量处理页面"); return; } router.push(`/canvas/${canvasId}/batch`); return; } if (action === "resize") { setCropPanelOpen(false); setCropInteraction(null); setImageAdjustPanelOpen(false); setFlipRotatePanelOpen(false); setResizeAnnotatorOpen(true); return; } if (action === "layer-split") { setCropPanelOpen(false); setCropInteraction(null); setImageAdjustPanelOpen(false); setFlipRotatePanelOpen(false); if (!isLayerSplitEnabled) { toast.info("图层拆分功能未开启"); return; } setIsProcessing(true); try { const result = await imageGenerationService.splitImageLayers(data.src); const layers = result.data?.layers || []; if (!result.success || layers.length === 0) { toast.error(result.error || "图层拆分失败"); return; } const addedLayerCount = handleLayerSplitComplete( layers.map((layer) => ({ originalUrl: layer.originalUrl, title: layer.title, layerIndex: layer.layerIndex, totalLayers: layer.totalLayers, bounds: layer.bounds ?? null, })) ); toast.success(`图层拆分完成，已新增 ${addedLayerCount} 个图层结果`); } catch (error) { console.error("图层拆分失败:", error); toast.error("图层拆分失败"); } finally { setIsProcessing(false); } return; } if (action === "box-cutout") { setCropPanelOpen(false); setCropInteraction(null); setImageAdjustPanelOpen(false); setFlipRotatePanelOpen(false); handleEnterBoxCutoutMode(); return; } if (action === "annotate") { setCropPanelOpen(false); setCropInteraction(null); setImageAdjustPanelOpen(false); setFlipRotatePanelOpen(false); setAnnotatorOpen(true); return; } if (action === "text-edit") { await handleOpenTextEdit(); return; } if (action === "note") { handleOpenNotePanel(); return; } if (action === "prompt-regenerate") { setCropPanelOpen(false); setCropInteraction(null); setImageAdjustPanelOpen(false); setFlipRotatePanelOpen(false); setAnglePanelOpen(false); setRegeneratePrompt(resolveRegeneratePromptSeed(data)); setPromptDialogOpen(true); return; } if (action === "generate-3d-model") { setCropPanelOpen(false); setCropInteraction(null); setImageAdjustPanelOpen(false); setFlipRotatePanelOpen(false); openThreedGenerationDialog("model"); return; } if (action === "generate-3d-world") { setCropPanelOpen(false); setCropInteraction(null); setImageAdjustPanelOpen(false); setFlipRotatePanelOpen(false); openThreedGenerationDialog("world"); return; } const actionName = getActionName(action); setImageAdjustPanelOpen(false); setCropPanelOpen(false); setCropInteraction(null); setFlipRotatePanelOpen(false); setAnglePanelOpen(false); setIsProcessing(true); // 先创建一个"处理中"状态的节点，显示在原图右侧 const newNodeId = addNode({ type: "image", position: { x: node.position.x + node.size.width + 20, y: node.position.y, }, size: { width: node.size.width, height: node.size.height }, data: { src: "", // 暂时没有图片 status: "generating", prompt: `${actionName}处理中...`, title: `${displayTitle}-${actionName}`, originalSrc: data.src, }, connections: [node.id], }); let result; try { switch (action) { case "rmbg": result = await imageGenerationService.removeBackground(data.src); break; case "watermark": result = await imageGenerationService.removeWatermark(data.src); break; case "enhance": result = await imageGenerationService.enhanceImage(data.src); break; case "extend": result = await imageGenerationService.extendImage(data.src); break; default: // 删除创建的节点 if (newNodeId) deleteNode(newNodeId); return; } if (result?.success && result.data?.url) { // 更新节点为完成状态 if (newNodeId) { updateNode(newNodeId, { data: { src: result.data.url, status: "completed", prompt: `${actionName}结果`, title: `${displayTitle}-${actionName}`, originalSrc: data.src, }, }); } toast.success(`${actionName}处理完成`); } else { // 更新节点为失败状态 if (newNodeId) { updateNode(newNodeId, { data: { src: "", status: "failed", prompt: `${actionName}失败`, title: `${displayTitle}-${actionName}-失败`, originalSrc: data.src, }, }); } toast.error(result?.error || "处理失败"); } } catch (error) { console.error(`${action} 处理失败:`, error); // 更新节点为失败状态 if (newNodeId) { updateNode(newNodeId, { data: { src: "", status: "failed", prompt: `${actionName}失败`, title: `${displayTitle}-${actionName}-失败`, originalSrc: data.src, }, }); } toast.error("处理失败，请重试"); } finally { setIsProcessing(false); } }; useEffect(() => { if (typeof window === "undefined") return; const onExternalAction = (event: Event) => { const customEvent = event as CustomEvent<{ nodeId?: string; action?: string; }>; const targetNodeId = customEvent.detail?.nodeId; const action = customEvent.detail?.action; if (!targetNodeId || !action || targetNodeId !== node.id) return; void handleAction(action); }; window.addEventListener( "canvas:image-action", onExternalAction as EventListener ); return () => { window.removeEventListener( "canvas:image-action", onExternalAction as EventListener ); }; }, [handleAction, node.id]); const handleSceneFusionBatchAddToCanvas = useCallback( (imageUrls: string[]) => { const validUrls = imageUrls.filter( (url) => typeof url === "string" && url.trim().length > 0 ); if (validUrls.length === 0) { throw new Error("没有可添加到画布的图片"); } const maxColumns = 3; const gap = 20; const baseX = node.position.x + node.size.width + gap; const baseY = node.position.y; validUrls.forEach((url, index) => { const column = index % maxColumns; const row = Math.floor(index / maxColumns); addNode({ type: "image", position: { x: baseX + column * (node.size.width + gap), y: baseY + row * (node.size.height + gap), }, size: { width: node.size.width, height: node.size.height }, data: { src: url, status: "completed", prompt: "批量处理结果", title: `${displayTitle}-批量${index + 1}`, originalSrc: data.src, }, connections: [node.id], }); }); }, [ addNode, data.src, displayTitle, node.id, node.position.x, node.position.y, node.size.height, node.size.width, ] ); const handleLayerSplitComplete = useCallback( ( layers: Array<{ originalUrl: string; title?: string; layerIndex: number; totalLayers: number; bounds?: { x: number; y: number; width: number; height: number; originalWidth: number; originalHeight: number; coverage: number; } | null; }> ) => { const validLayers = layers.filter( (item) => typeof item?.originalUrl === "string" && item.originalUrl.trim().length > 0 ); if (validLayers.length === 0) { throw new Error("没有可添加到画布的图层结果"); } const isFullFrameLayer = (bounds?: LayerSplitBounds | null) => { if (!bounds) return false; return ( bounds.coverage >= 0.92 && bounds.width >= bounds.originalWidth - 2 && bounds.height >= bounds.originalHeight - 2 ); }; const backgroundLayers = validLayers .filter((layer) => isFullFrameLayer(layer.bounds)) .sort( (left, right) => (left.layerIndex || 0) - (right.layerIndex || 0) ); const subjectLayers = validLayers .filter((layer) => !isFullFrameLayer(layer.bounds)) .sort( (left, right) => (left.layerIndex || 0) - (right.layerIndex || 0) ); const orderedLayers = [...backgroundLayers, ...subjectLayers]; const groupGap = 28; const groupOffsetX = node.size.width + groupGap; const groupOffsetY = 0; orderedLayers.forEach((layer, index) => { const layerTitle = `${displayTitle}-${layer.title || `图层${layer.layerIndex || index + 1}`}`; const bounds = layer.bounds; const fullFrameLayer = isFullFrameLayer(bounds); const targetPosition = { x: node.position.x + groupOffsetX, y: node.position.y + groupOffsetY, }; const targetSize = { width: node.size.width, height: node.size.height }; addNode({ type: "image", position: targetPosition, size: targetSize, data: { src: layer.originalUrl, status: "completed", prompt: `图层拆分结果 ${layer.layerIndex}/${layer.totalLayers}`, title: layerTitle, originalSrc: data.src, metadata: { layerIndex: layer.layerIndex, totalLayers: layer.totalLayers, bounds: layer.bounds, allowOverlap: true, placementMode: "overlay", layerSplitRole: fullFrameLayer ? "background" : "subject", }, }, connections: [node.id], }); }); return orderedLayers.length; }, [ addNode, data.src, displayTitle, node.id, node.position.x, node.position.y, node.size.height, node.size.width, ] ); // 图片标注完成回调 const handleAnnotateComplete = async (annotatedImageUrl: string) => { setAnnotatorOpen(false); // 如果仍然是 base64 格式，先上传到服务器（ImageAnnotator 应该已经处理了，这里作为保护） let finalUrl = annotatedImageUrl; if (annotatedImageUrl.startsWith("data:")) { try { toast.info("正在上传图片..."); const response = await fetch(annotatedImageUrl); const blob = await response.blob(); const formData = new FormData(); formData.append("file", blob, `annotated-${Date.now()}.png`); const uploadResponse = await fetchUploadWithRetry(formData); if (uploadResponse.ok) { const result = await uploadResponse.json(); finalUrl = result.url; } else { toast.error("上传失败"); return; } } catch (error) { console.error("上传标注图片失败:", error); toast.error("上传失败"); return; } } // 更新当前节点，标记为已标注图片 // 标注后的图片会带有视觉标记（箭头、圆圈、文字等） // 这些标记指示了用户希望 AI 重点关注/修改的区域 updateNode(node.id, { data: { ...data, src: finalUrl, hasAnnotations: true, // 🆕 标记为已标注 originalSrc: data.originalSrc || data.src, // 保留原始图片 prompt: data.prompt ? `${data.prompt} (已标注)` : "已标注图片", }, }); toast.success("标注已保存！发送对话时将重点处理标注区域"); }; const uploadBase64ToStorage = useCallback(async (base64Url: string) => { const response = await fetch(base64Url); const blob = await response.blob(); const formData = new FormData(); formData.append("file", blob, `canvas-resize-${Date.now()}.png`); const uploadResponse = await fetchUploadWithRetry(formData); if (!uploadResponse.ok) { throw new Error("上传失败"); } const result = await uploadResponse.json(); return result.url as string; }, []); const handleResizeEditorComplete = useCallback( async (resizedImageUrl: string) => { let finalUrl = resizedImageUrl; if (resizedImageUrl.startsWith("data:")) { try { toast.info("正在上传尺寸调整结果..."); finalUrl = await uploadBase64ToStorage(resizedImageUrl); } catch (error) { console.error("上传尺寸调整图片失败:", error); toast.error("尺寸调整结果上传失败"); return; } } const title = `${displayTitle}-尺寸调整`; addNode({ type: "image", position: { x: node.position.x + node.size.width + 20, y: node.position.y, }, size: { width: node.size.width, height: node.size.height }, data: { src: finalUrl, status: "completed", prompt: "尺寸调整结果", title, originalSrc: data.src, }, connections: [node.id], }); setResizeAnnotatorOpen(false); toast.success("尺寸调整结果已发送到画布"); }, [ addNode, data.src, displayTitle, node.id, node.position.x, node.position.y, node.size.height, node.size.width, uploadBase64ToStorage, ] ); const persistCanvasStateSnapshot = useCallback(() => { if (!projectId || typeof window === "undefined") return; window.setTimeout(() => { void canvasService.saveCanvasState(projectId, getCanvasState()); }, 0); }, [getCanvasState, projectId]); const persistCanvas3DAsset = useCallback( async (asset: Record) => { if (!projectId) return; try { const response = await fetch(`/api/canvas/${projectId}/model3d-assets`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ asset }), }); if (!response.ok) { const payload = await response.json().catch(() => ({})); throw new Error(payload?.error || `HTTP ${response.status}`); } } catch (error) { console.error("[ImageNode] 保存画布 3D 资产失败:", error); } }, [projectId] ); const pollCanvasModel3DTask = useCallback( async (params: { nodeId: string; taskId: string; providerId?: string | null; providerName?: string | null; promptText: string; modelVersion: string; sourceImageUrl: string; previewImageUrl?: string | null; }) => { for (let attempt = 0; attempt < CANVAS_3D_MAX_POLL_ATTEMPTS; attempt += 1) { await sleep(CANVAS_3D_POLL_INTERVAL_MS); const result = await model3DGenerationService.getTask(params.taskId, { providerId: params.providerId, }); const status = String(result.data?.status || "unknown"); const progress = result.data?.progress ?? null; if (!result.success || !result.data) { const error = result.error || "3D 模型任务查询失败"; updateNode(params.nodeId, { data: { src: "", previewImage: params.previewImageUrl || params.sourceImageUrl, prompt: params.promptText, modelVersion: params.modelVersion, status: "failed", metadata: { taskId: params.taskId, provider: "tripo-3d", mode: "image", sourceImageUrl: params.sourceImageUrl, error, }, }, }); await persistCanvas3DAsset({ taskId: params.taskId, provider: "tripo-3d", status: "failed", mode: "image", prompt: params.promptText, modelVersion: params.modelVersion, progress, modelUrl: null, previewImageUrl: params.previewImageUrl || params.sourceImageUrl, error, assetPayload: { providerId: params.providerId || null, providerName: params.providerName || null, sourceImageUrl: params.sourceImageUrl, }, createdAt: Date.now(), }); persistCanvasStateSnapshot(); toast.error(error); return; } if ( status === "failed" || status === "error" || status === "cancelled" || status === "canceled" ) { const error = result.data.errorMessage || "3D 模型任务失败"; const refundedPoints = Number(result.data.refundedPoints || 0); updateNode(params.nodeId, { data: { src: "", previewImage: params.previewImageUrl || params.sourceImageUrl, prompt: params.promptText, modelVersion: params.modelVersion, status: "failed", metadata: { taskId: params.taskId, provider: "tripo-3d", mode: "image", sourceImageUrl: params.sourceImageUrl, progress, error, errorCode: result.data.errorCode ?? null, refundedPoints, }, }, }); await persistCanvas3DAsset({ taskId: params.taskId, provider: "tripo-3d", status: "failed", mode: "image", prompt: params.promptText, modelVersion: params.modelVersion, progress, modelUrl: null, previewImageUrl: params.previewImageUrl || params.sourceImageUrl, error, assetPayload: { providerId: params.providerId || null, providerName: params.providerName || null, sourceImageUrl: params.sourceImageUrl, errorCode: result.data.errorCode ?? null, refundedPoints, }, createdAt: Date.now(), }); persistCanvasStateSnapshot(); toast.error( refundedPoints > 0 ? `${error}，已退回 ${refundedPoints} 积分` : error ); return; } if (status === "success") { const modelUrl = String(result.data.modelUrl || "").trim(); const previewImageUrl = result.data.previewImageUrl || params.previewImageUrl || params.sourceImageUrl; const responseAssetPayload = result.data.assetPayload && typeof result.data.assetPayload === "object" && !Array.isArray(result.data.assetPayload) ? (result.data.assetPayload as Record) : null; const nextAssetPayload = { ...(responseAssetPayload || {}), providerId: params.providerId || (typeof responseAssetPayload?.providerId === "string" ? responseAssetPayload.providerId : null), providerName: params.providerName || (typeof responseAssetPayload?.providerName === "string" ? responseAssetPayload.providerName : null), sourceImageUrl: params.sourceImageUrl, }; if (!modelUrl) { const error = "3D 模型已完成，但没有返回模型文件"; updateNode(params.nodeId, { data: { src: "", previewImage: previewImageUrl, prompt: params.promptText, modelVersion: params.modelVersion, status: "failed", metadata: { taskId: params.taskId, provider: "tripo-3d", mode: "image", sourceImageUrl: params.sourceImageUrl, progress, error, }, }, }); await persistCanvas3DAsset({ taskId: params.taskId, provider: "tripo-3d", status: "failed", mode: "image", prompt: params.promptText, modelVersion: params.modelVersion, progress, modelUrl: null, previewImageUrl, error, assetPayload: { providerId: params.providerId || null, providerName: params.providerName || null, sourceImageUrl: params.sourceImageUrl, }, createdAt: Date.now(), }); persistCanvasStateSnapshot(); toast.error(error); return; } updateNode(params.nodeId, { data: { src: modelUrl, previewImage: previewImageUrl, prompt: params.promptText, modelVersion: params.modelVersion, format: inferModelFormat(modelUrl), status: "completed", metadata: { taskId: params.taskId, provider: "tripo-3d", mode: "image", sourceImageUrl: params.sourceImageUrl, progress: 100, output: result.data.output || null, assetPayload: nextAssetPayload, }, }, }); await persistCanvas3DAsset({ taskId: params.taskId, provider: "tripo-3d", status: "success", mode: "image", prompt: params.promptText, modelVersion: params.modelVersion, progress: 100, modelUrl, previewImageUrl, error: null, assetPayload: nextAssetPayload, createdAt: Date.now(), }); persistCanvasStateSnapshot(); toast.success("3D 模型已生成到画布"); return; } if (isTerminal3DFailureStatus(status)) { const error = result.data.errorMessage || "3D 模型生成失败"; updateNode(params.nodeId, { data: { src: "", previewImage: params.previewImageUrl || params.sourceImageUrl, prompt: params.promptText, modelVersion: params.modelVersion, status: "failed", metadata: { taskId: params.taskId, provider: "tripo-3d", mode: "image", sourceImageUrl: params.sourceImageUrl, progress, error, }, }, }); await persistCanvas3DAsset({ taskId: params.taskId, provider: "tripo-3d", status: "failed", mode: "image", prompt: params.promptText, modelVersion: params.modelVersion, progress, modelUrl: null, previewImageUrl: params.previewImageUrl || params.sourceImageUrl, error, assetPayload: { providerId: params.providerId || null, providerName: params.providerName || null, sourceImageUrl: params.sourceImageUrl, }, createdAt: Date.now(), }); persistCanvasStateSnapshot(); toast.error(error); return; } updateNode(params.nodeId, { data: { src: "", previewImage: params.previewImageUrl || params.sourceImageUrl, prompt: params.promptText, modelVersion: params.modelVersion, status: "generating", metadata: { taskId: params.taskId, provider: "tripo-3d", mode: "image", sourceImageUrl: params.sourceImageUrl, progress, }, }, }); persistCanvasStateSnapshot(); } const error = "3D 模型任务轮询超时，请稍后重试"; updateNode(params.nodeId, { data: { src: "", previewImage: params.previewImageUrl || params.sourceImageUrl, prompt: params.promptText, modelVersion: params.modelVersion, status: "failed", metadata: { taskId: params.taskId, provider: "tripo-3d", mode: "image", sourceImageUrl: params.sourceImageUrl, error, }, }, }); await persistCanvas3DAsset({ taskId: params.taskId, provider: "tripo-3d", status: "failed", mode: "image", prompt: params.promptText, modelVersion: params.modelVersion, progress: null, modelUrl: null, previewImageUrl: params.previewImageUrl || params.sourceImageUrl, error, assetPayload: { providerId: params.providerId || null, providerName: params.providerName || null, sourceImageUrl: params.sourceImageUrl, }, createdAt: Date.now(), }); persistCanvasStateSnapshot(); toast.error(error); }, [persistCanvas3DAsset, persistCanvasStateSnapshot, updateNode] ); const pollCanvasWorld3DTask = useCallback( async (params: { nodeId: string; taskId: string; providerId?: string | null; providerName?: string | null; promptText: string; modelVersion: string; sourceImageUrl: string; }) => { for (let attempt = 0; attempt < CANVAS_3D_MAX_POLL_ATTEMPTS; attempt += 1) { await sleep(CANVAS_3D_POLL_INTERVAL_MS); const result = await worldLabsGenerationService.getTask(params.taskId, { providerId: params.providerId, }); const status = String(result.data?.status || "unknown"); const progress = result.data?.progress ?? null; if (!result.success || !result.data) { const error = result.error || "3D 世界任务查询失败"; updateNode(params.nodeId, { data: { imageUrl: params.sourceImageUrl, previewImage: params.sourceImageUrl, prompt: params.promptText, modelVersion: params.modelVersion, status: "failed", activeView: "image", metadata: { taskId: params.taskId, provider: "worldlabs-3d", mode: "world-image", sourceImageUrl: params.sourceImageUrl, error, }, }, }); await persistCanvas3DAsset({ taskId: params.taskId, provider: "worldlabs-3d", status: "failed", mode: "world-image", prompt: params.promptText, modelVersion: params.modelVersion, progress, modelUrl: null, previewImageUrl: params.sourceImageUrl, error, assetPayload: { providerId: params.providerId || null, providerName: params.providerName || null, sourceImageUrl: params.sourceImageUrl, }, createdAt: Date.now(), }); persistCanvasStateSnapshot(); toast.error(error); return; } if (status === "success") { const assetPayload = (result.data.assetPayload || {}) as Record; const splatUrl = pickBestArchivedWorldLabsSplatUrl( assetPayload.spzUrls as Record | null | undefined ); const returnedPanoUrl = typeof assetPayload.panoUrl === "string" && assetPayload.panoUrl.trim() ? assetPayload.panoUrl.trim() : null; const returnedThumbnailUrl = typeof assetPayload.thumbnailUrl === "string" && assetPayload.thumbnailUrl.trim() ? assetPayload.thumbnailUrl.trim() : null; const returnedPreviewImageUrl = typeof result.data.previewImageUrl === "string" && result.data.previewImageUrl.trim() ? result.data.previewImageUrl.trim() : null; const rawReturnedMeshUrl = result.data.modelUrl || (typeof assetPayload.meshUrl === "string" && assetPayload.meshUrl.trim() ? assetPayload.meshUrl.trim() : null); const returnedMeshUrl = isArchivedWorldLabsAssetUrl(rawReturnedMeshUrl) ? rawReturnedMeshUrl : null; const hasRenderableWorldAsset = Boolean( splatUrl || returnedPanoUrl || returnedThumbnailUrl || returnedPreviewImageUrl || returnedMeshUrl ); if (!hasRenderableWorldAsset) { updateNode(params.nodeId, { data: { imageUrl: params.sourceImageUrl, previewImage: params.sourceImageUrl, prompt: params.promptText, modelVersion: params.modelVersion, status: "generating", activeView: "image", metadata: { taskId: params.taskId, provider: "worldlabs-3d", mode: "world-image", sourceImageUrl: params.sourceImageUrl, progress: 95, assetPayload, }, }, }); persistCanvasStateSnapshot(); continue; } const imageUrl = returnedPanoUrl || returnedThumbnailUrl || returnedPreviewImageUrl || params.sourceImageUrl; const meshUrl = returnedMeshUrl; const worldUrl = typeof assetPayload.worldUrl === "string" ? assetPayload.worldUrl : null; const previewImageUrl = result.data.previewImageUrl || imageUrl; updateNode(params.nodeId, { data: { worldUrl: worldUrl || undefined, imageUrl: imageUrl || undefined, meshUrl: meshUrl || undefined, splatUrl: splatUrl || undefined, previewImage: previewImageUrl || undefined, prompt: params.promptText, modelVersion: params.modelVersion, status: "completed", activeView: splatUrl ? "splat" : imageUrl ? "image" : "mesh", firstPerson: false, hotspots: [], semanticsMetadata: assetPayload.semanticsMetadata && typeof assetPayload.semanticsMetadata === "object" ? assetPayload.semanticsMetadata : undefined, metadata: { taskId: params.taskId, provider: "worldlabs-3d", mode: "world-image", sourceImageUrl: params.sourceImageUrl, progress: 100, assetPayload: { ...assetPayload, providerId: params.providerId || assetPayload.providerId || null, providerName: params.providerName || assetPayload.providerName || null, sourceImageUrl: params.sourceImageUrl, }, }, }, }); await persistCanvas3DAsset({ taskId: params.taskId, provider: "worldlabs-3d", status: "success", mode: "world-image", prompt: params.promptText, modelVersion: params.modelVersion, progress: 100, modelUrl: meshUrl, previewImageUrl, error: null, assetPayload: { ...assetPayload, providerId: params.providerId || assetPayload.providerId || null, providerName: params.providerName || assetPayload.providerName || null, sourceImageUrl: params.sourceImageUrl, }, createdAt: Date.now(), }); persistCanvasStateSnapshot(); toast.success("3D 世界已生成到画布"); return; } if (isTerminal3DFailureStatus(status)) { const error = result.data.errorMessage || "3D 世界生成失败"; updateNode(params.nodeId, { data: { imageUrl: params.sourceImageUrl, previewImage: params.sourceImageUrl, prompt: params.promptText, modelVersion: params.modelVersion, status: "failed", activeView: "image", metadata: { taskId: params.taskId, provider: "worldlabs-3d", mode: "world-image", sourceImageUrl: params.sourceImageUrl, progress, error, }, }, }); await persistCanvas3DAsset({ taskId: params.taskId, provider: "worldlabs-3d", status: "failed", mode: "world-image", prompt: params.promptText, modelVersion: params.modelVersion, progress, modelUrl: null, previewImageUrl: params.sourceImageUrl, error, assetPayload: { providerId: params.providerId || null, providerName: params.providerName || null, sourceImageUrl: params.sourceImageUrl, }, createdAt: Date.now(), }); persistCanvasStateSnapshot(); toast.error(error); return; } updateNode(params.nodeId, { data: { imageUrl: params.sourceImageUrl, previewImage: params.sourceImageUrl, prompt: params.promptText, modelVersion: params.modelVersion, status: "generating", activeView: "image", metadata: { taskId: params.taskId, provider: "worldlabs-3d", mode: "world-image", sourceImageUrl: params.sourceImageUrl, progress, }, }, }); persistCanvasStateSnapshot(); } const error = "3D 世界任务轮询超时，请稍后重试"; updateNode(params.nodeId, { data: { imageUrl: params.sourceImageUrl, previewImage: params.sourceImageUrl, prompt: params.promptText, modelVersion: params.modelVersion, status: "failed", activeView: "image", metadata: { taskId: params.taskId, provider: "worldlabs-3d", mode: "world-image", sourceImageUrl: params.sourceImageUrl, error, }, }, }); await persistCanvas3DAsset({ taskId: params.taskId, provider: "worldlabs-3d", status: "failed", mode: "world-image", prompt: params.promptText, modelVersion: params.modelVersion, progress: null, modelUrl: null, previewImageUrl: params.sourceImageUrl, error, assetPayload: { providerId: params.providerId || null, providerName: params.providerName || null, sourceImageUrl: params.sourceImageUrl, }, createdAt: Date.now(), }); persistCanvasStateSnapshot(); toast.error(error); }, [persistCanvas3DAsset, persistCanvasStateSnapshot, updateNode] ); const handleGenerateCanvas3DModel = useCallback(async (requestedModelVersion?: string) => { if (!data.src || !isHttpImageUrl(data.src)) { toast.error("请选择一张可访问的 URL 图片"); return; } if (!projectId) { toast.error("画布还在加载，请稍后再试"); return; } const promptText = (data.prompt || displayTitle || "图生 3D 模型").trim(); const modelVersion = requestedModelVersion || DEFAULT_CANVAS_TRIPO_MODEL || "tripo-standard"; const sourceImageUrl = data.src; const newNodeId = addNode({ type: "model3d", position: { x: node.position.x + node.size.width + 24, y: node.position.y, }, size: { width: Math.max(360, node.size.width), height: 300 }, data: { src: "", previewImage: sourceImageUrl, prompt: promptText, modelVersion, format: "glb", status: "generating", metadata: { provider: "tripo-3d", mode: "image", sourceImageUrl, }, }, connections: [node.id], }); selectNode(newNodeId); persistCanvasStateSnapshot(); setIsProcessing(true); try { const createResult = await model3DGenerationService.createTask({ taskType: "image_to_model", imageUrl: sourceImageUrl, imageType: inferTripoImageType(sourceImageUrl), prompt: promptText, modelVersion, faceLimit: 120000, texture: true, pbr: modelFeatureVisibility.pbr !== false, autoSize: false, quad: false, generateParts: false, smartLowPoly: false, geometryQuality: "standard", textureQuality: "standard", textureAlignment: "original_image", orientation: "default", }); if (!createResult.success || !createResult.data?.taskId) { throw new Error(createResult.error || "创建图生 3D 模型任务失败"); } const providerId = createResult.data.providerId || null; const providerName = createResult.data.providerName || null; updateNode(newNodeId, { data: { src: "", previewImage: sourceImageUrl, prompt: promptText, modelVersion, format: "glb", status: "generating", metadata: { taskId: createResult.data.taskId, provider: "tripo-3d", mode: "image", sourceImageUrl, providerId, providerName, }, }, }); await persistCanvas3DAsset({ taskId: createResult.data.taskId, provider: "tripo-3d", status: createResult.data.status || "running", mode: "image", prompt: promptText, modelVersion, progress: null, modelUrl: null, previewImageUrl: sourceImageUrl, error: null, assetPayload: { providerId, providerName, sourceImageUrl }, createdAt: Date.now(), }); persistCanvasStateSnapshot(); toast.success("已在画布创建 3D 模型任务"); void pollCanvasModel3DTask({ nodeId: newNodeId, taskId: createResult.data.taskId, providerId, providerName, promptText, modelVersion, sourceImageUrl, previewImageUrl: sourceImageUrl, }); } catch (error) { const message = error instanceof Error ? error.message : "创建图生 3D 模型任务失败"; updateNode(newNodeId, { data: { src: "", previewImage: sourceImageUrl, prompt: promptText, modelVersion, format: "glb", status: "failed", metadata: { provider: "tripo-3d", mode: "image", sourceImageUrl, error: message, }, }, }); persistCanvasStateSnapshot(); toast.error(message); } finally { setIsProcessing(false); } }, [ addNode, data.prompt, data.src, displayTitle, node.id, node.position.x, node.position.y, node.size.width, persistCanvas3DAsset, persistCanvasStateSnapshot, pollCanvasModel3DTask, projectId, selectNode, updateNode, ]); const handleGenerateCanvas3DWorld = useCallback(async (requestedModelVersion?: string) => { if (!data.src || !isHttpImageUrl(data.src)) { toast.error("请选择一张可访问的 URL 图片"); return; } if (!projectId) { toast.error("画布还在加载，请稍后再试"); return; } const promptText = (data.prompt || displayTitle || "图生 3D 世界").trim(); const modelVersion = requestedModelVersion || DEFAULT_CANVAS_WORLD_MODEL || "world-standard"; const sourceImageUrl = data.src; const newNodeId = addNode({ type: "world3d", position: { x: node.position.x + node.size.width + 24, y: node.position.y + 24, }, size: { width: Math.max(420, node.size.width), height: 320 }, data: { imageUrl: sourceImageUrl, previewImage: sourceImageUrl, prompt: promptText, modelVersion, status: "generating", activeView: "image", firstPerson: false, hotspots: [], metadata: { provider: "worldlabs-3d", mode: "world-image", sourceImageUrl, }, }, connections: [node.id], }); selectNode(newNodeId); persistCanvasStateSnapshot(); setIsProcessing(true); try { const uploadResult = await worldLabsGenerationService.uploadMediaFromUrl( sourceImageUrl, "image" ); if (!uploadResult.success || !uploadResult.data?.mediaAssetId) { throw new Error(uploadResult.error || "上传世界参考图失败"); } const providerId = uploadResult.data.providerId || null; const providerName = uploadResult.data.providerName || null; const createResult = await worldLabsGenerationService.createTask({ mode: "image", mediaAssetId: uploadResult.data.mediaAssetId, providerId, prompt: promptText || undefined, displayName: displayTitle || promptText || "画布图生世界", model: modelVersion, disableRecaption: false, makePublic: false, }); if (!createResult.success || !createResult.data?.taskId) { throw new Error(createResult.error || "创建图生 3D 世界任务失败"); } const createAssetPayload = { ...(createResult.data.assetPayload || {}), providerId, providerName, sourceImageUrl, }; updateNode(newNodeId, { data: { imageUrl: sourceImageUrl, previewImage: sourceImageUrl, prompt: promptText, modelVersion, status: "generating", activeView: "image", firstPerson: false, hotspots: [], metadata: { taskId: createResult.data.taskId, provider: "worldlabs-3d", mode: "world-image", sourceImageUrl, assetPayload: createAssetPayload, }, }, }); await persistCanvas3DAsset({ taskId: createResult.data.taskId, provider: "worldlabs-3d", status: createResult.data.status || "running", mode: "world-image", prompt: promptText, modelVersion, progress: null, modelUrl: null, previewImageUrl: sourceImageUrl, error: null, assetPayload: createAssetPayload, createdAt: Date.now(), }); persistCanvasStateSnapshot(); toast.success("已在画布创建 3D 世界任务"); void pollCanvasWorld3DTask({ nodeId: newNodeId, taskId: createResult.data.taskId, providerId, providerName, promptText, modelVersion, sourceImageUrl, }); } catch (error) { const message = error instanceof Error ? error.message : "创建图生 3D 世界任务失败"; updateNode(newNodeId, { data: { imageUrl: sourceImageUrl, previewImage: sourceImageUrl, prompt: promptText, modelVersion, status: "failed", activeView: "image", firstPerson: false, hotspots: [], metadata: { provider: "worldlabs-3d", mode: "world-image", sourceImageUrl, error: message, }, }, }); persistCanvasStateSnapshot(); toast.error(message); } finally { setIsProcessing(false); } }, [ addNode, data.prompt, data.src, displayTitle, node.id, node.position.x, node.position.y, node.size.width, persistCanvas3DAsset, persistCanvasStateSnapshot, pollCanvasWorld3DTask, projectId, selectNode, updateNode, ]); // 基于当前图片+新提示词重绘 const handlePromptRegenerate = async () => { if (!data.src) return; if (!isHttpImageUrl(data.src)) { toast.error("仅支持 URL 图片，不允许 base64 传输"); return; } const promptText = regeneratePrompt.trim(); if (!promptText) { toast.error("请输入提示词"); return; } if (isProcessing) { toast.info("正在处理中，请稍候..."); return; } setPromptDialogOpen(false); setIsProcessing(true); const newNodeId = addNode({ type: "image", position: { x: node.position.x + node.size.width + 20, y: node.position.y, }, size: { width: node.size.width, height: node.size.height }, data: { src: "", status: "generating", prompt: promptText, title: `${displayTitle}-重绘`, originalSrc: data.src, }, connections: [node.id], }); try { const aspectRatio = guessNearestAspectRatio( node.size.width, node.size.height ); const result = await imageGenerationService.generateImage({ prompt: promptText, referenceImage: data.src, aspectRatio, imageCount: 1, billingFeature: "repaint", }); const image = result.data?.images?.[0]; if (result.success && image?.originalUrl) { updateNode(newNodeId, { data: { src: image.originalUrl, status: "completed", prompt: promptText, title: `${promptText.slice(0, 24) || displayTitle}-重绘`, originalSrc: data.src, }, }); toast.success("已根据新提示词生成图片"); } else { updateNode(newNodeId, { data: { src: "", status: "failed", prompt: "提示词重绘失败", title: `${displayTitle}-重绘失败`, originalSrc: data.src, }, }); toast.error(result.error || "重绘失败"); } } catch (error) { updateNode(newNodeId, { data: { src: "", status: "failed", prompt: "提示词重绘失败", title: `${displayTitle}-重绘失败`, originalSrc: data.src, }, }); toast.error("重绘失败"); } finally { setIsProcessing(false); } }; // 下载图片 - 通过 fetch 获取图片数据实现真正的下载（避免跨域问题导致跳转） const handleDownload = async () => { if (!data.src) return; const originalUrl = String(inferOriginalImageUrl(data.src) || data.src || "").trim(); if (!originalUrl) { toast.error("下载失败，请重试"); return; } const urlParts = originalUrl.split("."); const ext = urlParts[urlParts.length - 1]?.split("?")[0] || "png"; const filename = `${sanitizeFileName(displayTitle)}.${ext}`; try { toast.info("正在准备下载..."); const response = await fetch( buildImageProxyUrl(originalUrl, { delivery: "proxy" }) ); if (!response.ok) { throw new Error(`下载失败（${response.status}）`); } const blob = await response.blob(); // 创建 Blob URL const blobUrl = URL.createObjectURL(blob); // 创建下载链接 const link = document.createElement("a"); link.href = blobUrl; link.download = filename; // 触发下载 document.body.appendChild(link); link.click(); document.body.removeChild(link); // 释放 Blob URL window.setTimeout(() => URL.revokeObjectURL(blobUrl), 1000); toast.success("下载成功"); } catch (error) { console.error("下载失败:", error); try { triggerBrowserDownload(originalUrl, filename); toast.message("代理下载失败，已切换为原图直链下载"); return; } catch (fallbackError) { console.error("原图直链下载失败:", fallbackError); } try { triggerBrowserDownload(originalUrl, undefined, { openInNewTab: true }); toast.message("已打开原图，可直接另存为"); } catch (openError) { console.error("打开原图失败:", openError); toast.error("下载失败，请重试"); } } }; const imageAdjustOverlayStyle = useMemo(() => { if (boxCutoutMetrics) { return { left: boxCutoutMetrics.offsetX, top: boxCutoutMetrics.offsetY, width: boxCutoutMetrics.renderedWidth, height: boxCutoutMetrics.renderedHeight, }; } return { inset: 0 }; }, [boxCutoutMetrics]); const renderImageAdjustmentOverlays = useCallback(() => { if (!hasActiveImageAdjustments) return null; const temperatureOpacity = Math.min( 0.38, Math.abs(activeImageAdjustments.temperature) / 260 ); const tintOpacity = Math.min( 0.28, Math.abs(activeImageAdjustments.tint) / 300 ); const grainOpacity = Math.min(0.28, activeImageAdjustments.grain / 340); const vignetteOpacity = Math.min( 0.42, activeImageAdjustments.vignette / 180 ); const softLightOpacity = Math.min( 0.24, activeImageAdjustments.softLight / 320 ); const glowOpacity = Math.min(0.22, activeImageAdjustments.glow / 280); return ( <> {temperatureOpacity > 0 ? (
= 0 ? "linear-gradient(135deg, rgba(255,188,109,0.9), rgba(255,232,194,0.42))" : "linear-gradient(135deg, rgba(109,180,255,0.86), rgba(219,240,255,0.36))", mixBlendMode: "soft-light", opacity: temperatureOpacity, }} /> ) : null} {tintOpacity > 0 ? (
= 0 ? "linear-gradient(135deg, rgba(244,105,214,0.78), rgba(255,203,236,0.28))" : "linear-gradient(135deg, rgba(76,214,141,0.76), rgba(194,255,221,0.28))", mixBlendMode: "overlay", opacity: tintOpacity, }} /> ) : null} {softLightOpacity > 0 ? (
) : null} {glowOpacity > 0 ? (
) : null} {vignetteOpacity > 0 ? (
) : null} {grainOpacity > 0 ? (
) : null} ); }, [ activeImageAdjustments, hasActiveImageAdjustments, imageAdjustOverlayStyle, ]); const cropPanelPosition = getCropPanelPosition(); const imageAdjustPanelPosition = getImageAdjustPanelPosition(); const toolbarPosition = getToolbarPosition(); const boxCutoutToolbarPosition = getBoxCutoutToolbarPosition(); const flipRotatePanelPosition = getFlipRotatePanelPosition(); const anglePanelPosition = getAnglePanelPosition(); const imageAdjustTabOptions = [ { id: "light" as const, label: "光线", icon: SlidersHorizontal, }, { id: "color" as const, label: "颜色", icon: Blend, }, { id: "detail" as const, label: "细节", icon: CircleDot, }, { id: "effects" as const, label: "效果", icon: Box, }, ]; const imageAdjustSections: Record< ImageAdjustPanelTab, Array<{ key: ImageAdjustmentKey; label: string; min: number; max: number; trackClassName?: string; }> > = { light: [ { key: "light", label: "光线", min: -100, max: 100 }, { key: "exposure", label: "曝光", min: -100, max: 100 }, { key: "contrast", label: "对比度", min: -100, max: 100 }, { key: "highlights", label: "高光", min: -100, max: 100 }, { key: "shadows", label: "阴影", min: -100, max: 100 }, { key: "whites", label: "白色", min: -100, max: 100 }, { key: "blacks", label: "黑色", min: -100, max: 100 }, ], color: [ { key: "vibrance", label: "自然饱和度", min: -100, max: 100 }, { key: "saturation", label: "饱和度", min: -100, max: 100 }, { key: "temperature", label: "色温", min: -100, max: 100, trackClassName: "h-[4px] bg-[linear-gradient(90deg,#4aa7ff,#f2c23a)]", }, { key: "tint", label: "色调", min: -100, max: 100, trackClassName: "h-[4px] bg-[linear-gradient(90deg,#ff66d7,#41d278)]", }, ], detail: [ { key: "sharpen", label: "锐化", min: 0, max: 100 }, { key: "clarity", label: "清晰度", min: 0, max: 100 }, { key: "grain", label: "颗粒", min: 0, max: 100 }, ], effects: [ { key: "vignette", label: "晕影", min: 0, max: 100 }, { key: "softLight", label: "柔光", min: 0, max: 100 }, { key: "glow", label: "辉光", min: 0, max: 100 }, ], }; const boxCutoutHintText = boxCutoutSelection ? "确认后将仅抠出框选区域" : isBoxCutoutDrawing ? "松开完成框选" : "在图片中拖拽矩形框"; return ( <> {/* 选中时在图片上方显示标题 */} {isSelected && !isMultiSelected && data.src && !sceneFusionDialogOpen && (
{isEditingTitle ? ( setDraftTitle(e.target.value)} onClick={(e) => e.stopPropagation()} onKeyDown={(e) => { if (e.key === "Enter") { e.preventDefault(); handleSaveTitle(); } else if (e.key === "Escape") { e.preventDefault(); setDraftTitle(displayTitle); setIsEditingTitle(false); } }} onMouseDown={(e) => e.stopPropagation()} onPointerDown={(e) => e.stopPropagation()} value={draftTitle} /> ) : ( { e.stopPropagation(); setDraftTitle(displayTitle); setIsEditingTitle(true); }} title="双击重命名" > {displayTitle} )}
{resolutionLabel ? ( {resolutionLabel} ) : null}
)}
setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} ref={containerRef} >
{/* 图片内容 - 使用 object-contain 保持原始比例 */} {data.src ? (
{!shouldRequestDisplayImage ? (
图片即将进入视口时加载
) : isCompareMode && hasCompareSource ? (
{ event.stopPropagation(); updateCompareSplitByClientX(event.clientX); }} onPointerMove={(event) => { updateCompareSplitByClientX(event.clientX); }} ref={compareFrameRef} style={{ touchAction: "none" }} >
{displayTitle} { if (event.currentTarget.src !== data.src) { event.currentTarget.src = data.src; } }} style={activeImageAdjustmentsStyle} src={displayImageSrc} /> {renderImageAdjustmentOverlays()}
{`${displayTitle}-原图`} { if (event.currentTarget.src !== compareSource) { event.currentTarget.src = compareSource; } }} src={displayCompareSrc} />
新图
原图
) : ( <> {displayTitle} { if (!isThisNodePicking && !boxCutoutMode) { e.stopPropagation(); setFullscreenPreviewOpen(true); } }} onError={(event) => { if (event.currentTarget.src !== data.src) { event.currentTarget.src = data.src; } }} onLoad={refreshBoxCutoutMetrics} ref={displayImageRef} src={displayImageSrc} style={activeImageAdjustmentsStyle} /> {renderImageAdjustmentOverlays()} {shouldRenderDetailOverlay ? ( detailUiDslDocument ? ( ) : ( ) ) : null} )} {cropPanelOpen && !isThisNodePicking && !isCompareMode && boxCutoutMetrics && cropRectStyle && cropRect && (
{ event.preventDefault(); event.stopPropagation(); }} onPointerCancel={handleCropPointerCancel} onPointerDown={handleCropPointerDown} onPointerMove={handleCropPointerMove} onPointerUp={handleCropPointerUp} ref={cropOverlayRef} style={{ left: boxCutoutMetrics.offsetX, top: boxCutoutMetrics.offsetY, width: boxCutoutMetrics.renderedWidth, height: boxCutoutMetrics.renderedHeight, }} >
{( [ { handle: "nw", className: "-left-3 -top-3 cursor-nwse-resize" }, { handle: "ne", className: "-right-3 -top-3 cursor-nesw-resize" }, { handle: "sw", className: "-left-3 -bottom-3 cursor-nesw-resize" }, { handle: "se", className: "-right-3 -bottom-3 cursor-nwse-resize" }, { handle: "n", className: "left-1/2 -top-3 -translate-x-1/2 cursor-ns-resize" }, { handle: "s", className: "left-1/2 -bottom-3 -translate-x-1/2 cursor-ns-resize" }, { handle: "w", className: "-left-3 top-1/2 -translate-y-1/2 cursor-ew-resize" }, { handle: "e", className: "-right-3 top-1/2 -translate-y-1/2 cursor-ew-resize" }, ] as const ).map((handleItem) => (
)} {boxCutoutMode && !isThisNodePicking && !isCompareMode && ( <>
{ event.preventDefault(); event.stopPropagation(); }} onPointerCancel={handleBoxCutoutPointerCancel} onPointerDown={handleBoxCutoutPointerDown} onPointerMove={handleBoxCutoutPointerMove} onPointerUp={handleBoxCutoutPointerUp} /> {activeBoxCutoutRectStyle ? (
) : (
)} )} {/* 🆕 拾取模式：当前点击位置（正在识别） */} {isThisNodePicking && currentPickerClickStyle && (
)} {/* 🆕 拾取模式：状态栏 */} {isThisNodePicking && (
{isPickerLoading ? "正在识别..." : "点击标注物品"}
)} {hasCompareSource && !isThisNodePicking && !isCompareMode && !boxCutoutMode && !cropPanelOpen && isSelected && !isMultiSelected && ( )}
) : data.status === "generating" ? (
{detailProgressLabel || "生成中..."} 图片处理中
) : data.status === "failed" ? (
生成失败 请重新上传或再试一次
) : (
上传图片 添加参考图、角色图或关键帧素材 {/* 隐藏的文件输入 */} {/* 选择文件按钮 */}
)} {/* 处理中遮罩 */} {isProcessing && (
处理中...
)} {/* 工具栏使用 Portal 渲染到 body，避免被裁剪 */} {/* 悬浮时的更多操作按钮 (右上角) */} {isHovered && data.src && !isProcessing && !isSelected && hasHoverImageMoreMenu ? (
{imageRemoveBackgroundEnabled ? ( handleAction("rmbg")}> {imageRemoveBackgroundItem.label} ) : null} {imageRemoveWatermarkEnabled ? ( handleAction("watermark")}> {imageRemoveWatermarkItem.label} ) : null} {imageEnhanceEnabled ? ( handleAction("enhance")}> {imageEnhanceItem.label} ) : null} {imageNoteEnabled ? ( handleAction("note")}> {imageNoteItem.label} ) : null} {isLayerSplitEnabled && imageLayerSplitEnabledByToolbar ? ( handleAction("layer-split")}> {imageLayerSplitItem.label} ) : null} {imageResizeEnabled ? ( handleAction("resize")}> {imageResizeItem.label} ) : null} {imageMultiAngleEnabled ? ( handleAction("angle")}> {imageMultiAngleItem.label} ) : null} {imagePromptRegenerateEnabled ? ( handleAction("prompt-regenerate")} > {imagePromptRegenerateItem.label} ) : null} {imageTextEditEnabled ? ( handleAction("text-edit")}> {imageTextEditItem.label} ) : null} {imageExtendEnabled ? ( handleAction("extend")}> {imageExtendItem.label} ) : null} {imageCropEnabled ? ( handleAction("crop")}> {imageCropItem.label} ) : null} {imageAdjustEnabled ? ( handleAction("adjust")}> {imageAdjustItem.label} ) : null} {imageFlipRotateEnabled ? ( handleAction("flip-rotate")}> {imageFlipRotateItem.label} ) : null} {imageRenameEnabled ? ( { setDraftTitle(displayTitle); setIsEditingTitle(true); }} > {imageRenameItem.label} ) : null} {hasHoverImageMorePrimaryActions && hasHoverImageMoreSecondaryActions ? ( ) : null} {imageDownloadEnabled ? ( {imageDownloadItem.label} ) : null} {imageDeleteEnabled ? ( deleteNode(node.id)} > {imageDeleteItem.label} ) : null}
) : null} {data.note && !isSelected && (
{imageNoteItem.label}
)} {shortAgentExecutionSnapshotId ? ( ) : null}
{/* 批量处理对话框 */} {batchProcessingEnabled ? ( ) : null} {/* 提示词重绘对话框 */} 提示词重绘

在保留当前图片主体的基础上，用新提示词生成一张新图。原图不会被覆盖。