lunanting/ai-chatbot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: align ai wash compare frame

Browse Source
This commit is contained in:
134 2026-07-01 01:04:34 +08:00
parent 91fe35e3b6
commit 672139e35a
1 changed files with 39 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
components/canvas/nodes/ImageNode.tsx
View File

@ -2420,27 +2420,6 @@ export function ImageNode({
const compareSource = compareSourceInfo.url;
const hasCompareSource = Boolean(data.src) && Boolean(compareSource);
const compareImageFrameStyle = useMemo<React.CSSProperties>(() => {
const boxWidth = Math.max(1, Number(node.size.width || 0));
const boxHeight = Math.max(1, Number(node.size.height || 0));
const naturalWidth = Math.max(1, Number(compareSourceInfo.width || boxWidth));
const naturalHeight = Math.max(1, Number(compareSourceInfo.height || boxHeight));
const scale = Math.min(boxWidth / naturalWidth, boxHeight / naturalHeight);
const renderedWidth = Math.max(1, naturalWidth * scale);
const renderedHeight = Math.max(1, naturalHeight * scale);
return {
height: renderedHeight,
left: (boxWidth - renderedWidth) / 2,
top: (boxHeight - renderedHeight) / 2,
width: renderedWidth,
};
}, [
compareSourceInfo.height,
compareSourceInfo.width,
node.size.height,
node.size.width,
]);
const compareButtonVisualSize = useMemo(() => {
const minSide = Math.max(
1,
@ -2548,6 +2527,23 @@ export function ImageNode({
}
return null;
}, [data.metadata]);
const compareImageFrameStyle = useMemo<React.CSSProperties>(() => {
const boxWidth = Math.max(1, Number(node.size.width || 0));
const boxHeight = Math.max(1, Number(node.size.height || 0));
const activeResolution = metadataResolution || loadedResolution;
const naturalWidth = Math.max(1, Number(activeResolution?.width || boxWidth));
const naturalHeight = Math.max(1, Number(activeResolution?.height || boxHeight));
const scale = Math.min(boxWidth / naturalWidth, boxHeight / naturalHeight);
const renderedWidth = Math.max(1, naturalWidth * scale);
const renderedHeight = Math.max(1, naturalHeight * scale);
return {
height: renderedHeight,
left: (boxWidth - renderedWidth) / 2,
top: (boxHeight - renderedHeight) / 2,
width: renderedWidth,
};
}, [loadedResolution, metadataResolution, node.size.height, node.size.width]);
const resolutionLabel = useMemo(() => {
const source = metadataResolution || loadedResolution;
if (!source) return "";
@ -3116,6 +3112,25 @@ export function ImageNode({
});
}, [loadedResolution, metadataResolution]);
const handleDisplayImageLoad = useCallback(
(event: React.SyntheticEvent<HTMLImageElement>) => {
const width = Math.round(event.currentTarget.naturalWidth || 0);
const height = Math.round(event.currentTarget.naturalHeight || 0);
if (width > 0 && height > 0) {
setLoadedResolution((current) => {
if (current?.width === width && current?.height === height) {
return current;
}
return { width, height };
});
}
refreshBoxCutoutMetrics();
},
[refreshBoxCutoutMetrics]
);
const getBoxCutoutPointerPoint = useCallback(
(clientX: number, clientY: number) => {
const imageElement = displayImageRef.current;
@ -8473,6 +8488,8 @@ export function ImageNode({
event.currentTarget.src = data.src;
}
}}
onLoad={handleDisplayImageLoad}
ref={displayImageRef}
src={displayImageSrc}
style={activeImageAdjustmentsStyle}
/>
@ -8568,7 +8585,7 @@ export function ImageNode({
event.currentTarget.src = data.src;
}
}}
onLoad={refreshBoxCutoutMetrics}
onLoad={handleDisplayImageLoad}
ref={displayImageRef}
src={displayImageSrc}
style={activeImageAdjustmentsStyle}