setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
ref={containerRef}
>
{isRecentlyGenerated ? (
) : null}
{/* 图片内容 - 使用 object-contain 保持原始比例 */}
{data.src ? (
,
document.body
)}
{isSelected &&
!isMultiSelected &&
data.src &&
boxCutoutMode &&
typeof document !== "undefined" &&
createPortal(
{!shouldRequestDisplayImage ? (
![{displayTitle}]()
{
if (!isThisNodePicking && !boxCutoutMode && !localEditMode) {
e.stopPropagation();
setFullscreenPreviewOpen(true);
}
}}
onError={(event) => {
if (event.currentTarget.src !== data.src) {
event.currentTarget.src = data.src;
}
}}
onLoad={handleDisplayImageLoad}
ref={displayImageRef}
src={displayImageSrc}
style={activeImageAdjustmentsStyle}
/>
{renderImageAdjustmentOverlays()}
{shouldRenderDetailOverlay ? (
detailUiDslDocument ? (
{
event.stopPropagation();
updateCompareSplitByClientX(event.clientX);
}}
onPointerMove={(event) => {
updateCompareSplitByClientX(event.clientX);
}}
style={{ touchAction: "none" }}
>
![{displayTitle}]()
{
if (event.currentTarget.src !== data.src) {
event.currentTarget.src = data.src;
}
}}
onLoad={handleDisplayImageLoad}
ref={displayImageRef}
src={displayImageSrc}
style={activeImageAdjustmentsStyle}
/>
![{`${displayTitle}-原图`}]()
{
if (event.currentTarget.src !== compareSource) {
event.currentTarget.src = compareSource;
}
}}
src={displayCompareSrc}
/>
) : (
<>
{boxCutoutMetrics
? canvasAgentAnnotations.map((annotation) => {
const boundsStyle = getCanvasAnnotationBoundsStyle(
annotation,
boxCutoutMetrics
);
if (!boundsStyle) return null;
const color = annotation.color || "#f59e0b";
return (
);
})
: null}
) : null}
)}
{cropPanelOpen &&
!isThisNodePicking &&
!isCompareMode &&
boxCutoutMetrics &&
cropRectStyle &&
cropRect && (
annotation.text)
.filter(Boolean)
.join(" / ")}
>
{isSelected
? visibleCanvasAgentAnnotations
.filter((annotation) => annotation.text)
.map((annotation) => (
{annotation.text}
))
: null}
{
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,
}}
>
)}
{boxCutoutMode && !isThisNodePicking && !isCompareMode && (
<>
{(
[
{ 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) => (
))}
{
event.preventDefault();
event.stopPropagation();
}}
onPointerCancel={handleBoxCutoutPointerCancel}
onPointerDown={handleBoxCutoutPointerDown}
onPointerMove={handleBoxCutoutPointerMove}
onPointerUp={handleBoxCutoutPointerUp}
/>
{activeBoxCutoutRectStyle ? (
) : (
)}
)}
{localEditMode && !isThisNodePicking && !isCompareMode && (
<>
{imageRemoveBackgroundEnabled ? (
handleAction("rmbg")}>
) : null}
{imageRemoveWatermarkEnabled ? (
handleAction("watermark")}>
) : null}
{imageEnhanceEnabled ? (
handleAction("enhance")}>
) : null}
{imageNoteEnabled ? (
handleAction("note")}>
) : null}
{hasCanvasAgentAnnotations ? (
) : null}
{isLayerSplitEnabled && imageLayerSplitEnabledByToolbar ? (
handleAction("layer-split")}>
) : null}
{imageResizeEnabled ? (
handleAction("resize")}>
) : null}
{imageMultiAngleEnabled ? (
handleAction("angle")}>
) : null}
{imagePromptRegenerateEnabled ? (
handleAction("prompt-regenerate")}
>
) : null}
{imageTextEditEnabled ? (
handleAction("text-edit")}>
) : null}
{imageLayoutReplaceEnabled ? (
handleAction("layout-replace")}
>
) : null}
{imageExtendEnabled ? (
handleAction("extend")}>
) : null}
{imageCropEnabled ? (
handleAction("crop")}>
) : null}
{imageAdjustEnabled ? (
handleAction("adjust")}>
) : null}
{imageFlipRotateEnabled ? (
handleAction("flip-rotate")}>
) : null}
{imageRenameEnabled ? (
{
setDraftTitle(displayTitle);
setIsEditingTitle(true);
}}
>
) : null}
{hasHoverImageMorePrimaryActions &&
hasHoverImageMoreSecondaryActions ? (
{
void handleDownload();
}}
>
{isDownloadingOriginalImage ? (
) : null}
{imageDeleteEnabled ? (
deleteNode(node.id)}
>
) : null}
) : null}
{data.note && !isSelected && (
{
event.preventDefault();
event.stopPropagation();
}}
onPointerCancel={handleLocalEditPointerCancel}
onPointerDown={handleLocalEditPointerDown}
onPointerMove={handleLocalEditPointerMove}
onPointerUp={handleLocalEditPointerUp}
/>
{boxCutoutMetrics ? (
) : null}
{localEditScaleTargetOverlays.map(({ region, sourceStyle, style }) => {
const sourceLeft = Number(sourceStyle.left || 0);
const sourceTop = Number(sourceStyle.top || 0);
const sourceWidth = Number(sourceStyle.width || 0);
const sourceHeight = Number(sourceStyle.height || 0);
const targetLeft = Number(style.left || 0);
const targetTop = Number(style.top || 0);
const targetWidth = Number(style.width || 0);
const targetHeight = Number(style.height || 0);
const markerId = `canvas-scale-arrow-${node.id}-${region.id}`;
const connectorPoints = [
{
key: "nw",
source: { x: sourceLeft, y: sourceTop },
target: { x: targetLeft, y: targetTop },
},
{
key: "ne",
source: { x: sourceLeft + sourceWidth, y: sourceTop },
target: { x: targetLeft + targetWidth, y: targetTop },
},
{
key: "sw",
source: { x: sourceLeft, y: sourceTop + sourceHeight },
target: { x: targetLeft, y: targetTop + targetHeight },
},
{
key: "se",
source: {
x: sourceLeft + sourceWidth,
y: sourceTop + sourceHeight,
},
target: {
x: targetLeft + targetWidth,
y: targetTop + targetHeight,
},
},
];
return (
);
})}
{localEditScaleTargetOverlays.map(
({ region, style, targetRect }) => {
const left = Number(style.left || 0);
const top = Number(style.top || 0);
const width = Number(style.width || 0);
const height = Number(style.height || 0);
const active =
localEditRegionInteraction?.regionId === region.id &&
localEditRegionInteraction.target === "scaleTarget";
return (
)}
{/* 🆕 拾取模式：状态栏 */}
{isThisNodePicking && (
) : (
{
event.preventDefault();
event.stopPropagation();
}}
onPointerCancel={(event) =>
handleLocalEditRegionPointerCancel(event, region.id)
}
onPointerDown={(event) =>
handleLocalEditRegionPointerDown(
event,
region,
"scaleTarget",
targetRect
)
}
onPointerMove={(event) =>
handleLocalEditRegionPointerMove(event, region.id)
}
onPointerUp={(event) =>
handleLocalEditRegionPointerUp(event, region.id)
}
style={{
left,
top,
width: Math.max(width, 1),
height: Math.max(height, 1),
}}
title="目标框"
>
);
}
)}
{localEditRegionOverlays.map(({ region, style }) => {
const left = Number(style.left || 0);
const top = Number(style.top || 0);
const width = Number(style.width || 0);
const height = Number(style.height || 0);
const isAwaitingScaleTarget =
localEditOperationMode === "scale_adjust" && !region.targetRect;
const active =
localEditRegionInteraction?.regionId === region.id &&
localEditRegionInteraction.target === "source";
return (
目标框
{(
[
{
handle: "nw",
className: "-left-[5px] -top-[5px] cursor-nwse-resize",
},
{
handle: "ne",
className: "-right-[5px] -top-[5px] cursor-nesw-resize",
},
{
handle: "sw",
className: "-left-[5px] -bottom-[5px] cursor-nesw-resize",
},
{
handle: "se",
className: "-right-[5px] -bottom-[5px] cursor-nwse-resize",
},
] as const
).map((item) => (
))}
{
event.preventDefault();
event.stopPropagation();
}}
onPointerCancel={(event) =>
handleLocalEditRegionPointerCancel(event, region.id)
}
onPointerDown={(event) =>
handleLocalEditRegionPointerDown(event, region)
}
onPointerMove={(event) =>
handleLocalEditRegionPointerMove(event, region.id)
}
onPointerUp={(event) =>
handleLocalEditRegionPointerUp(event, region.id)
}
style={{
left,
top,
width: Math.max(width, 1),
height: Math.max(height, 1),
borderColor: region.color,
}}
>
{!isAwaitingScaleTarget ? (
[
{
handle: "nw",
className: "-left-[5px] -top-[5px] cursor-nwse-resize",
},
{
handle: "ne",
className: "-right-[5px] -top-[5px] cursor-nesw-resize",
},
{
handle: "sw",
className: "-left-[5px] -bottom-[5px] cursor-nesw-resize",
},
{
handle: "se",
className: "-right-[5px] -bottom-[5px] cursor-nwse-resize",
},
] as const
).map((item) => (
)) : null}
);
})}
{(localEditOperationMode as CanvasLocalEditOperationMode) !== "scale_adjust" &&
typeof document !== "undefined" &&
localEditPromptPortalFrame
? createPortal(
{localEditPromptViewportOverlays.map(
({ region, isEditing, isAwaitingScaleTarget, style }) => (
,
document.body
)
: null}
{localEditDraftRectStyle ? (
) : null}
)}
{/* 🆕 拾取模式：当前点击位置（正在识别） */}
{isThisNodePicking && currentPickerClickStyle && (
event.stopPropagation()}
onMouseDown={(event) => event.stopPropagation()}
onPointerDown={(event) => event.stopPropagation()}
style={style}
>
)
)}
{isEditing ? (
{
const nextPrompt =
localEditPromptDraftRefs.current[region.id] ??
event.currentTarget.value;
event.currentTarget.value = nextPrompt;
persistLocalEditRegionPrompt(region.id, nextPrompt);
}}
onClick={(event) => {
event.stopPropagation();
}}
onCompositionEnd={(event) => {
finishLocalEditPromptComposition(
region.id,
event.currentTarget,
event.data
);
}}
onCompositionStart={(event) => {
localEditPromptCompositionStartRefs.current[
region.id
] = {
end:
event.currentTarget.selectionEnd ??
event.currentTarget.value.length,
start:
event.currentTarget.selectionStart ??
event.currentTarget.value.length,
value:
localEditPromptDraftRefs.current[region.id] ??
event.currentTarget.value,
};
}}
onFocus={(event) => {
event.stopPropagation();
setEditingLocalEditRegionId((current) =>
current === region.id ? current : region.id
);
}}
onChange={(event) => {
updateLocalEditPromptDraftRef(
region.id,
event.currentTarget.value
);
}}
onKeyDown={(event) => {
const isComposing =
event.nativeEvent.isComposing ||
event.key === "Process";
if (isComposing) {
return;
}
if (
applyLocalEditPromptKeyEdit(
region.id,
event.currentTarget,
event
)
) {
return;
}
if (
event.key === "Enter" &&
(event.metaKey || event.ctrlKey)
) {
event.preventDefault();
event.stopPropagation();
persistLocalEditRegionPrompt(
region.id,
event.currentTarget.value
);
setEditingLocalEditRegionId(null);
}
if (event.key === "Escape") {
event.preventDefault();
event.stopPropagation();
persistLocalEditRegionPrompt(
region.id,
event.currentTarget.value
);
setEditingLocalEditRegionId(null);
}
}}
onMouseDown={(event) => {
event.stopPropagation();
}}
onPointerDown={(event) => {
event.stopPropagation();
}}
placeholder={`区域 ${region.index} 提示词`}
ref={(input) => {
localEditPromptInputRefs.current[region.id] = input;
}}
spellCheck={false}
type="text"
/>
) : (
)}
{
void handleLocalEditReferenceUpload(
region.id,
event.currentTarget.files
);
event.currentTarget.value = "";
}}
type="file"
/>
{region.referenceImages?.length ? (
参考
{region.referenceImages.map((reference) => (
))}
) : null}
event.stopPropagation()}
onMouseDown={(event) => event.stopPropagation()}
onPointerDown={(event) => event.stopPropagation()}
ref={boxCutoutToolbarRef}
style={{
top: boxCutoutToolbarPosition.top,
left: boxCutoutToolbarPosition.left,
transform: `scale(${FLOATING_TOOLBAR_SCALE})`,
transformOrigin: "top left",
pointerEvents: "auto",
maxWidth: `${Math.max(
180,
Math.floor(boxCutoutToolbarPosition.maxWidth / FLOATING_TOOLBAR_SCALE)
)}px`,
overflowX: "auto",
scrollbarWidth: "none",
}}
>
,
document.body
)}
{aiWashQuickPanelOpen &&
imageAiWashQuickEnabled &&
isSelected &&
!isMultiSelected &&
data.src &&
!isEditingTitle &&
!sceneFusionDialogOpen &&
!promptDialogOpen &&
!layoutReplaceDialogOpen &&
!threedGenerationDialogMode &&
!notePanelOpen &&
!boxCutoutMode &&
!localEditMode &&
!cropPanelOpen &&
typeof document !== "undefined" &&
createPortal(
event.stopPropagation()}
onMouseDown={(event) => event.stopPropagation()}
onPointerDown={(event) => event.stopPropagation()}
style={{
top: aiWashQuickPanelPosition.top,
left: aiWashQuickPanelPosition.left,
width: aiWashQuickPanelPosition.width,
maxHeight: aiWashQuickPanelPosition.maxHeight,
overflowY: "auto",
scrollbarWidth: "none",
}}
>
,
document.body
)}
{isSelected &&
!isMultiSelected &&
data.src &&
!isEditingTitle &&
!sceneFusionDialogOpen &&
!promptDialogOpen &&
!threedGenerationDialogMode &&
!notePanelOpen &&
!boxCutoutMode &&
!localEditMode &&
!cropPanelOpen &&
typeof document !== "undefined" &&
createPortal(
{aiWashQuickModeLabel}
{selectedAiWashQuickPreset.description}
) : null}
参数
{shouldShowAiWashQuickModelSelector ? (
{selectedAiWashQuickModel
? `${selectedAiWashQuickModel.displayName} · ${
selectedAiWashQuickModel.unitCost > 0
? `${selectedAiWashQuickModel.unitCost} 积分/张`
: "未设置积分"
}`
: aiWashModelOptionsLoading
? "正在加载可选模型..."
: "没有可选模型"}
{aiWashQuickControls.map((control) => {
const selectedIndex =
aiWashQuickLevels[control.id] ?? control.defaultLevel;
const activeLevel =
getAiWashControlLevelByIndex(control, selectedIndex) ||
control.levels[0] ||
null;
return (
setAiWashQuickLevels((current) => ({
...current,
[control.id]: Math.round(next ?? 0),
}))
}
rangeClassName="bg-slate-950 dark:bg-white"
step={1}
thumbClassName="h-3.5 w-3.5 border border-slate-300 bg-white shadow-[0_0_0_4px_rgba(15,23,42,0.06)]"
trackClassName="h-1.5 bg-slate-200 dark:bg-white/14"
value={[selectedIndex]}
/>
);
})}
{control.label}
{activeLevel?.label || selectedIndex + 1}
e.stopPropagation()}
onMouseDown={(e) => e.stopPropagation()}
onPointerDown={(e) => e.stopPropagation()}
ref={toolbarRef}
style={{
top: toolbarPosition.top,
left: toolbarPosition.left,
transform: `scale(${FLOATING_TOOLBAR_SCALE})`,
transformOrigin: "top left",
pointerEvents: "auto",
maxWidth: `${Math.max(
180,
Math.floor(toolbarPosition.maxWidth / FLOATING_TOOLBAR_SCALE)
)}px`,
overflowX: "visible",
scrollbarWidth: "none",
}}
>
{imageAddToChatEnabled ? (
) : null}
{imageAddToChatEnabled &&
(hasSelectedImagePrimaryToolbarActions ||
hasSelectedImageSecondaryToolbarActions) ? (
) : null}
{isSelectedImageActionInline("pickObject") ? (
) : null}
{isSelectedImageActionInline("enhance") ? (
) : null}
{isSelectedImageActionInline("removeBackground") ? (
) : null}
{isSelectedImageActionInline("aiWashQuick") ? (
) : null}
{isSelectedImageActionInline("textEdit") ? (
) : null}
{isSelectedImageActionInline("boxCutout") ? (
) : null}
{isSelectedImageActionInline("localEdit") ? (
) : null}
{isSelectedImageActionInline("layoutReplace") ? (
) : null}
{isSelectedImageActionInline("removeWatermark") ? (
) : null}
{isSelectedImageActionInline("resize") ? (
) : null}
{isSelectedImageActionInline("multiAngle") ? (
) : null}
{isSelectedImageActionInline("generate3dModel") ? (
) : null}
{isSelectedImageActionInline("generate3dWorld") ? (
) : null}
{isSelectedImageActionInline("layerSplit") ? (
) : null}
{isSelectedImageActionInline("extend") ? (
) : null}
{isSelectedImageActionInline("crop") ? (
) : null}
{isSelectedImageActionInline("adjust") ? (
) : null}
{isSelectedImageActionInline("flipRotate") ? (
) : null}
{isSelectedImageActionInline("promptRegenerate") ? (
) : null}
{isSelectedImageActionInline("note") ? (
) : null}
{hasSelectedImagePrimaryToolbarActions &&
hasSelectedImageSecondaryToolbarActions ? (
) : null}
{hasSelectedImageMoreMenu ? (
{isSelectedImageActionInMore("boxCutout") ? (
handleAction("box-cutout")}>
) : null}
{isSelectedImageActionInMore("localEdit") ? (
handleAction("local-edit")}>
) : null}
{isSelectedImageActionInMore("layoutReplace") ? (
handleAction("layout-replace")}
>
) : null}
{isSelectedImageActionInMore("removeWatermark") ? (
handleAction("watermark")}>
) : null}
{isSelectedImageActionInMore("resize") ? (
handleAction("resize")}>
) : null}
{isSelectedImageActionInMore("multiAngle") ? (
handleAction("angle")}>
) : null}
{isSelectedImageActionInMore("generate3dModel") ? (
handleAction("generate-3d-model")}
>
) : null}
{isSelectedImageActionInMore("generate3dWorld") ? (
handleAction("generate-3d-world")}
>
) : null}
{isSelectedImageActionInMore("layerSplit") ? (
handleAction("layer-split")}>
) : null}
{isSelectedImageActionInMore("extend") ? (
handleAction("extend")}>
) : null}
{isSelectedImageActionInMore("crop") ? (
handleAction("crop")}>
) : null}
{isSelectedImageActionInMore("adjust") ? (
handleAction("adjust")}>
) : null}
{isSelectedImageActionInMore("flipRotate") ? (
handleAction("flip-rotate")}>
) : null}
{isSelectedImageActionInMore("promptRegenerate") ? (
handleAction("prompt-regenerate")}
>
) : null}
{isSelectedImageActionInMore("note") ? (
handleAction("note")}>
) : null}
{hasCanvasAgentAnnotations ? (
) : null}
{(hasSelectedImageMorePrimaryActions || hasCanvasAgentAnnotations) &&
imageDeleteEnabled ? (
deleteNode(node.id)}
>
) : null}
) : null}
{imageDownloadEnabled ? (
) : null}
event.stopPropagation()}
onMouseDown={(event) => event.stopPropagation()}
onPointerDown={(event) => event.stopPropagation()}
ref={boxCutoutToolbarRef}
style={{
top: boxCutoutToolbarPosition.top,
left: boxCutoutToolbarPosition.left,
transform: `scale(${FLOATING_TOOLBAR_SCALE})`,
transformOrigin: "top left",
pointerEvents: "auto",
maxWidth: `${Math.max(
180,
Math.floor(boxCutoutToolbarPosition.maxWidth / FLOATING_TOOLBAR_SCALE)
)}px`,
overflowX: "auto",
scrollbarWidth: "none",
}}
>
,
document.body
)}
{/* 图片批注对话框 */}