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

fix(canvas): shrink compare toggle and hide it in compare mode
Some checks failed
Lint / build (20) (push) Has been cancelled
Details
Playwright Tests / test (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Your Name 2026-03-02 16:19:04 +08:00
parent c4924dbd6b
commit 26244a724c
1 changed files with 7 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -359,18 +359,18 @@ export function ImageNode({ node, isSelected }: ImageNodeProps) {
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(32, Math.min(42, minSide * 0.12)));
return Math.round(Math.max(24, Math.min(32, minSide * 0.09)));
}, [node.size.height, node.size.width]);
const compareButtonHitSize = useMemo(
() => Math.max(44, compareButtonVisualSize + 12),
() => Math.max(34, compareButtonVisualSize + 8),
[compareButtonVisualSize]
);
const compareButtonIconSize = useMemo(
() => Math.round(Math.max(14, Math.min(20, compareButtonVisualSize * 0.45))),
() => Math.round(Math.max(12, Math.min(16, compareButtonVisualSize * 0.5))),
[compareButtonVisualSize]
);
const compareButtonInset = useMemo(
() => Math.max(6, Math.min(12, Math.round(compareButtonVisualSize * 0.24))),
() => Math.max(6, Math.min(10, Math.round(compareButtonVisualSize * 0.22))),
[compareButtonVisualSize]
);
@ -1728,16 +1728,10 @@ export function ImageNode({ node, isSelected }: ImageNodeProps) {
</div>
)}
{hasCompareSource && !isThisNodePicking && (isCompareMode || (isSelected && !isMultiSelected)) && (
{hasCompareSource && !isThisNodePicking && !isCompareMode && isSelected && !isMultiSelected && (
<button
type="button"
className={cn(
"pointer-events-auto absolute top-1/2 z-[220] inline-flex -translate-y-1/2 items-center justify-center rounded-full text-white transition-all data-[state=on]:scale-100",
isCompareMode
? "shadow-[0_0_0_3px_rgba(255,255,255,0.45),0_10px_22px_rgba(14,165,233,0.35)]"
: "shadow-[0_8px_18px_rgba(0,0,0,0.28)]"
)}
data-state={isCompareMode ? "on" : "off"}
className="pointer-events-auto absolute top-1/2 z-[220] inline-flex -translate-y-1/2 items-center justify-center rounded-full text-white shadow-[0_8px_16px_rgba(0,0,0,0.22)] transition-all"
data-canvas-no-drag="true"
style={{
width: `${compareButtonHitSize}px`,
@ -1756,12 +1750,7 @@ export function ImageNode({ node, isSelected }: ImageNodeProps) {
aria-label={isCompareMode ? "对比已开启" : "开启对比"}
>
<span
className={cn(
"inline-flex items-center justify-center rounded-full border text-white transition-colors",
isCompareMode
? "border-sky-100 bg-sky-500/95"
: "border-white/80 bg-black/78 hover:bg-black/88"
)}
className="inline-flex items-center justify-center rounded-full border border-white/80 bg-black/78 text-white transition-colors hover:bg-black/88"
style={{
width: `${compareButtonVisualSize}px`,
height: `${compareButtonVisualSize}px`,